Changing Primary Colors between Dark and Light themes?
I've read through basically three or four different documentations, and for whatever reason I am a bit lost. I am trying to figure out the right strategy for replacing my 'primary' color entirely when changing from dark to light themes.
What I "think" I understand today is that the ui.pro and ui components by default simply change the 'shade' of the primary color, not swap it out entirely upon the screen mode change. I have primary and gray set in my app.config.ts in a standard way.
To solve this, I thought I could create a new color and then had the 'light/dark' change back to other defined colors. That didn't work (in fact npm is saying that it can't find the color when I set it to primary?)
the other thing I did was try and use variables, to see if I could just override the foreground/backgrounds -- that of course hasn't happened yet.
tailwind.config.ts:
extend: {
colors: {
red: {
50: '#fff1f1',
100: '#ffe0e0',
200: '#ffc7c7',
300: '#ffa0a0',
400: '#ff6969',
500: '#f93c3c',
600: '#e71b1b',
700: '#c21313',
800: '#a01414',
900: '#851717',
950: '#480707'
},
'newcolor': {
light: '#1a51db',
DEFAULT:'#f93c3c',
dark: 'red'
}
},
app.config it is:
export default defineAppConfig({
ui: {
primary: 'newcolor',
gray: 'cool',
variables: {
light: {
foreground: 'var(--color-blue-500)'
},
dark: {
foreground: 'var(--color-red-500)'
}
}
}
})
In either case, none of the above seems to work. I believe I could just override each ui control individually, but that seems a bit overkill...
what am I missing?
What I "think" I understand today is that the ui.pro and ui components by default simply change the 'shade' of the primary color, not swap it out entirely upon the screen mode change. I have primary and gray set in my app.config.ts in a standard way.
To solve this, I thought I could create a new color and then had the 'light/dark' change back to other defined colors. That didn't work (in fact npm is saying that it can't find the color when I set it to primary?)
the other thing I did was try and use variables, to see if I could just override the foreground/backgrounds -- that of course hasn't happened yet.
tailwind.config.ts:
extend: {
colors: {
red: {
50: '#fff1f1',
100: '#ffe0e0',
200: '#ffc7c7',
300: '#ffa0a0',
400: '#ff6969',
500: '#f93c3c',
600: '#e71b1b',
700: '#c21313',
800: '#a01414',
900: '#851717',
950: '#480707'
},
'newcolor': {
light: '#1a51db',
DEFAULT:'#f93c3c',
dark: 'red'
}
},
app.config it is:
export default defineAppConfig({
ui: {
primary: 'newcolor',
gray: 'cool',
variables: {
light: {
foreground: 'var(--color-blue-500)'
},
dark: {
foreground: 'var(--color-red-500)'
}
}
}
})
In either case, none of the above seems to work. I believe I could just override each ui control individually, but that seems a bit overkill...
what am I missing?
