jfmonty2/blog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

all the themes together + switcher

Browse Source
This commit is contained in:
jfmonty2
2026-03-07 13:18:56 -05:00
parent 6bf81e0b20
commit 657ad09a20
3 changed files with 193 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/vars.css
+122 -11
View File
@@ -13,22 +13,133 @@
--accent-color: hsl(0deg 92% 29%);
--accent-color-faded: hsl(0deg 25% 55%);
--nav-hover: hsl(0deg 0% 0% / 10%);
--nav-hover-color: white;
--header-border-width: 0;
--header-border-color: transparent;
@media(max-width: 640px) {
--content-line-height: 1.25;
--content-size: 1.15rem;
--content-size-sm: 0.9rem;
}
}
@media(prefers-color-scheme: dark) {
--bg-color: hsl(230deg 20% 10%);
--content-color: hsl(200deg 12% 75%);
--content-color-faded: hsl(200deg 8% 50%);
--heading-color: hsl(260deg 15% 90%);
--primary-color: hsl(230deg 25% 40%);
--primary-color-faded: hsl(230deg 18% 15%);
--accent-color: hsl(175deg 65% 50%);
--accent-color-faded: hsl(175deg 25% 42%);
--nav-hover: hsl(175deg 20% 100% / 10%);
}
/* v1: Cool */
[data-theme="cool"] {
--bg-color: hsl(210deg 12% 12%);
--content-color: hsl(0deg 0% 82%);
--content-color-faded: hsl(0deg 0% 60%);
--heading-color: hsl(0deg 0% 90%);
--primary-color: hsl(202deg 50% 50%);
--primary-color-faded: hsl(202deg 14% 22%);
--accent-color: hsl(0deg 72% 55%);
--accent-color-faded: hsl(0deg 20% 60%);
--nav-hover: hsl(0deg 0% 100% / 12%);
}
/* v2: Warm Terracotta */
[data-theme="warm"] {
--bg-color: hsl(30deg 10% 12%);
--content-color: hsl(35deg 15% 80%);
--content-color-faded: hsl(30deg 8% 55%);
--heading-color: hsl(35deg 20% 88%);
--primary-color: hsl(35deg 40% 50%);
--primary-color-faded: hsl(30deg 12% 20%);
--accent-color: hsl(20deg 75% 55%);
--accent-color-faded: hsl(20deg 25% 55%);
--nav-hover: hsl(35deg 20% 100% / 12%);
}
/* v3: Blue Everything */
[data-theme="blue"] {
--bg-color: hsl(220deg 18% 11%);
--content-color: hsl(215deg 10% 78%);
--content-color-faded: hsl(215deg 6% 55%);
--heading-color: hsl(210deg 15% 90%);
--primary-color: hsl(215deg 60% 50%);
--primary-color-faded: hsl(220deg 30% 22%);
--accent-color: hsl(210deg 90% 60%);
--accent-color-faded: hsl(210deg 35% 55%);
--nav-hover: hsl(210deg 30% 100% / 12%);
}
/* v4: Blue + Gold */
[data-theme="blue-gold"] {
--bg-color: hsl(220deg 18% 11%);
--content-color: hsl(215deg 10% 78%);
--content-color-faded: hsl(215deg 6% 55%);
--heading-color: hsl(210deg 15% 90%);
--primary-color: hsl(215deg 60% 50%);
--primary-color-faded: hsl(220deg 30% 22%);
--accent-color: hsl(45deg 85% 55%);
--accent-color-faded: hsl(45deg 35% 50%);
--nav-hover: hsl(210deg 30% 100% / 12%);
}
/* v5: Blue + Salmon */
[data-theme="salmon"] {
--bg-color: hsl(220deg 18% 11%);
--content-color: hsl(215deg 10% 78%);
--content-color-faded: hsl(215deg 6% 55%);
--heading-color: hsl(210deg 15% 90%);
--primary-color: hsl(215deg 60% 50%);
--primary-color-faded: hsl(220deg 30% 22%);
--accent-color: hsl(10deg 80% 65%);
--accent-color-faded: hsl(10deg 30% 55%);
--nav-hover: hsl(210deg 30% 100% / 12%);
}
/* v6: Midnight Garden */
[data-theme="midnight-garden"] {
--bg-color: hsl(160deg 15% 9%);
--content-color: hsl(100deg 8% 78%);
--content-color-faded: hsl(110deg 5% 52%);
--heading-color: hsl(45deg 20% 90%);
--primary-color: hsl(155deg 30% 35%);
--primary-color-faded: hsl(155deg 20% 14%);
--accent-color: hsl(340deg 45% 65%);
--accent-color-faded: hsl(340deg 20% 50%);
--nav-hover: hsl(155deg 15% 100% / 10%);
}
/* v7: Stormfront */
[data-theme="stormfront"] {
--bg-color: hsl(0deg 0% 8%);
--content-color: hsl(0deg 0% 75%);
--content-color-faded: hsl(0deg 0% 50%);
--heading-color: hsl(0deg 0% 95%);
--primary-color: hsl(270deg 60% 60%);
--primary-color-faded: hsl(0deg 0% 8%);
--accent-color: hsl(270deg 75% 65%);
--accent-color-faded: hsl(270deg 25% 50%);
--nav-hover: hsl(270deg 30% 100% / 10%);
--nav-hover-color: var(--accent-color);
--header-border-width: 2px;
--header-border-color: var(--accent-color);
}
/* v8: Copper & Slate */
[data-theme="copper-slate"] {
--bg-color: hsl(220deg 10% 13%);
--content-color: hsl(30deg 10% 75%);
--content-color-faded: hsl(25deg 6% 50%);
--heading-color: hsl(35deg 25% 88%);
--primary-color: hsl(220deg 15% 40%);
--primary-color-faded: hsl(220deg 12% 18%);
--accent-color: hsl(18deg 70% 55%);
--accent-color-faded: hsl(18deg 30% 45%);
--nav-hover: hsl(20deg 15% 100% / 10%);
}
/* v9: Northern Lights */
[data-theme="northern-lights"] {
--bg-color: hsl(230deg 20% 10%);
--content-color: hsl(200deg 12% 75%);
--content-color-faded: hsl(200deg 8% 50%);
--heading-color: hsl(260deg 15% 90%);
--primary-color: hsl(230deg 25% 40%);
--primary-color-faded: hsl(230deg 18% 15%);
--accent-color: hsl(175deg 65% 50%);
--accent-color-faded: hsl(175deg 25% 42%);
--nav-hover: hsl(175deg 20% 100% / 10%);
}