feat: add #btn-toggle-dark botton to toggle dark mode

- Switch dark theme to bulmaswatch/darkly, since bulma-prefers-dark highly relies on `@media: (prefers-color-scheme: dark)` tag
- Add a playerman handler to toggle shikwasa theme[1]
- Use localstorage to store user's preference[2]
- Fix a typo: SystemDarkmodePrefrence => SystemDarkmodePreference

[1]: Modified from https://github.com/jessuni/shikwasa/blob/main/pages/public/index.js#L208
[2]: Took inspiration from https://blog.skk.moe/post/hello-darkmode-my-old-friend

2 files changed, 36 insertions, 10 deletions

diff --git a/source/css/style.css b/source/css/style.css
index 3a9430f..5a62406 100644
--- a/source/css/style.css
+++ b/source/css/style.css
@@ -8,19 +8,45 @@ pre {
     -webkit-filter: grayscale(1) !important;
 }
 
+:root {
+    --transition-speed: unset;
+    --background-color: white;
+    --brightness: 1;
+    --contrast: 1;
+}
+
 @media(prefers-color-scheme:dark) {
-    * {
-        transition: backgourd-color .5s
-    }
-    .card {
-        box-shadow: none!important;
-        background-color: #121212!important
-    }
-    img:not([src*=".svg"]) {
-        filter: brightness(.7) contrast(1.2);
+    
+    :root:not([data-user-color-scheme]) {
+        --box-shadow: none!important;
+        --transition-speed: 0.5s;
+        --background-color: #121212!important;
+        --brightness: 0.7;
+        --contrast: 1.2;
     }
 }
 
+[data-user-color-scheme='dark'] {
+    --box-shadow: none!important;
+    --transition-speed: 0.5s;
+    --background-color: #121212!important;
+    --brightness: 0.7;
+    --contrast: 1.2;
+}
+
+* {
+    transition: backgourd-color var(--transition-speed);
+}
+
+.card {
+    box-shadow: var(--box-shadow);
+    background-color: var(--background-color);
+}
+
+img:not([src*=".svg"]) {
+    filter: brightness(--brightness) contrast(--contrast);
+}
+
 @media screen and (max-width:1023px) {
     .navbar-menu {
         box-shadow: 0 8px 16px -8px rgb(10 10 10 / 10%)!important
diff --git a/source/css/style.min.css b/source/css/style.min.css
index d8c3a0b..ac94b6b 100644
--- a/source/css/style.min.css
+++ b/source/css/style.min.css
@@ -1 +1 @@
-pre{background-color:none!important;padding:0!important}#mourn{filter:grayscale(1)!important;-webkit-filter:grayscale(1)!important}@media(prefers-color-scheme:dark){*{transition:backgourd-color .5s}.card{box-shadow:none!important;background-color:#121212!important}img:not([src*=".svg"]){filter:brightness(.7) contrast(1.2)}}@media screen and (max-width:1023px){.navbar-menu{box-shadow:0 8px 16px -8px rgb(10 10 10 / 10%)!important}.post-content{padding-top:0!important}.post-card{margin:0!important}}.post-podcast-player{padding-bottom:1.5rem}.post-card{margin:0 1rem 0 1rem}.navbar-brand .navbar-item:hover{background-color:inherit!important}.entry{margin-bottom:1.5rem!important;margin-top:1.5rem!important;transition:box-shadow .1s}.entry:hover{box-shadow:0 1em 2em -.125em rgb(10 10 10 / 10%),0 0 0 1px rgb(10 10 10 / 2%)}.pagination-bar{padding-left:.25rem;padding-right:.25rem}.footer{padding:1rem 1rem 1rem!important;background-color:transparent!important}.subnav-top{border-bottom:1px solid;padding-bottom:1rem;display:inline}.subnav-bottom{margin-top:1.6rem!important}
\ No newline at end of file
+pre{background-color:none!important;padding:0!important}#mourn{filter:grayscale(1)!important;-webkit-filter:grayscale(1)!important}:root{--transition-speed:unset;--background-color:white;--brightness:1;--contrast:1}@media(prefers-color-scheme:dark){:root:not([data-user-color-scheme]){--box-shadow:none!important;--transition-speed:0.5s;--background-color:#121212!important;--brightness:0.7;--contrast:1.2}}[data-user-color-scheme=dark]{--box-shadow:none!important;--transition-speed:0.5s;--background-color:#121212!important;--brightness:0.7;--contrast:1.2}*{transition:backgourd-color var(--transition-speed)}.card{box-shadow:var(--box-shadow);background-color:var(--background-color)}img:not([src*=".svg"]){filter:brightness(--brightness) contrast(--contrast)}@media screen and (max-width:1023px){.navbar-menu{box-shadow:0 8px 16px -8px rgb(10 10 10 / 10%)!important}.post-content{padding-top:0!important}.post-card{margin:0!important}}.post-podcast-player{padding-bottom:1.5rem}.post-card{margin:0 1rem 0 1rem}.navbar-brand .navbar-item:hover{background-color:inherit!important}.entry{margin-bottom:1.5rem!important;margin-top:1.5rem!important;transition:box-shadow .1s}.entry:hover{box-shadow:0 1em 2em -.125em rgb(10 10 10 / 10%),0 0 0 1px rgb(10 10 10 / 2%)}.pagination-bar{padding-left:.25rem;padding-right:.25rem}.footer{padding:1rem 1rem 1rem!important;background-color:transparent!important}.subnav-top{border-bottom:1px solid;padding-bottom:1rem;display:inline}.subnav-bottom{margin-top:1.5rem!important}
\ No newline at end of file