mirror of
https://github.com/robonen/lorem-blog.git
synced 2026-03-20 02:44:39 +00:00
feat(styles): enhance CSS variables for theming and add new color definitions
This commit is contained in:
@@ -21,23 +21,55 @@
|
||||
--primary-dark: oklch(61% 0.1815 255.36);
|
||||
--primary-light: oklch(96% 0.0148 251.16);
|
||||
|
||||
--danger: oklch(64% 0.2107 11.41);
|
||||
|
||||
/* Default theme */
|
||||
--background: var(--gray-200);
|
||||
--foreground: var(--black);
|
||||
|
||||
--surface: var(--white);
|
||||
--surface-foreground: var(--black);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: var(--black);
|
||||
--foreground: var(--white);
|
||||
|
||||
--surface: var(--black);
|
||||
--surface-foreground: var(--white);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--gray-100: var(--gray-100);
|
||||
--gray-200: var(--gray-200);
|
||||
--gray-300: var(--gray-300);
|
||||
--gray-400: var(--gray-400);
|
||||
--gray-500: var(--gray-500);
|
||||
--gray-600: var(--gray-600);
|
||||
--gray-700: var(--gray-700);
|
||||
--gray-800: var(--gray-800);
|
||||
--gray-900: var(--gray-900);
|
||||
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-dark: var(--primary-dark);
|
||||
--color-primary-light: var(--primary-light);
|
||||
|
||||
--color-danger: var(--danger);
|
||||
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-foreground-muted: var(--gray-600);
|
||||
--color-foreground-muted-light: var(--gray-500);
|
||||
|
||||
--color-surface: var(--surface);
|
||||
--color-surface-foreground: var(--surface-foreground);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user