switched to variable based colors

themes/NSP/layouts/partials/head.html

@@ -4,8 +4,6 @@
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
 <script type="text/javascript" src="/navbar.js"></script>
 <link rel="stylesheet" href="/catppuccin.css">
-<link rel="stylesheet" href="/light_mode.css">
+<link rel="stylesheet" href="/variables.css">
-<link rel="stylesheet" href="/sunset_mode.css">
-<link rel="stylesheet" href="/dark_mode.css">
 {{ partialCached "head/css.html" . }}
 {{ partialCached "head/js.html" . }}

themes/NSP/static/catppuccin.css

@@ -313,3 +313,71 @@
 	--ctp-mocha-crust-rgb: rgb(17, 17, 27);
 	--ctp-mocha-crust-hsl: hsl(240, 23%, 9%);
 }
+
+
+code {
+    background-color: transparent;
+}
+code > span {
+    background-color: transparent;
+}
+code > span > span {
+    background-color: transparent;
+}
+code > span > span > span {
+    background-color: transparent;
+}
+pre.darkmode {
+    background: var(--bg);
+    border: 1px solid #ddd;
+    color: var(--code-default);
+    page-break-inside: avoid;
+    font-family: monospace;
+    font-size: 15px;
+    line-height: 1.6;
+    margin-bottom: 1.6em;
+    max-width: 100%;
+    overflow: auto;
+    padding: 1em 1.5em;
+    display: block;
+    word-wrap: break-word;
+}
+
+
+main {
+    color: var(--text-color);
+    background-color: var(--bg);
+}
+
+a {
+    color: var(--a);
+}
+
+p {
+    color: var(--text-color);
+}
+h1, h2, h3, h4, h5, h6 {
+    color: var(--header-color);
+}
+
+.nav-list {
+    background-color: var(--navbar-bg);
+}
+.nav-list a {
+    color: var(--navbar-a);
+}
+.nav-list a:hover {
+    color: var(--navbar-a-hover);
+}
+.nav-dropdown {
+    color: var(--navbar-a);
+}
+.nav-dropdown:hover {
+    color: var(--navbar-a-hover);
+}
+.nav-dropdown-content {
+    background-color: var(--navbar-bg);
+}
+.nav-dropdown-content a {
+    color: var(--navbar-a);
+}

themes/NSP/static/dark_mode.css

@@ -1,68 +0,0 @@
-
- p.darkmode {
-    color: var(--ctp-mocha-text);
-}
-
-main.darkmode {
-    background-color: var(--ctp-mocha-base);
-    color: var(--ctp-mocha-text);
- }
-
-.darkmode {
-    background-color: var(--ctp-mocha-base);
-}
-
-.darkmode a {
-    color: var(--ctp-mocha-peach);
-}
-
-code.darkmode {
-    background-color: transparent;
-}
-code.darkmode > span {
-    background-color: transparent;
-}
-code.darkmode > span > span {
-    background-color: transparent;
-}
-code.darkmode > span > span > span {
-    background-color: transparent;
-}
-pre.darkmode {
-    background: var(--ctp-mocha-crust);
-    border: 1px solid #ddd;
-    color: var(--ctp-mocha-sky);
-    page-break-inside: avoid;
-    font-family: monospace;
-    font-size: 15px;
-    line-height: 1.6;
-    margin-bottom: 1.6em;
-    max-width: 100%;
-    overflow: auto;
-    padding: 1em 1.5em;
-    display: block;
-    word-wrap: break-word;
-}
-
-h1.darkmode, h2.darkmode, h3.darkmode, h4.darkmode, h5.darkmode, h6.darkmode {
-    color: var(--ctp-mocha-sapphire);
-}
-
-.nav-list.darkmode a {
-    color: var(--ctp-mocha-crust);
-}
-.nav-list.darkmode a:hover {
-    color: var(--ctp-mocha-text);
-}
-.nav-list.darkmode {
-    background-color: var(--ctp-mocha-mauve);
-}
-.nav-dropdown.darkmode {
-    color: var(--ctp-mocha-crust);
-}
-.nav-dropdown.darkmode:hover {
-    color: var(--ctp-mocha-text);
-}
-.nav-dropdown-content.darkmode {
-    background-color: var(--ctp-mocha-mauve);
-}

themes/NSP/static/light_mode.css

@@ -1,60 +0,0 @@
-
-
-.lightmode p {
-    color: var(--ctp-latte-text);
-}
-
-.lightmode {
-    background-color: var(--ctp-latte-base);
-}
-
-.lightmode a {
-    color: var(--ctp-latte-peach);
-}
-
-code.lightmode {
-    background-color: transparent;
-}
-code.lightmode > span {
-    background-color: transparent;
-}
-code.lightmode > span > span {
-    background-color: transparent;
-}
-code.lightmode > span > span > span {
-    background-color: transparent;
-}
-pre.lightmode {
-    background: var(--ctp-latte-crust);
-    border: 1px solid #ddd;
-    color: var(--ctp-latte-sky);
-    page-break-inside: avoid;
-    font-family: monospace;
-    font-size: 15px;
-    line-height: 1.6;
-    margin-bottom: 1.6em;
-    max-width: 100%;
-    overflow: auto;
-    padding: 1em 1.5em;
-    display: block;
-    word-wrap: break-word;
-}
-
-h1.lightmode, h2.lightmode, h3.lightmode, h4.lightmode, h5.lightmode, h6.lightmode {
-    color: var(--ctp-latte-sapphire);
-}
-.nav-list.lightmode a {
-    color: var(--ctp-latte-crust);
-}
-.nav-list.lightmode {
-    background-color: var(--ctp-latte-mauve);
-}
-.nav-dropdown.lightmode {
-    color: var(--ctp-latte-crust);
-}
-.nav-dropdown-content.lightmode {
-    background-color: var(--ctp-latte-mauve);
-}
-.nav-dropdown-content.lightmode a {
-    color: var(--ctp-latte-crust);
-}

themes/NSP/static/sunset_mode.css

@@ -1,66 +0,0 @@
-
-p.sunsetmode {
-    color: var(--ctp-frappe-text);
-}
-
-main.sunsetmode {
-    color: var(--ctp-frappe-text);
-}
-
-.sunsetmode {
-    background-color: var(--ctp-frappe-base);
-}
-
-.sunsetmode a {
-    color: var(--ctp-frappe-peach);
-}
-
-code.sunsetmode {
-    background-color: transparent;
-}
-code.sunsetmode > span {
-    background-color: transparent;
-}
-code.sunsetmode > span > span {
-    background-color: transparent;
-}
-code.sunsetmode > span > span > span {
-    background-color: transparent;
-}
-pre.sunsetmode {
-    background: var(--ctp-frappe-crust);
-    border: 1px solid #ddd;
-    color: var(--ctp-frappe-sky);
-    page-break-inside: avoid;
-    font-family: monospace;
-    font-size: 15px;
-    line-height: 1.6;
-    margin-bottom: 1.6em;
-    max-width: 100%;
-    overflow: auto;
-    padding: 1em 1.5em;
-    display: block;
-    word-wrap: break-word;
-}
-
-h1.sunsetmode, h2.sunsetmode, h3.sunsetmode, h4.sunsetmode, h5.sunsetmode, h6.sunsetmode {
-    color: var(--ctp-frappe-sapphire);
-}
-.nav-list.sunsetmode a {
-    color: var(--ctp-frappe-crust);
-}
-.nav-list.sunsetmode a:hover {
-    color: var(--ctp-frappe-text);
-}
-.nav-list.sunsetmode {
-    background-color: var(--ctp-frappe-mauve);
-}
-.nav-dropdown.sunsetmode {
-    color: var(--ctp-frappe-crust);
-}
-.nav-dropdown.sunsetmode:hover {
-    color: var(--ctp-frappe-text);
-}
-.nav-dropdown-content.sunsetmode {
-    background-color: var(--ctp-frappe-mauve);
-}

themes/NSP/static/variables.css

@@ -0,0 +1,38 @@
+body.darkmode {
+    --bg: var(--ctp-mocha-base);
+    --a: var(--ctp-mocha-peach);
+    --text-color: var(--ctp-mocha-text);
+    --code-default: var(--ctp-mocha-sky);
+    --header-color: var(--ctp-mocha-sapphire);
+    --navbar-bg: var(--ctp-mocha-mauve);
+    --navbar-a: var(--ctp-mocha-crust);
+    --navbar-a-hover: var(--ctp-mocha-text);
+
+    background-color: var(--bg);
+}
+
+body.lightmode {
+    --bg: var(--ctp-latte-base);
+    --a: var(--ctp-latte-peach);
+    --text-color: var(--ctp-latte-text);
+    --code-default: var(--ctp-latte-sky);
+    --header-color: var(--ctp-latte-sapphire);
+    --navbar-bg: var(--ctp-latte-mauve);
+    --navbar-a: var(--ctp-latte-crust);
+    --navbar-a-hover: var(--ctp-latte-crust);
+
+    background-color: var(--bg);
+}
+
+body.sunsetmode {
+    --bg: var(--ctp-frappe-base);
+    --a: var(--ctp-frappe-peach);
+    --text-color: var(--ctp-frappe-text);
+    --code-default: var(--ctp-frappe-sky);
+    --header-color: var(--ctp-frappe-sapphire);
+    --navbar-bg: var(--ctp-frappe-mauve);
+    --navbar-a: var(--ctp-frappe-crust);
+    --navbar-a-hover: var(--ctp-frappe-text);
+
+    background-color: var(--bg);
+}