From 584ec7e2159936c91ba5c0b225025513be0fdb6b Mon Sep 17 00:00:00 2001 From: MotorTruck1221 Date: Wed, 26 Mar 2025 00:24:45 -0600 Subject: [PATCH] Themes: cleanup slightly --- src/layouts/Layout.astro | 1 - src/styles/global.css | 8 +++++ src/styles/themes/bluelight.css | 38 ++++++++++---------- src/styles/themes/cyberpunk.css | 38 ++++++++++---------- src/styles/themes/{index.css => default.css} | 4 --- src/utils/settings.ts | 2 +- 6 files changed, 47 insertions(+), 44 deletions(-) rename src/styles/themes/{index.css => default.css} (87%) diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 7d80c70..9bbfa77 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,5 +1,4 @@ --- -import "@styles/themes/index.css"; import "@styles/global.css"; import { ClientRouter } from "astro:transitions"; import Loader from "@components/Loader.astro"; diff --git a/src/styles/global.css b/src/styles/global.css index 6c81260..99e6ca0 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,4 +1,12 @@ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); + +/* Themes belong here */ +@import "./themes/default.css"; /* DO NOT MOVE THIS FROM HERE OTHERWISE, THEMES WILL FAIL TO WORK */ +@import "./themes/bluelight.css"; +@import "./themes/cyberpunk.css"; +@import "./themes/midnight.css"; +/* End theme imports */ + @import "tailwindcss"; @theme { diff --git a/src/styles/themes/bluelight.css b/src/styles/themes/bluelight.css index f755475..21277b8 100644 --- a/src/styles/themes/bluelight.css +++ b/src/styles/themes/bluelight.css @@ -1,21 +1,21 @@ .bluelight { - --background: hsl(230 8% 85%) !important; - --foreground: hsl(229 26% 28%) !important; - --muted: hsl(230 12% 81%) !important; - --muted-foreground: hsl(230 12% 21%) !important; - --popover: hsl(230 8% 82%) !important; - --popover-foreground: hsl(229 26% 18%) !important; - --card: hsl(230 8% 83%) !important; - --card-foreground: hsl(229 26% 23%) !important; - --border: hsl(0 0% 80%) !important; - --input: hsl(0 0% 77%) !important; - --primary: hsl(223 42% 57%) !important; - --primary-foreground: hsl(0 0% 100%) !important; - --secondary: hsl(223 30% 75%) !important; - --secondary-foreground: hsl(223 30% 15%) !important; - --accent: hsl(230 8% 70%) !important; - --accent-foreground: hsl(230 8% 10%) !important; - --destructive: hsl(2 82% 30%) !important; - --destructive-foreground: hsl(2 82% 90%) !important; - --ring: hsl(223 42% 57%) !important; + --background: hsl(230 8% 85%); + --foreground: hsl(229 26% 28%); + --muted: hsl(230 12% 81%); + --muted-foreground: hsl(230 12% 21%); + --popover: hsl(230 8% 82%); + --popover-foreground: hsl(229 26% 18%); + --card: hsl(230 8% 83%); + --card-foreground: hsl(229 26% 23%); + --border: hsl(0 0% 80%); + --input: hsl(0 0% 77%); + --primary: hsl(223 42% 57%); + --primary-foreground: hsl(0 0% 100%); + --secondary: hsl(223 30% 75%); + --secondary-foreground: hsl(223 30% 15%); + --accent: hsl(230 8% 70%); + --accent-foreground: hsl(230 8% 10%); + --destructive: hsl(2 82% 30%); + --destructive-foreground: hsl(2 82% 90%); + --ring: hsl(223 42% 57%); } diff --git a/src/styles/themes/cyberpunk.css b/src/styles/themes/cyberpunk.css index 9903b0e..3551371 100644 --- a/src/styles/themes/cyberpunk.css +++ b/src/styles/themes/cyberpunk.css @@ -1,21 +1,21 @@ .cyberpunk { - --background: hsl(253 41% 19%) !important; - --foreground: hsl(157 100% 50%) !important; - --muted: hsl(253 12% 23%) !important; - --muted-foreground: hsl(253 12% 73%) !important; - --popover: hsl(253 41% 16%) !important; - --popover-foreground: hsl(157 100% 60%) !important; - --card: hsl(253 41% 17%) !important; - --card-foreground: hsl(157 100% 55%) !important; - --border: hsl(253 31% 24%) !important; - --input: hsl(253 31% 27%) !important; - --primary: hsl(167 100% 50%) !important; - --primary-foreground: hsl(167 100% 10%) !important; - --secondary: hsl(167 30% 25%) !important; - --secondary-foreground: hsl(167 30% 85%) !important; - --accent: hsl(253 41% 34%) !important; - --accent-foreground: hsl(254 41% 94%) !important; - --destructive: hsl(5 92% 45%) !important; - --destructive-foreground: hsl(0 0% 100%) !important; - --ring: hsl(167 100% 50%) !important; + --background: hsl(253 41% 19%); + --foreground: hsl(157 100% 50%); + --muted: hsl(253 12% 23%); + --muted-foreground: hsl(253 12% 73%); + --popover: hsl(253 41% 16%); + --popover-foreground: hsl(157 100% 60%); + --card: hsl(253 41% 17%); + --card-foreground: hsl(157 100% 55%); + --border: hsl(253 31% 24%); + --input: hsl(253 31% 27%); + --primary: hsl(167 100% 50%); + --primary-foreground: hsl(167 100% 10%); + --secondary: hsl(167 30% 25%); + --secondary-foreground: hsl(167 30% 85%); + --accent: hsl(253 41% 34%); + --accent-foreground: hsl(254 41% 94%); + --destructive: hsl(5 92% 45%); + --destructive-foreground: hsl(0 0% 100%); + --ring: hsl(167 100% 50%); } diff --git a/src/styles/themes/index.css b/src/styles/themes/default.css similarity index 87% rename from src/styles/themes/index.css rename to src/styles/themes/default.css index fd9e731..99029d1 100644 --- a/src/styles/themes/index.css +++ b/src/styles/themes/default.css @@ -1,6 +1,3 @@ -@import "./bluelight.css"; -@import "./cyberpunk.css"; -@import "./midnight.css"; :root { --background: hsl(214 27.37% 7.55%); --foreground: hsl(212 16% 82%); @@ -22,5 +19,4 @@ --destructive-foreground: hsl(0 0% 100%); --ring: hsl(215.09 100% 98.03%); --radius: hsl(0.4rem); - --font-family: Inter; } diff --git a/src/utils/settings.ts b/src/utils/settings.ts index fb112c1..2269422 100644 --- a/src/utils/settings.ts +++ b/src/utils/settings.ts @@ -67,7 +67,7 @@ class Settings { theme(theme?: string) { this.#storageManager.setVal('theme', theme || this.#storageManager.getVal('theme')); theme === 'default' - ? document.documentElement.className = '' + ? document.documentElement.className = 'default' : document.documentElement.className = theme || this.#storageManager.getVal('theme'); }