diff --git a/src/components/ThemeSwitcher.astro b/src/components/ThemeSwitcher.astro index 310603e..42bfba1 100644 --- a/src/components/ThemeSwitcher.astro +++ b/src/components/ThemeSwitcher.astro @@ -6,11 +6,13 @@ diff --git a/src/styles/vars.css b/src/styles/vars.css index 63e0933..f8dff4b 100644 --- a/src/styles/vars.css +++ b/src/styles/vars.css @@ -91,3 +91,42 @@ --accent-color-faded: hsl(175deg 25% 42%); --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%); +}