diff --git a/public/schema.json b/public/schema.json index 9946f9c..7893152 100644 --- a/public/schema.json +++ b/public/schema.json @@ -25,116 +25,103 @@ "properties": { "background": { "type": "string", - "pattern": "\\d+\\s+\\d+%\\s+\\d+%", - "default": "0 0% 100%" + "pattern": "\\d+\\s+\\d+%\\s+\\d+%" }, "foreground": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 0% 3.9%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "card": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 0% 100%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "card_foreground": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 0% 3.9%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "popover": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 0% 100%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "popover_foreground": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 0% 3.9%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "primary": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "354.44 71.3% 47.9%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "primary_foreground": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 85.7% 97.3%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "secondary": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 0% 96.1%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "secondary_foreground": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 0% 9%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "muted": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 0% 96.1%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "muted_foreground": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 0% 45.1%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "accent": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 0% 96.1%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "accent_foreground": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 0% 9%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "destructive": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 84.2% 60.2%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "destructive_foreground": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 0% 98%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "border": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 0% 89.8%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "input": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 0% 89.8%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "ring": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "354.44 71.3% 47.9%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "chart_1": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "12 76% 61%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "chart_2": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "173 58% 39%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "chart_3": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "197 37% 24%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "chart_4": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "43 74% 66%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "chart_5": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "27 87% 67%" + "$ref": "#/properties/theme/properties/light/properties/background" } }, "required": [ + "background", "foreground", + "card", "card_foreground", + "popover", "popover_foreground", "primary", "primary_foreground", "secondary", + "secondary_foreground", "muted", "muted_foreground", "accent", + "accent_foreground", "destructive", + "destructive_foreground", "border", "input", - "ring" + "ring", + "chart_1", + "chart_2", + "chart_3", + "chart_4", + "chart_5" ], "additionalProperties": false }, @@ -146,7 +133,61 @@ "light", "dark" ], - "additionalProperties": false + "additionalProperties": false, + "default": { + "light": { + "background": "0 0% 100%", + "foreground": "0 0% 3.9%", + "card": "0 0% 100%", + "card_foreground": "0 0% 3.9%", + "popover": "0 0% 100%", + "popover_foreground": "0 0% 3.9%", + "primary": "354.44 71.3% 47.9%", + "primary_foreground": "0 85.7% 97.3%", + "secondary": "0 0% 96.1%", + "secondary_foreground": "0 0% 9%", + "muted": "0 0% 96.1%", + "muted_foreground": "0 0% 45.1%", + "accent": "0 0% 96.1%", + "accent_foreground": "0 0% 9%", + "destructive": "0 84.2% 60.2%", + "destructive_foreground": "0 0% 98%", + "border": "0 0% 89.8%", + "input": "0 0% 89.8%", + "ring": "354.44 71.3% 47.9%", + "chart_1": "12 76% 61%", + "chart_2": "173 58% 39%", + "chart_3": "197 37% 24%", + "chart_4": "43 74% 66%", + "chart_5": "27 87% 67%" + }, + "dark": { + "background": "0 0% 3.9%", + "foreground": "0 0% 98%", + "card": "0 0% 3.9%", + "card_foreground": "0 0% 98%", + "popover": "0 0% 3.9%", + "popover_foreground": "0 0% 98%", + "primary": "354.44 71.3% 47.9%", + "primary_foreground": "0 85.7% 97.3%", + "secondary": "0 0% 14.9%", + "secondary_foreground": "0 0% 98%", + "muted": "0 0% 14.9%", + "muted_foreground": "0 0% 63.9%", + "accent": "0 0% 14.9%", + "accent_foreground": "0 0% 98%", + "destructive": "0 62.8% 30.6%", + "destructive_foreground": "0 0% 98%", + "border": "0 0% 14.9%", + "input": "0 0% 14.9%", + "ring": "354.44 71.3% 47.9%", + "chart_1": "220 70% 50%", + "chart_2": "160 60% 45%", + "chart_3": "30 80% 55%", + "chart_4": "280 65% 60%", + "chart_5": "340 75% 55%" + } + } }, "sections": { "type": "array", @@ -199,10 +240,6 @@ "default": 0, "description": "The default value" }, - "value": { - "type": "number", - "description": "The value of the input" - }, "min": { "type": "number", "description": "The minimum value" @@ -259,10 +296,6 @@ "default": "", "description": "The default value" }, - "value": { - "type": "string", - "description": "The value of the input" - }, "min": { "type": "number", "description": "The minimum length of the string" @@ -310,10 +343,6 @@ "default": 0, "description": "The default value" }, - "value": { - "type": "number", - "description": "The value of the input" - }, "min": { "type": "number", "description": "The minimum value" @@ -362,12 +391,9 @@ }, "defaultValue": { "type": "string", + "default": "", "description": "The default value. Must be one of the choices" }, - "value": { - "type": "string", - "description": "The value of the input" - }, "choices": { "type": "object", "additionalProperties": { @@ -384,8 +410,7 @@ "title", "type", "required", - "code", - "defaultValue" + "code" ], "additionalProperties": false }, @@ -416,12 +441,9 @@ }, "defaultValue": { "type": "number", + "default": 0, "description": "The default value" }, - "value": { - "type": "number", - "description": "The value of the input" - }, "min": { "type": "number", "description": "The minimum value" @@ -475,11 +497,8 @@ }, "defaultValue": { "type": "boolean", + "default": false, "description": "The default value" - }, - "value": { - "type": "boolean", - "description": "The value of the input" } }, "required": [ @@ -519,10 +538,6 @@ "type": "number", "default": 0, "description": "The default value" - }, - "value": { - "type": "number", - "description": "The value of the input" } }, "required": [ @@ -553,6 +568,7 @@ "page_title", "delimiter", "teamNumber", + "theme", "sections" ], "additionalProperties": false, diff --git a/src/assets/schema.json b/src/assets/schema.json index 9946f9c..7893152 100644 --- a/src/assets/schema.json +++ b/src/assets/schema.json @@ -25,116 +25,103 @@ "properties": { "background": { "type": "string", - "pattern": "\\d+\\s+\\d+%\\s+\\d+%", - "default": "0 0% 100%" + "pattern": "\\d+\\s+\\d+%\\s+\\d+%" }, "foreground": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 0% 3.9%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "card": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 0% 100%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "card_foreground": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 0% 3.9%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "popover": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 0% 100%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "popover_foreground": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 0% 3.9%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "primary": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "354.44 71.3% 47.9%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "primary_foreground": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 85.7% 97.3%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "secondary": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 0% 96.1%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "secondary_foreground": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 0% 9%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "muted": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 0% 96.1%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "muted_foreground": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 0% 45.1%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "accent": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 0% 96.1%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "accent_foreground": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 0% 9%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "destructive": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 84.2% 60.2%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "destructive_foreground": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 0% 98%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "border": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 0% 89.8%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "input": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "0 0% 89.8%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "ring": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "354.44 71.3% 47.9%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "chart_1": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "12 76% 61%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "chart_2": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "173 58% 39%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "chart_3": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "197 37% 24%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "chart_4": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "43 74% 66%" + "$ref": "#/properties/theme/properties/light/properties/background" }, "chart_5": { - "$ref": "#/properties/theme/properties/light/properties/background", - "default": "27 87% 67%" + "$ref": "#/properties/theme/properties/light/properties/background" } }, "required": [ + "background", "foreground", + "card", "card_foreground", + "popover", "popover_foreground", "primary", "primary_foreground", "secondary", + "secondary_foreground", "muted", "muted_foreground", "accent", + "accent_foreground", "destructive", + "destructive_foreground", "border", "input", - "ring" + "ring", + "chart_1", + "chart_2", + "chart_3", + "chart_4", + "chart_5" ], "additionalProperties": false }, @@ -146,7 +133,61 @@ "light", "dark" ], - "additionalProperties": false + "additionalProperties": false, + "default": { + "light": { + "background": "0 0% 100%", + "foreground": "0 0% 3.9%", + "card": "0 0% 100%", + "card_foreground": "0 0% 3.9%", + "popover": "0 0% 100%", + "popover_foreground": "0 0% 3.9%", + "primary": "354.44 71.3% 47.9%", + "primary_foreground": "0 85.7% 97.3%", + "secondary": "0 0% 96.1%", + "secondary_foreground": "0 0% 9%", + "muted": "0 0% 96.1%", + "muted_foreground": "0 0% 45.1%", + "accent": "0 0% 96.1%", + "accent_foreground": "0 0% 9%", + "destructive": "0 84.2% 60.2%", + "destructive_foreground": "0 0% 98%", + "border": "0 0% 89.8%", + "input": "0 0% 89.8%", + "ring": "354.44 71.3% 47.9%", + "chart_1": "12 76% 61%", + "chart_2": "173 58% 39%", + "chart_3": "197 37% 24%", + "chart_4": "43 74% 66%", + "chart_5": "27 87% 67%" + }, + "dark": { + "background": "0 0% 3.9%", + "foreground": "0 0% 98%", + "card": "0 0% 3.9%", + "card_foreground": "0 0% 98%", + "popover": "0 0% 3.9%", + "popover_foreground": "0 0% 98%", + "primary": "354.44 71.3% 47.9%", + "primary_foreground": "0 85.7% 97.3%", + "secondary": "0 0% 14.9%", + "secondary_foreground": "0 0% 98%", + "muted": "0 0% 14.9%", + "muted_foreground": "0 0% 63.9%", + "accent": "0 0% 14.9%", + "accent_foreground": "0 0% 98%", + "destructive": "0 62.8% 30.6%", + "destructive_foreground": "0 0% 98%", + "border": "0 0% 14.9%", + "input": "0 0% 14.9%", + "ring": "354.44 71.3% 47.9%", + "chart_1": "220 70% 50%", + "chart_2": "160 60% 45%", + "chart_3": "30 80% 55%", + "chart_4": "280 65% 60%", + "chart_5": "340 75% 55%" + } + } }, "sections": { "type": "array", @@ -199,10 +240,6 @@ "default": 0, "description": "The default value" }, - "value": { - "type": "number", - "description": "The value of the input" - }, "min": { "type": "number", "description": "The minimum value" @@ -259,10 +296,6 @@ "default": "", "description": "The default value" }, - "value": { - "type": "string", - "description": "The value of the input" - }, "min": { "type": "number", "description": "The minimum length of the string" @@ -310,10 +343,6 @@ "default": 0, "description": "The default value" }, - "value": { - "type": "number", - "description": "The value of the input" - }, "min": { "type": "number", "description": "The minimum value" @@ -362,12 +391,9 @@ }, "defaultValue": { "type": "string", + "default": "", "description": "The default value. Must be one of the choices" }, - "value": { - "type": "string", - "description": "The value of the input" - }, "choices": { "type": "object", "additionalProperties": { @@ -384,8 +410,7 @@ "title", "type", "required", - "code", - "defaultValue" + "code" ], "additionalProperties": false }, @@ -416,12 +441,9 @@ }, "defaultValue": { "type": "number", + "default": 0, "description": "The default value" }, - "value": { - "type": "number", - "description": "The value of the input" - }, "min": { "type": "number", "description": "The minimum value" @@ -475,11 +497,8 @@ }, "defaultValue": { "type": "boolean", + "default": false, "description": "The default value" - }, - "value": { - "type": "boolean", - "description": "The value of the input" } }, "required": [ @@ -519,10 +538,6 @@ "type": "number", "default": 0, "description": "The default value" - }, - "value": { - "type": "number", - "description": "The value of the input" } }, "required": [ @@ -553,6 +568,7 @@ "page_title", "delimiter", "teamNumber", + "theme", "sections" ], "additionalProperties": false, diff --git a/src/components/Sections/CommitAndResetSection/CommitAndResetSection.tsx b/src/components/Sections/CommitAndResetSection/CommitAndResetSection.tsx index 5097708..152bc69 100644 --- a/src/components/Sections/CommitAndResetSection/CommitAndResetSection.tsx +++ b/src/components/Sections/CommitAndResetSection/CommitAndResetSection.tsx @@ -17,10 +17,6 @@ export function CommitAndResetSection() { }, [formData]); const missingRequiredFields = useMemo(() => { - console.log( - 'missingRequiredFields', - fieldValues.filter(f => requiredFields.includes(f.code)), - ); return fieldValues .filter(f => requiredFields.includes(f.code)) .some(f => f.value === undefined || f.value === '' || f.value === null); diff --git a/src/components/Sections/ConfigSection/ConfigSection.tsx b/src/components/Sections/ConfigSection/ConfigSection.tsx index 19bb4ea..c5e5c4d 100644 --- a/src/components/Sections/ConfigSection/ConfigSection.tsx +++ b/src/components/Sections/ConfigSection/ConfigSection.tsx @@ -49,6 +49,9 @@ export function ConfigSection() { setShowEditor(false)} onSave={configString => { + console.log( + document.querySelector(':root')?.computedStyleMap().keys(), + ); setConfig(configString); setShowEditor(false); }} diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx index d6b3eaa..14fc179 100644 --- a/src/components/ThemeProvider.tsx +++ b/src/components/ThemeProvider.tsx @@ -1,3 +1,5 @@ +import { useQRScoutState } from '@/store/store'; +import { setColorScheme } from '@/util/theme'; import { createContext, useContext, useEffect, useState } from 'react'; type Theme = 'dark' | 'light' | 'system'; @@ -29,6 +31,19 @@ export function ThemeProvider({ const [theme, setTheme] = useState( () => (localStorage.getItem(storageKey) as Theme) || defaultTheme, ); + const [resolvedTheme, setResolvedTheme] = useState(theme); + + const appTheme = useQRScoutState(state => state.formData.theme); + + useEffect(() => { + if (resolvedTheme === 'dark') { + console.log('Setting dark theme', appTheme.dark); + setColorScheme(appTheme.dark); + } else { + console.log('Setting light theme', appTheme.light); + setColorScheme(appTheme.light); + } + }, [resolvedTheme, appTheme]); useEffect(() => { const root = window.document.documentElement; @@ -40,11 +55,11 @@ export function ThemeProvider({ .matches ? 'dark' : 'light'; - + setResolvedTheme(systemTheme); root.classList.add(systemTheme); return; } - + setResolvedTheme(theme); root.classList.add(theme); }, [theme]); diff --git a/src/components/inputs/BaseInputProps.ts b/src/components/inputs/BaseInputProps.ts index 51dd9bd..3776de4 100644 --- a/src/components/inputs/BaseInputProps.ts +++ b/src/components/inputs/BaseInputProps.ts @@ -107,40 +107,46 @@ export const sectionSchema = z.object({ ), }); -const shadcnColorSchema = z.string().regex(/\d+\s+\d+%\s+\d+%/); +const shadcnColorSchema = z + .string() + .regex(/^(\d+(?:\.\d+)?)(?: (\d+(?:\.\d+)?)%)?(?: (\d+(?:\.\d+)?)%)?$/gm); export const colorSchemeSchema = z.object({ - background: shadcnColorSchema.default('0 0% 100%'), - foreground: shadcnColorSchema.default('0 0% 3.9%'), - card: shadcnColorSchema.default('0 0% 100%'), - card_foreground: shadcnColorSchema.default('0 0% 3.9%'), - popover: shadcnColorSchema.default('0 0% 100%'), - popover_foreground: shadcnColorSchema.default('0 0% 3.9%'), - primary: shadcnColorSchema.default('354.44 71.3% 47.9%'), - primary_foreground: shadcnColorSchema.default('0 85.7% 97.3%'), - secondary: shadcnColorSchema.default('0 0% 96.1%'), - secondary_foreground: shadcnColorSchema.default('0 0% 9%'), - muted: shadcnColorSchema.default('0 0% 96.1%'), - muted_foreground: shadcnColorSchema.default('0 0% 45.1%'), - accent: shadcnColorSchema.default('0 0% 96.1%'), - accent_foreground: shadcnColorSchema.default('0 0% 9%'), - destructive: shadcnColorSchema.default('0 84.2% 60.2%'), - destructive_foreground: shadcnColorSchema.default('0 0% 98%'), - border: shadcnColorSchema.default('0 0% 89.8%'), - input: shadcnColorSchema.default('0 0% 89.8%'), - ring: shadcnColorSchema.default('354.44 71.3% 47.9%'), - chart_1: shadcnColorSchema.default('12 76% 61%'), - chart_2: shadcnColorSchema.default('173 58% 39%'), - chart_3: shadcnColorSchema.default('197 37% 24%'), - chart_4: shadcnColorSchema.default('43 74% 66%'), - chart_5: shadcnColorSchema.default('27 87% 67%'), + background: shadcnColorSchema, + foreground: shadcnColorSchema, + card: shadcnColorSchema, + card_foreground: shadcnColorSchema, + popover: shadcnColorSchema, + popover_foreground: shadcnColorSchema, + primary: shadcnColorSchema, + primary_foreground: shadcnColorSchema, + secondary: shadcnColorSchema, + secondary_foreground: shadcnColorSchema, + muted: shadcnColorSchema, + muted_foreground: shadcnColorSchema, + accent: shadcnColorSchema, + accent_foreground: shadcnColorSchema, + destructive: shadcnColorSchema, + destructive_foreground: shadcnColorSchema, + border: shadcnColorSchema, + input: shadcnColorSchema, + ring: shadcnColorSchema, + chart_1: shadcnColorSchema, + chart_2: shadcnColorSchema, + chart_3: shadcnColorSchema, + chart_4: shadcnColorSchema, + chart_5: shadcnColorSchema, }); +export type ColorScheme = z.infer; + export const themeSchema = z.object({ light: colorSchemeSchema, dark: colorSchemeSchema, }); +export type QRScoutTheme = z.infer; + export const configSchema = z.object({ title: z .string() @@ -154,7 +160,60 @@ export const configSchema = z.object({ teamNumber: z .number() .describe('The team number of the team using this form.'), - theme: themeSchema.optional(), + theme: themeSchema.default({ + light: { + background: '0 0% 100%', + foreground: '0 0% 3.9%', + card: '0 0% 100%', + card_foreground: '0 0% 3.9%', + popover: '0 0% 100%', + popover_foreground: '0 0% 3.9%', + primary: '354.44 71.3% 47.9%', + primary_foreground: '0 85.7% 97.3%', + secondary: '0 0% 96.1%', + secondary_foreground: '0 0% 9%', + muted: '0 0% 96.1%', + muted_foreground: '0 0% 45.1%', + accent: '0 0% 96.1%', + accent_foreground: '0 0% 9%', + destructive: '0 84.2% 60.2%', + destructive_foreground: '0 0% 98%', + border: '0 0% 89.8%', + input: '0 0% 89.8%', + ring: '354.44 71.3% 47.9%', + chart_1: '12 76% 61%', + chart_2: '173 58% 39%', + chart_3: '197 37% 24%', + chart_4: '43 74% 66%', + chart_5: '27 87% 67%', + }, + dark: { + background: '0 0% 3.9%', + foreground: '0 0% 98%', + card: '0 0% 3.9%', + card_foreground: '0 0% 98%', + popover: '0 0% 3.9%', + popover_foreground: '0 0% 98%', + primary: '354.44 71.3% 47.9%', + primary_foreground: '0 85.7% 97.3%', + secondary: '0 0% 14.9%', + secondary_foreground: '0 0% 98%', + muted: '0 0% 14.9%', + muted_foreground: '0 0% 63.9%', + accent: '0 0% 14.9%', + accent_foreground: '0 0% 98%', + destructive: '0 62.8% 30.6%', + destructive_foreground: '0 0% 98%', + border: '0 0% 14.9%', + input: '0 0% 14.9%', + ring: '354.44 71.3% 47.9%', + chart_1: '220 70% 50%', + chart_2: '160 60% 45%', + chart_3: '30 80% 55%', + chart_4: '280 65% 60%', + chart_5: '340 75% 55%', + }, + }), sections: z.array(sectionSchema), }); diff --git a/src/store/store.ts b/src/store/store.ts index c63016f..9b4b6ec 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -50,7 +50,6 @@ export function resetToDefaultConfig() { } export function updateValue(code: string, data: any) { - console.log('updateValue', code, data); useQRScoutState.setState( produce((state: QRScoutState) => { const field = state.fieldValues.find(f => f.code === code); diff --git a/src/util/theme.ts b/src/util/theme.ts new file mode 100644 index 0000000..bbf96c5 --- /dev/null +++ b/src/util/theme.ts @@ -0,0 +1,12 @@ +import { ColorScheme } from '@/components/inputs/BaseInputProps'; + +export function setCSSVariable(variable: string, value: string) { + document.documentElement.style.setProperty(variable, value); +} + +export function setColorScheme(colorScheme: ColorScheme) { + Object.entries(colorScheme).forEach(([key, value]) => { + const cssVariable = `--${key.replace('_', '-')}`; + setCSSVariable(cssVariable, value); + }); +}