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

4
src/routes/+page.svelte
View File

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

3
src/routes/Footer.svelte
View File

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

77
tailwind.config.ts
View File

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