From c223896a6764b348a26294b7cc13512d694d276f Mon Sep 17 00:00:00 2001
From: Spectralitree <72747870+Spectralitree@users.noreply.github.com>
Date: Thu, 30 Dec 2021 13:02:19 +0100
Subject: [PATCH] fix: fix styling

---
 index.html        |  2 ++
 package.json      |  2 +-
 src/App.svelte    | 14 ++++++++------
 styles/dark.scss  | 26 ++++++++++++--------------
 styles/light.scss | 17 ++++++++---------
 yarn.lock         | 14 +++++++++++++-
 6 files changed, 44 insertions(+), 31 deletions(-)

diff --git a/index.html b/index.html
index 6e78bb48..ddd50aad 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,9 @@
     <link rel="icon" href="./myriad.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>pk-webs | home</title>
+    <link rel="stylesheet" href="/styles/generic.scss" />
     <link rel="stylesheet" href="/styles/dark.scss" />
+    <link rel="stylesheet" href="/styles/light.scss" />
 
     <!-- Start Single Page Apps for GitHub Pages -->
     <script type="text/javascript">
diff --git a/package.json b/package.json
index eff67fd0..4dede5b2 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "@tsconfig/svelte": "^2.0.1",
     "svelte": "^3.44.0",
     "svelte-check": "^2.2.7",
-    "svelte-preprocess": "^4.9.8",
+    "svelte-preprocess": "^4.10.1",
     "svelte-toggle": "^3.1.0",
     "tslib": "^2.3.1",
     "typescript": "^4.4.4",
diff --git a/src/App.svelte b/src/App.svelte
index 64df7ef0..60549103 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -9,8 +9,8 @@
   import Main from "./pages/profiles/Main.svelte";
   
   // theme cdns (I might make some myself too)
-  let light = "/styles/light.scss";
-  let dark = "/styles/dark.scss";
+  let light = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css";
+  let dark = "https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-night.min.css";
 
   let styleSrc = dark;
 
@@ -23,17 +23,19 @@
   // not sure if there's a better way to handle this
   function setStyle(style) {
     switch (style) {
-      case "light": styleSrc = light;
+      case "light": document.getElementById("app").className = "light";
+      styleSrc = light;
       localStorage.setItem("pk-style", "light");
       break;
-      case "dark": styleSrc = dark;
+      case "dark": document.getElementById("app").className = "dark";
+      styleSrc = dark;
       localStorage.setItem("pk-style", "dark");
       break;
-      default: styleSrc = dark;
+      default: document.getElementById("app").className = "dark";
+      styleSrc = dark;
       localStorage.setItem("pk-style", "dark");
     };
   };
-
 </script>
 
 <svelte:head>
diff --git a/styles/dark.scss b/styles/dark.scss
index 770a1bc1..f7ad4a22 100644
--- a/styles/dark.scss
+++ b/styles/dark.scss
@@ -1,15 +1,13 @@
-@use "./generic.scss";
-@import url("https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-night.min.css");
-
-// bootstrap
-.navbar.bg-light {
-    background-color: var(--bs-body-bg) !important;
-}
-
-.footer.bg-light {
-    background-color: var(--bs-dark) !important;
-}
-
-.description a {
-    color: #159bd4 !important;
+.dark > * {
+    .navbar.bg-light {
+        background-color: var(--bs-body-bg) !important;
+    }
+    
+    .footer.bg-light {
+        background-color: var(--bs-dark) !important;
+    }
+    
+    .description a {
+        color: #159bd4 !important;
+    }
 }
\ No newline at end of file
diff --git a/styles/light.scss b/styles/light.scss
index bed9db16..1adad184 100644
--- a/styles/light.scss
+++ b/styles/light.scss
@@ -1,10 +1,9 @@
-@use "./generic.scss";
-@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css");
-
-.footer.bg-light {
-    background-color: var(--bs-light) !important;
-}
-
-.description a {
-    color: var(--bs-primary) !important;
+.light > * {
+    .footer.bg-light {
+        background-color: var(--bs-light) !important;
+    }
+    
+    .description a {
+        color: var(--bs-primary) !important;
+    }
 }
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index fff4c791..24011399 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1004,7 +1004,7 @@ svelte-navigator@^3.1.5:
   dependencies:
     svelte2tsx "^0.1.151"
 
-svelte-preprocess@^4.0.0, svelte-preprocess@^4.9.8:
+svelte-preprocess@^4.0.0:
   version "4.9.8"
   resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.9.8.tgz#fd40afebfb352f469beab289667485ebf0d811da"
   integrity sha512-EQS/oRZzMtYdAprppZxY3HcysKh11w54MgA63ybtL+TAZ4hVqYOnhw41JVJjWN9dhPnNjjLzvbZ2tMhTsla1Og==
@@ -1016,6 +1016,18 @@ svelte-preprocess@^4.0.0, svelte-preprocess@^4.9.8:
     sorcery "^0.10.0"
     strip-indent "^3.0.0"
 
+svelte-preprocess@^4.10.1:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.10.1.tgz#5f435e8aaa82976165bc8f5fa690e2e5ba084760"
+  integrity sha512-NSNloaylf+o9UeyUR2KvpdxrAyMdHl3U7rMnoP06/sG0iwJvlUM4TpMno13RaNqovh4AAoGsx1jeYcIyuGUXMw==
+  dependencies:
+    "@types/pug" "^2.0.4"
+    "@types/sass" "^1.16.0"
+    detect-indent "^6.0.0"
+    magic-string "^0.25.7"
+    sorcery "^0.10.0"
+    strip-indent "^3.0.0"
+
 svelte-tiny-virtual-list@^1.1.7:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/svelte-tiny-virtual-list/-/svelte-tiny-virtual-list-1.1.7.tgz#7ba8ee1fc23372512de2aba50d9674972a35c6f7"