feat: add light theme, fixes #156
This commit is contained in:
parent
291cfc80c6
commit
72636c5059
5 changed files with 89 additions and 40 deletions
37
src/main.css
37
src/main.css
|
|
@ -4,9 +4,42 @@
|
|||
|
||||
@layer components {
|
||||
.article {
|
||||
@apply p-4 mb-4 bg-gray-800/40 w-full mx-auto max-w-4xl rounded;
|
||||
@apply p-4 mb-4 bg-neutral-800/40 w-full mx-auto max-w-4xl rounded;
|
||||
}
|
||||
.btn-primary {
|
||||
@apply bg-lime-500 text-black rounded p-4 hover:bg-lime-400 cursor-pointer;
|
||||
@apply bg-accent-500 text-contrast rounded p-4 hover:bg-accent-400 cursor-pointer transition-colors;
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--contrast: 255, 255, 255;
|
||||
--neutral-900: 243, 244, 246;
|
||||
--neutral-800: 229, 231, 235;
|
||||
--neutral-700: 209, 213, 219;
|
||||
--neutral-600: 156, 163, 175;
|
||||
--neutral-500: 180, 180, 180;
|
||||
--neutral-400: 75, 85, 99;
|
||||
--neutral-300: 55, 65, 81;
|
||||
--neutral-200: 31, 41, 55;
|
||||
--neutral-100: 17, 24, 39;
|
||||
--accent-400: 132, 204, 22;
|
||||
--accent-500: 101, 163, 13;
|
||||
--accent-600: 77, 124, 15;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--contrast: 0, 0, 0;
|
||||
--neutral-900: 17, 24, 39;
|
||||
--neutral-800: 31, 41, 55;
|
||||
--neutral-700: 55, 65, 81;
|
||||
--neutral-600: 75, 85, 99;
|
||||
--neutral-500: 107, 114, 128;
|
||||
--neutral-300: 209, 213, 219;
|
||||
--neutral-400: 156, 163, 175;
|
||||
--neutral-200: 229, 231, 235;
|
||||
--accent-600: 101, 163, 13;
|
||||
--accent-500: 132, 204, 22;
|
||||
--accent-400: 163, 230, 53;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue