Deploy Logseq SPA @ 22e453dafccadf041315ca045774eedbd0f839ec jjohare/logseq@22e453d

Author: jjohare

notes/dark-theme.css

@@ -1,26 +1,51 @@
-/* Force dark theme for published SPA */
-html, html[data-theme="light"] {
-  --ls-primary-background-color: #002b36;
-  --ls-secondary-background-color: #073642;
-  --ls-tertiary-background-color: #0a3d4a;
-  --ls-quaternary-background-color: #073642;
-  --ls-primary-text-color: #93a1a1;
-  --ls-secondary-text-color: #839496;
-  --ls-title-text-color: #eee8d5;
-  --ls-link-text-color: #268bd2;
-  --ls-link-ref-text-color: #2aa198;
-  --ls-link-ref-text-hover-color: #93a1a1;
-  --ls-alink-color: #268bd2;
-  --ls-block-highlight-color: rgba(7, 54, 66, 0.8);
-  --ls-page-properties-background-color: #073642;
-  --ls-page-inline-code-bg-color: #073642;
-  --ls-page-inline-code-color: #b58900;
-  --ls-page-blockquote-bg-color: #073642;
-  --ls-page-blockquote-border-color: #586e75;
-  --ls-border-color: #586e75;
-  --ls-scrollbar-foreground-color: #586e75;
-  --ls-scrollbar-background-color: #002b36;
-  --ls-head-text-color: #fdf6e3;
+/* Gunmetal / Solarized Dark theme for published SPA.
+   Must match or exceed Logseq's built-in selector specificity
+   (html[data-theme=dark][data-color=logseq]) so our values win. */
+html[data-theme="dark"][data-color="logseq"],
+html[data-theme="dark"],
+html[data-theme="light"],
+html {
+  --ls-primary-background-color: #002b36 !important;
+  --ls-secondary-background-color: #073642 !important;
+  --ls-tertiary-background-color: #0a3d4a !important;
+  --ls-quaternary-background-color: #073642 !important;
+  --ls-primary-text-color: #93a1a1 !important;
+  --ls-secondary-text-color: #839496 !important;
+  --ls-title-text-color: #eee8d5 !important;
+  --ls-link-text-color: #268bd2 !important;
+  --ls-link-ref-text-color: #2aa198 !important;
+  --ls-link-ref-text-hover-color: #93a1a1 !important;
+  --ls-link-text-hover-color: #93a1a1 !important;
+  --ls-alink-color: #268bd2 !important;
+  --ls-block-highlight-color: rgba(7, 54, 66, 0.8) !important;
+  --ls-page-properties-background-color: #073642 !important;
+  --ls-page-inline-code-bg-color: #073642 !important;
+  --ls-page-inline-code-color: #b58900 !important;
+  --ls-page-blockquote-bg-color: #073642 !important;
+  --ls-page-blockquote-border-color: #586e75 !important;
+  --ls-page-blockquote-color: #93a1a1 !important;
+  --ls-border-color: #586e75 !important;
+  --ls-secondary-border-color: #586e75 !important;
+  --ls-scrollbar-foreground-color: #586e75 !important;
+  --ls-scrollbar-background-color: #002b36 !important;
+  --ls-head-text-color: #fdf6e3 !important;
+  --ls-active-primary-color: #2aa198 !important;
+  --ls-active-secondary-color: #93a1a1 !important;
+  --ls-block-properties-background-color: #073642 !important;
+  --ls-block-ref-link-text-color: #2aa198 !important;
+  --ls-guideline-color: #586e75 !important;
+  --ls-menu-hover-color: #073642 !important;
+  --ls-tag-text-color: #2aa198 !important;
+  --ls-tag-text-hover-color: #93a1a1 !important;
+  --ls-slide-background-color: #002b36 !important;
+  --ls-block-bullet-border-color: #586e75 !important;
+  --ls-block-bullet-color: #657b83 !important;
+  --ls-selection-background-color: #073642 !important;
+  --ls-selection-text-color: #eee8d5 !important;
+  --ls-page-checkbox-color: #2aa198 !important;
+  --ls-page-mark-bg-color: #b58900 !important;
+  --ls-page-mark-color: #002b36 !important;
+  --ls-table-tr-even-background-color: #073642 !important;
   --color-level-1: #002b36;
   --color-level-2: #073642;
   --color-level-3: #0a3d4a;
@@ -30,7 +55,12 @@ body { background-color: #002b36 !important; color: #93a1a1 !important; }
 .left-sidebar-inner { background-color: #002b36 !important; }
 .cp__header { background-color: #002b36 !important; }
 #main-content-container { background-color: #002b36 !important; }
-.dark-theme, .white-theme { --ls-primary-background-color: #002b36; }
+/* Catch-all for any theme class Logseq applies */
+.dark-theme, .white-theme, .light-theme {
+  --ls-primary-background-color: #002b36 !important;
+  --ls-secondary-background-color: #073642 !important;
+  --ls-primary-text-color: #93a1a1 !important;
+}
 
 /* Hide mermaid source code blocks after kroki renders them */
 .kroki-diagram + .extensions__code,

notes/dark-theme.js

@@ -1,8 +1,10 @@
 (function() {
   try {
-    localStorage.setItem('ls-theme-mode', '"dark"');
     document.documentElement.setAttribute('data-theme', 'dark');
+    document.documentElement.setAttribute('data-color', 'logseq');
     document.documentElement.classList.add('dark-theme');
-    document.documentElement.classList.remove('white-theme');
+    document.documentElement.classList.remove('white-theme', 'light-theme');
+    localStorage.setItem('ls-theme-mode', '"dark"');
+    localStorage.setItem('ls-theme-color', '"logseq"');
   } catch(e) {}
 })();