From 762bdc4aae407afe1c00ae1e9b438e0e5807f1cd Mon Sep 17 00:00:00 2001
From: 135e2 <135e2@135e2.tk>
Date: Sun, 29 May 2022 17:18:06 +0800
Subject: 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
---
 layout/_partial/head.ejs    | 4 ++--
 layout/_partial/header.ejs  | 3 +++
 layout/_partial/scripts.ejs | 3 ++-
 layout/post.ejs             | 4 ++--
 4 files changed, 9 insertions(+), 5 deletions(-)

(limited to 'layout')

diff --git a/layout/_partial/head.ejs b/layout/_partial/head.ejs
index 135d822..ed4f8d7 100644
--- a/layout/_partial/head.ejs
+++ b/layout/_partial/head.ejs
@@ -33,6 +33,6 @@
 
     <!-- Scripts and styles -->
     <%- css('css/style.min.css') %>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma/css/bulma.min.css">
-    <link media="(prefers-color-scheme: dark)" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jloh/bulma-prefers-dark/css/bulma-prefers-dark.min.css">
+    <link rel="stylesheet" id="bulma-light" href="https://cdn.jsdelivr.net/npm/bulma/css/bulma.min.css">
+    <link rel="stylesheet" id="bulma-dark" href="https://cdn.jsdelivr.net/npm/bulmaswatch@0.8.1/darkly/bulmaswatch.min.css">
 </head>
\ No newline at end of file
diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs
index b32edbb..6c423a0 100644
--- a/layout/_partial/header.ejs
+++ b/layout/_partial/header.ejs
@@ -18,6 +18,9 @@
                 </div>
                 <div class="navbar-menu" id="header-menu">
                     <div class="navbar-end">
+                        <a class="navbar-item" href="javaScript:void(0);" id="btn-toggle-dark">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+                        </a>
                         <% for (let item of theme.menubar) { %>
                             <a class="navbar-item is-uppercase" href="<%= item[0] %>">
                                 <%= item[1] %>
diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs
index 2efb659..98d39e0 100644
--- a/layout/_partial/scripts.ejs
+++ b/layout/_partial/scripts.ejs
@@ -24,13 +24,14 @@
     <script>
         window.addEventListener("load", () => {
             const theme_selector = (mode) => {
-                if (mode === SystemDarkmodePrefrence.dark) {
+                if (mode === SystemDarkmodePreference.dark) {
                     document.getElementById("highlight-light-theme").setAttribute("disabled", "disabled");
                     document.getElementById("highlight-dark-theme").removeAttribute("disabled");
                 } else {
                     document.getElementById("highlight-dark-theme").setAttribute("disabled", "disabled");
                     document.getElementById("highlight-light-theme").removeAttribute("disabled");
                 }
+                console.debug(`highlightjs theme set to ${mode}`);
             };
             darklistener.add(theme_selector);
         }, false);
diff --git a/layout/post.ejs b/layout/post.ejs
index 9befb97..3428ddf 100644
--- a/layout/post.ejs
+++ b/layout/post.ejs
@@ -63,7 +63,7 @@
 
                             const player = new Shikwasa({
                                 container: () => document.querySelector('.post-podcast-player'),
-                                audio: {        
+                                audio: {
                                     title: "<%= page.title %>",
                                     artist: "<%= page.podcast.authors %>",
                                     cover: "<%= page.podcast.cover %>",
@@ -82,7 +82,7 @@
                             window.player = player;
                         }, false);
                     </script>
-                <% } %>
+                    <% } %>
                 <section class="content is-size-6">
                     <%- page.content %>
                 </section>
-- 
cgit v1.2.3