From d9c4d973b3128af3219829aa06dea295a23016a3 Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Sun, 24 Jan 2021 20:04:04 +0800
Subject: [PATCH] perf: optimize dark and light mode toggle

---
 source/css/common/codeblock/code-theme.styl | 5 +++++
 source/css/common/variables.styl            | 5 +++++
 source/js/dark-light-toggle.js              | 2 ++
 3 files changed, 12 insertions(+)

diff --git a/source/css/common/codeblock/code-theme.styl b/source/css/common/codeblock/code-theme.styl
index 717b6a5..dc02ffc 100644
--- a/source/css/common/codeblock/code-theme.styl
+++ b/source/css/common/codeblock/code-theme.styl
@@ -56,6 +56,11 @@ code-theme(mode) {
   code-theme('light');
 }
 
+@media (prefers-color-scheme: light) {
+  :root {
+    code-theme('light');
+  }
+}
 
 @media (prefers-color-scheme: dark) {
   :root {
diff --git a/source/css/common/variables.styl b/source/css/common/variables.styl
index 603bde8..edaf408 100644
--- a/source/css/common/variables.styl
+++ b/source/css/common/variables.styl
@@ -140,6 +140,11 @@ root-color(mode) {
   root-color('light');
 }
 
+@media (prefers-color-scheme: light) {
+  :root {
+    root-color('light');
+  }
+}
 
 @media (prefers-color-scheme: dark) {
   :root {
diff --git a/source/js/dark-light-toggle.js b/source/js/dark-light-toggle.js
index f178ccf..0cb5f5b 100644
--- a/source/js/dark-light-toggle.js
+++ b/source/js/dark-light-toggle.js
@@ -9,6 +9,7 @@ KEEP.initModeToggle = () => {
 
     enableLightMode() {
       document.body.classList.remove('dark-mode');
+      document.body.classList.add('light-mode');
       this.iconDom.className = 'fas fa-moon';
       KEEP.styleStatus.isDark = false;
       KEEP.setStyleStatus();
@@ -16,6 +17,7 @@ KEEP.initModeToggle = () => {
 
     enableDarkMode() {
       document.body.classList.add('dark-mode');
+      document.body.classList.remove('light-mode');
       this.iconDom.className = 'fas fa-sun';
       KEEP.styleStatus.isDark = true;
       KEEP.setStyleStatus();