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

add obsidian/mocha/deep-ocean themes (Gemini)

Browse Source
This commit is contained in:
Joseph Montanaro
2026-03-07 13:40:33 -05:00
parent 8fc267e6df
commit 0f5dadbf6f
2 changed files with 42 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ThemeSwitcher.astro
View File

@@ -6,11 +6,13 @@
<select id="theme-select"> <select id="theme-select">
<option value="">Light</option> <option value="">Light</option>
<option value="cool">Cool</option> <option value="cool">Cool</option>
<option value="warm">Warm Terracotta</option>
<option value="midnight-garden">Midnight Garden</option> <option value="midnight-garden">Midnight Garden</option>
<option value="stormfront">Stormfront</option> <option value="stormfront">Stormfront</option>
<option value="copper-slate">Copper &amp; Slate</option> <option value="copper-slate">Copper &amp; Slate</option>
<option value="northern-lights">Northern Lights</option> <option value="northern-lights">Northern Lights</option>
<option value="obsidian">Obsidian</option>
<option value="mocha">Mocha</option>
<option value="deep-ocean">Deep Ocean</option>
</select> </select>
</div> </div>

39
src/styles/vars.css
View File

@@ -91,3 +91,42 @@
--accent-color-faded: hsl(175deg 25% 42%); --accent-color-faded: hsl(175deg 25% 42%);
--nav-hover: hsl(175deg 20% 100% / 10%); --nav-hover: hsl(175deg 20% 100% / 10%);
} }
/* v10: Obsidian */
[data-theme="obsidian"] {
--bg-color: hsl(0deg 0% 5%);
--content-color: hsl(0deg 0% 88%);
--content-color-faded: hsl(0deg 0% 55%);
--heading-color: hsl(0deg 0% 98%);
--primary-color: hsl(200deg 10% 40%);
--primary-color-faded: hsl(200deg 10% 15%);
--accent-color: hsl(210deg 100% 65%);
--accent-color-faded: hsl(210deg 30% 50%);
--nav-hover: hsl(0deg 0% 100% / 8%);
}
/* v11: Mocha */
[data-theme="mocha"] {
--bg-color: hsl(30deg 12% 12%);
--content-color: hsl(35deg 15% 80%);
--content-color-faded: hsl(35deg 10% 55%);
--heading-color: hsl(40deg 30% 90%);
--primary-color: hsl(25deg 20% 45%);
--primary-color-faded: hsl(25deg 15% 20%);
--accent-color: hsl(15deg 65% 60%);
--accent-color-faded: hsl(15deg 30% 50%);
--nav-hover: hsl(35deg 20% 100% / 8%);
}
/* v12: Deep Ocean */
[data-theme="deep-ocean"] {
--bg-color: hsl(225deg 25% 10%);
--content-color: hsl(220deg 15% 82%);
--content-color-faded: hsl(220deg 10% 60%);
--heading-color: hsl(220deg 25% 95%);
--primary-color: hsl(225deg 40% 50%);
--primary-color-faded: hsl(225deg 30% 18%);
--accent-color: hsl(330deg 75% 65%);
--accent-color-faded: hsl(330deg 35% 55%);
--nav-hover: hsl(220deg 20% 100% / 10%);
}