From c02c983166effdb5db4578e4ab45f58762f082d4 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
---
source/css/style.css | 44 +++++++++++++++++++++++++++++++++++---------
source/css/style.min.css | 2 +-
2 files changed, 36 insertions(+), 10 deletions(-)
(limited to 'source/css')
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
--
cgit v1.2.3