refactor: darkmode

p208p2002 · p208p2002 · commit 1dadf353e46e · 2024-04-04T16:15:49.000+08:00
diff --git a/public/index.html b/public/index.html
@@ -3,16 +3,35 @@
 
 <head>
   <script>
+  </script>
+  <script>
+    // load for dev
     if ('%NODE_ENV%' === 'development') {
       function loadCss(filename) {
         var cssNode = document.createElement("script");
         cssNode.setAttribute("src", filename);
         document.getElementsByTagName("head")[0].appendChild(cssNode);
       }
       loadCss("https://cdn.tailwindcss.com/3.3.0")
-    } 
+    }
+
+    // dynamic load a default theme
+    var head = document.head;
+    var link = document.createElement("link");
+
+    link.type = "text/css";
+    link.rel = "stylesheet";
+    
+    if (localStorage.getItem("darkmode").toLowerCase() === "true") {
+      link.href = '/theme-dark.css';
+    }
+    else {
+      link.href = '/theme.css';
+    }
+
+    head.appendChild(link);  
   </script>
-  
+
   <!-- Google tag (gtag.js) -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-NTJ9NFK1RC"></script>
   <script>
@@ -25,7 +44,8 @@
   <!-- <script src="https://cdn.tailwindcss.com/3.2.6"></script> -->
 
   <!-- katex -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css" integrity="sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css"
+    integrity="sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww" crossorigin="anonymous">
 
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
   <link rel="preconnect" href="https://fonts.gstatic.com">
@@ -55,6 +75,8 @@
 </head>
 
 <body>
+
+
   <noscript>
     You need to enable JavaScript to run this app.<br />
     您需要啟用JavaScript來瀏覽這個部落格。
@@ -71,13 +93,4 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
 </body>
-
-<!-- <script src="https://utteranc.es/client.js"
-        repo="p208p2002/blog"
-        issue-term="pathname"
-        theme="github-light"
-        crossorigin="anonymous"
-        async>
-</script> -->
-
 </html>
diff --git a/public/theme-dark.css b/public/theme-dark.css
@@ -0,0 +1,21 @@
+:root {
+    --main-1:#6b84b5;
+    --main-2:#6b84b5;
+    --main-3:#6b84b5;
+    --support-1:#40464c;
+    --support-2:#40464c;
+    --support-3:#40464c;
+    --text-1:#c0c0c0;
+    --text-2:#c0c0c0;
+    --text-3:#c0c0c0;
+    --main-bg-1:#343a40;
+}  
+
+.theme-dark img {
+    filter: invert(85%);
+}
+
+/* do not apply img filter to comments block */
+#comments img {
+    filter: invert(0%);
+}
diff --git a/public/theme.css b/public/theme.css
@@ -0,0 +1,12 @@
+:root {
+    --main-1:#2A4F96;
+    --main-2:#3563BD;
+    --main-3:#698ed5;
+    --support-1:#a6a6a6;
+    --support-2:#e3e3e3;
+    --support-3:#f0f0f0;
+    --text-1:#464646;
+    --text-2:#878787;
+    --text-3:#f4f4f4;
+    --main-bg-1:#ffffff;
+}
diff --git a/src/dark-mode.css b/src/dark-mode.css
diff --git a/src/index.css b/src/index.css
@@ -1,5 +1,3 @@
-@import './dark-mode.css';
-
 html, body, #root {
   margin: 0;
   -webkit-font-smoothing: antialiased;
diff --git a/src/index.js b/src/index.js
@@ -11,7 +11,6 @@ import { BLOG_NAME } from './configs/general'
 import MdRender from './modules/MdRender';
 import { Helmet } from 'react-helmet'
 import { AppState } from './AppState'
-import './theme.css'
 
 export const AppStateContext = React.createContext();
 
diff --git a/src/modules/CornerMenu/index.jsx b/src/modules/CornerMenu/index.jsx
@@ -6,20 +6,39 @@ import { MdOutlineLightMode, MdOutlineDarkMode } from 'react-icons/md'
 // eslint-disable-next-line
 import { HOME_PAGE, GITHUB } from '../../configs/general'
 import Darkmode from 'drkmd-js'
-import { useEffect,useState } from 'react'
+import { useEffect, useState } from 'react'
 
 
 
 function Index() {
     let dm = new Darkmode()
-    
+
+    // eslint-disable-next-line
+    const [theme, setTheme] = useState(dm.currentTheme())
+
     useEffect(() => {
         dm.attach()
-    // eslint-disable-next-line
+        // eslint-disable-next-line
     }, [])
 
-    // eslint-disable-next-line
-    const [theme,setTheme] = useState(dm.currentTheme())
+    useEffect(() => {
+        var head = document.head;
+        var link = document.createElement("link");
+
+        link.type = "text/css";
+        link.rel = "stylesheet";
+
+        if(theme === "dark"){
+            link.href = '/theme-dark.css';    
+        }
+        else{
+            link.href = '/theme.css';
+        }
+
+        head.appendChild(link);
+        return () => { head.removeChild(link); }
+
+    }, [theme])
 
     return (
         <div id="Corner-Menu">
diff --git a/src/modules/MdRender/index.css b/src/modules/MdRender/index.css
@@ -1,3 +1,6 @@
+.post-title{
+    color: var(--text-1);
+}
 .document-info{
     margin-top: 10px;
     margin-bottom: 25px;
diff --git a/src/modules/MdRender/index.jsx b/src/modules/MdRender/index.jsx
@@ -201,7 +201,7 @@ export default function MdRender({ doc_id }) {
 
             </Helmet>
             <br />
-            <h1 className="text-3xl font-bold mb-3">{postTitle}</h1>
+            <h1 className="post-title text-3xl font-bold mb-3">{postTitle}</h1>
             <div className="document-info">
                 <div className="post-date text-zinc-500">
                     日期:&nbsp;{date}
diff --git a/src/modules/Search/index.css b/src/modules/Search/index.css
@@ -1,6 +1,7 @@
 #Search-Bar {
     margin-top: 16px;
     margin-bottom: 32px;
+    background-color: var(--main-bg-1);
 }
 
 #Search-Bar input[type=text] {
@@ -10,6 +11,7 @@
     height: 24px;
     padding-left: 5px;
     margin-right: 5px;
+    background-color: var(--main-bg-1);
 }
 
 #Search-Bar input[type=text]:focus{
@@ -20,4 +22,5 @@
     height: 28px;
     border-style: solid;
     border-width: 0px 0px 0px 0px;
-}
+    color: var(--text-1);
+}
diff --git a/src/tailwindcss.css b/src/tailwindcss.css
@@ -696,11 +696,6 @@ video {
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
-.text-slate-700 {
-  --tw-text-opacity: 1;
-  color: rgb(51 65 85 / var(--tw-text-opacity));
-}
-
 .text-zinc-500 {
   --tw-text-opacity: 1;
   color: rgb(113 113 122 / var(--tw-text-opacity));
diff --git a/src/theme.css b/src/theme.css

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-@import './dark-mode.css';`
`2`		`-`
`3`	`1`	`html, body, #root {`
`4`	`2`	`margin: 0;`
`5`	`3`	`-webkit-font-smoothing: antialiased;`