aniva/Chrysoblog
aniva
/
Chrysoblog
1
1
Fork 0
Code Issues 9 Pull Requests 2 Packages Projects Releases Wiki Activity

fix: Dark mode colour variables #21

Merged
aniva merged 3 commits from styling/dark-mode into main 2024-10-17 23:32:53 -07:00
Conversation 0 Commits 3 Files Changed 4 +43 -45
4 changed files with 43 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app.css
View File

@ -37,13 +37,14 @@
--radius: 0.5rem; --radius: 0.5rem;
--shadow: theme('colors.java.800');
--name: theme('colors.java.800'); --name: theme('colors.java.800');
--navlink: theme('colors.eucalyptus.400'); --navlink: theme('colors.eucalyptus.400');
} }
.dark { .dark {
--background: 20 14.3% 4.1%; --background: 20 14.3% 4.1%;
--foreground: 230 9.1% 97.8%; --foreground: 150 9.1% 70%;
--muted: 12 6.5% 15.1%; --muted: 12 6.5% 15.1%;
--muted-foreground: 24 5.4% 63.9%; --muted-foreground: 24 5.4% 63.9%;
@ -70,6 +71,7 @@
--destructive-foreground: 60 9.1% 97.8%; --destructive-foreground: 60 9.1% 97.8%;
--ring: 24 5.7% 82.9%; --ring: 24 5.7% 82.9%;
--shadow: theme('colors.java.100');
--name: theme('colors.java.300'); --name: theme('colors.java.300');
--navlink: theme('colors.eucalyptus.200'); --navlink: theme('colors.eucalyptus.200');
} }

4
src/routes/+page.svelte
View File

@ -138,8 +138,8 @@
width: 100%; width: 100%;
@apply bg-background; @apply bg-background;
@apply dark:bg-gray-800; @apply dark:bg-gray-800;
box-shadow: /*box-shadow:
0px -5px 10px 10px var(--foreground); 0px -5px 5px var(--shadow);*/
} }
#bio { #bio {
max-width: max(50vw, 100vh); max-width: max(50vw, 100vh);

3
src/routes/Footer.svelte
View File

@ -7,6 +7,7 @@
text-align: center; text-align: center;
bottom: 10px; bottom: 10px;
font-size: 12px; font-size: 12px;
color: #888; background-color: var(--background);
color: var(--foreground);
} }
</style> </style>

77
tailwind.config.ts
View File

@ -121,57 +121,52 @@ const config: Config = {
maxWidth: "100%", maxWidth: "100%",
}; };
const themeTokiwa = { const themeTokiwa = {
h1: { '--tw-prose-body': theme('colors.gray.900'),
color: theme('colors.eucalyptus.700'), '--tw-prose-headings': theme('colors.eucalyptus.700'),
}, '--tw-prose-lead': theme('colors.eucalyptus.400'),
h2: { '--tw-prose-links': theme('colors.eucalyptus.400'),
color: theme('colors.eucalyptus.700'), '--tw-prose-bold': theme('colors.eucalyptus.800'),
}, '--tw-prose-counters': theme('colors.gray.900'),
h3: { '--tw-prose-bullets': theme('colors.java.900'),
color: theme('colors.eucalyptus.800'), '--tw-prose-hr': theme('colors.gray.600'),
}, '--tw-prose-quotes': theme('colors.gray.900'),
h4: { '--tw-prose-quote-borders': theme('colors.eucalyptus.700'),
color: theme('colors.eucalyptus.800'), '--tw-prose-captions': theme('colors.gray.800'),
}, '--tw-prose-code': theme('colors.sunglow.900'),
'--tw-prose-pre-code': theme('colors.gray.500'),
'--tw-prose-pre-bg': theme('colors.gray.500'),
'--tw-prose-th-borders': theme('colors.gray.500'),
'--tw-prose-td-borders': theme('colors.gray.500'),
a: { a: {
color: theme('colors.eucalyptus.400'), color: theme('colors.eucalyptus.400'),
"&:focus": { "&:hover, &:focus": {
color: theme('colors.java.500'), color: theme('colors.java.500'),
}, },
}, },
blockquote: {
color: theme('colors.gray.800'),
},
code: {
color: theme('colors.gray.800'),
},
}; };
const themeStar = { const themeStar = {
color: theme('colors.gray.200'), '--tw-prose-body': theme('colors.gray.400'),
h1: { '--tw-prose-headings': theme('colors.eucalyptus.500'),
color: theme('colors.eucalyptus.300'), '--tw-prose-lead': theme('colors.eucalyptus.400'),
}, '--tw-prose-links': theme('colors.eucalyptus.500'),
h2: { '--tw-prose-bold': theme('colors.eucalyptus.100'),
color: theme('colors.eucalyptus.300'), '--tw-prose-counters': theme('colors.gray.100'),
}, '--tw-prose-bullets': theme('colors.java.100'),
h3: { '--tw-prose-hr': theme('colors.gray.400'),
color: theme('colors.eucalyptus.200'), '--tw-prose-quotes': theme('colors.gray.100'),
}, '--tw-prose-quote-borders': theme('colors.eucalyptus.300'),
h4: { '--tw-prose-captions': theme('colors.gray.200'),
color: theme('colors.eucalyptus.200'), '--tw-prose-code': theme('colors.sunglow.300'),
}, '--tw-prose-pre-code': theme('colors.gray.500'),
'--tw-prose-pre-bg': theme('colors.gray.500'),
'--tw-prose-th-borders': theme('colors.gray.500'),
'--tw-prose-td-borders': theme('colors.gray.500'),
a: { a: {
color: theme('colors.eucalyptus.500'), color: theme('colors.eucalyptus.300'),
"&:focus": { "&:hover, &:focus": {
color: theme('colors.java.500'), color: theme('colors.java.400'),
}, },
}, },
blockquote: {
color: theme('colors.gray.300'),
},
code: {
color: theme('colors.gray.300'),
},
}; };
return { return {