soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Refine admin PWA dark theme controls
Some checks failed
linter / quality (push) Has been cancelled
Details
tests / ci (push) Has been cancelled
Details
tests / ui (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Codex Agent
2026-02-04 13:50:59 +01:00
parent 239f55f9c5
commit 66c7131d79
22 changed files with 999 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
resources/js/admin/mobile/components/FormControls.tsx
View File

@@ -95,7 +95,7 @@ export const MobileDateTimeInput = React.forwardRef<
HTMLInputElement,
React.ComponentPropsWithoutRef<'input'> & ControlProps
>(function MobileDateTimeInput({ hasError = false, style, ...props }, ref) {
const { border, surface, text, primary, danger } = useAdminTheme();
const { border, surface, text, primary, danger, isDark } = useAdminTheme();
const ringColor = hasError ? withAlpha(danger, 0.18) : withAlpha(primary, 0.18);
const borderColor = hasError ? danger : border;
@@ -114,6 +114,9 @@ export const MobileDateTimeInput = React.forwardRef<
borderColor,
backgroundColor: surface,
color: text,
WebkitAppearance: 'none',
appearance: 'none',
colorScheme: isDark ? 'dark' : 'light',
fontSize: 14,
outline: 'none',
boxShadow: `0 0 0 0 ${ringColor}`,
@@ -135,7 +138,7 @@ export const MobileDateInput = React.forwardRef<
HTMLInputElement,
React.ComponentPropsWithoutRef<'input'> & ControlProps
>(function MobileDateInput({ hasError = false, style, ...props }, ref) {
const { border, surface, text, primary, danger } = useAdminTheme();
const { border, surface, text, primary, danger, isDark } = useAdminTheme();
const ringColor = hasError ? withAlpha(danger, 0.18) : withAlpha(primary, 0.18);
const borderColor = hasError ? danger : border;
@@ -154,6 +157,9 @@ export const MobileDateInput = React.forwardRef<
borderColor,
backgroundColor: surface,
color: text,
WebkitAppearance: 'none',
appearance: 'none',
colorScheme: isDark ? 'dark' : 'light',
fontSize: 14,
outline: 'none',
boxShadow: `0 0 0 0 ${ringColor}`,
@@ -173,7 +179,7 @@ export const MobileDateInput = React.forwardRef<
export const MobileInput = React.forwardRef<HTMLInputElement, React.ComponentPropsWithoutRef<'input'> & ControlProps>(
function MobileInput({ hasError = false, compact = false, style, onChange, type, ...props }, ref) {
const { border, surface, text, primary, danger } = useAdminTheme();
const { border, surface, text, primary, danger, isDark } = useAdminTheme();
const borderColor = hasError ? danger : border;
const ringColor = hasError ? withAlpha(danger, 0.18) : withAlpha(primary, 0.18);
const isPassword = type === 'password';
@@ -196,6 +202,12 @@ export const MobileInput = React.forwardRef<HTMLInputElement, React.ComponentPro
backgroundColor={surface}
color={text}
borderColor={borderColor}
style={{
WebkitAppearance: 'none',
appearance: 'none',
colorScheme: isDark ? 'dark' : 'light',
...style,
} as any}
focusStyle={{
borderColor: hasError ? danger : primary,
boxShadow: `0 0 0 3px ${ringColor}`,
@@ -203,7 +215,6 @@ export const MobileInput = React.forwardRef<HTMLInputElement, React.ComponentPro
hoverStyle={{
borderColor,
} as any}
style={style as any}
/>
);
},
@@ -213,7 +224,7 @@ export const MobileTextArea = React.forwardRef<
HTMLTextAreaElement,
React.ComponentPropsWithoutRef<'textarea'> & ControlProps
>(function MobileTextArea({ hasError = false, compact = false, style, onChange, ...props }, ref) {
const { border, surface, text, primary, danger } = useAdminTheme();
const { border, surface, text, primary, danger, isDark } = useAdminTheme();
const borderColor = hasError ? danger : border;
const ringColor = hasError ? withAlpha(danger, 0.18) : withAlpha(primary, 0.18);
@@ -233,6 +244,13 @@ export const MobileTextArea = React.forwardRef<
backgroundColor={surface}
color={text}
borderColor={borderColor}
style={{
resize: 'vertical',
WebkitAppearance: 'none',
appearance: 'none',
colorScheme: isDark ? 'dark' : 'light',
...style,
} as any}
focusStyle={{
borderColor: hasError ? danger : primary,
boxShadow: `0 0 0 3px ${ringColor}`,
@@ -240,7 +258,6 @@ export const MobileTextArea = React.forwardRef<
hoverStyle={{
borderColor,
} as any}
style={{ resize: 'vertical', ...style } as any}
/>
);
});
@@ -253,7 +270,8 @@ export function MobileSelect({
style,
...props
}: MobileSelectProps) {
const { border, surface, text, primary, danger, subtle, glassSurfaceStrong, surfaceMuted, glassBorder } = useAdminTheme();
const { border, surface, text, primary, danger, subtle, glassSurfaceStrong, surfaceMuted, glassBorder, isDark } =
useAdminTheme();
const borderColor = hasError ? danger : (glassBorder ?? border);
const ringColor = hasError ? withAlpha(danger, 0.18) : withAlpha(primary, 0.18);
const triggerSurface = surfaceMuted ?? glassSurfaceStrong ?? surface;
@@ -316,7 +334,12 @@ export function MobileSelect({
hoverStyle={{
borderColor: borderColor as any,
}}
style={style as any}
style={{
WebkitAppearance: 'none',
appearance: 'none',
colorScheme: isDark ? 'dark' : 'light',
...style,
} as any}
>
<Select.Value placeholder={props.placeholder ?? (emptyOption?.label as any) ?? ''} {...({ color: text } as any)} />
</Select.Trigger>