feat: dark mode

liriliri · Sep 23, 2024 · 215cb75 · 215cb75
1 parent 27fadf1
commit 215cb75
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git a/server/tpl/index.hbs b/server/tpl/index.hbs
@@ -20,11 +20,10 @@
       color: #1966d2;
     }
     #container {
-      max-width: 1200px;
+      max-width: 1440px;
       margin: 0 auto;
     }
     .content-header {
-      background: linear-gradient(white, white 40%, rgba(255, 255, 255, 0.92));
       border-bottom: 1px solid #eee;
       font-size: 150%;
       padding: 20px 0 10px 0;
@@ -66,12 +65,19 @@
       flex-shrink: 0;
       vertical-align: top;
     }
-    .buy-me-coffee {
-      margin-top: 50px;
-      border-top: 1px solid #eee;
-    }
-    .buy-me-coffee a {
-      color: red;
+    @media (prefers-color-scheme: dark) {
+      body {
+        background-color: #202124;
+        color: #ddd;
+      }
+      .content-header {
+        border-bottom: 1px solid #555;
+      }
+      .content-header .filter {
+        background-color: #333;
+        border: 1px solid #555;
+        color: #ddd;
+      }
     }
   </style>
 </head>
@@ -86,7 +92,6 @@
       <a target="_blank" href="//{{domain}}{{basePath}}target.js">{{domain}}{{basePath}}target.js</a> <br/>
       Or just open the demo page <a target="_blank" href="//{{domain}}{{basePath}}test/demo.html">{{domain}}{{basePath}}test/demo.html</a> to play around with.<br/>
       <a target="_blank" href="https://github.com/liriliri/chii">Chii v{{version}}</a>
-      <div class="buy-me-coffee"><a href="https://ko-fi.com/surunzi" target="_blank">Buy me a coffee</a> if you found this project useful and want to help keep it alive. Thank you for your support!</div>
     </div>  
     <div class="targets hidden"></div>
   </div>

diff --git a/src/index.ts b/src/index.ts
@@ -3,6 +3,7 @@ import $ from 'licia/$';
 import randomId from 'licia/randomId';
 import toInt from 'licia/toInt';
 import isEmpty from 'licia/isEmpty';
+import isDarkMode from 'licia/isDarkMode';
 import LunaDataGrid from 'luna-data-grid';
 import each from 'licia/each';
 import throttle from 'licia/throttle';
@@ -70,6 +71,7 @@ $filter.on(
 );
 
 const dataGrid = new LunaDataGrid($targets.get(0) as HTMLElement, {
+  theme: isDarkMode() ? 'dark' : 'light',
   columns: [
     {
       id: 'title',