style(next): define the dark mode colors

TriliumNext · Jan 8, 2025 · ffd626d · ffd626d
1 parent 4ce2fb7
commit ffd626d
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 13 deletions.
diff --git a/src/public/stylesheets/theme-next-dark.css b/src/public/stylesheets/theme-next-dark.css
@@ -143,6 +143,16 @@
     --tooltip-background-color: rgba(67, 67, 67, 0.86);
     --tooltip-foreground-color: #ffffffeb;
     --tooltip-shadow-color: rgba(0, 0, 0, 0.4);
+
+    --help-background-color: #00000059;
+    --help-card-background: var(--card-background-color);
+    --help-card-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
+    --help-card-heading-color: #959595;
+    --help-kbd-shortcut-color: white;
+    --help-kbd-shortcut-background: #676767;
+    --help-kbd-shortcut-shadow: 1px 1px 2px rgba(0, 0, 0, .7);
+    --help-code-color: inherit;
+    --help-code-background: #565656;
 }
 
 /*

diff --git a/src/public/stylesheets/theme-next-light.css b/src/public/stylesheets/theme-next-light.css
@@ -142,4 +142,14 @@
     --tooltip-background-color: rgba(255, 255, 255, 0.85);
     --tooltip-foreground-color: #000000ba;
     --tooltip-shadow-color: rgba(0, 0, 0, .15);
+
+    --help-background-color: #fffc;
+    --help-card-background: var(--card-background-color);
+    --help-card-shadow: 2px 2px 2px rgba(0, 0, 0, .10);
+    --help-card-heading-color: #797979;
+    --help-kbd-shortcut-color: #3f3f3f;
+    --help-kbd-shortcut-background: white;
+    --help-kbd-shortcut-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
+    --help-code-color: black;
+    --help-code-background: #d7d5d5;
  }
diff --git a/src/public/stylesheets/theme-next/base.css b/src/public/stylesheets/theme-next/base.css
@@ -55,6 +55,8 @@
     --timeline-bullet-vertical-pos: .75em;
     --timeline-connector-size: 4px;
 
+    --help-backdrop-blur: 10px;
+
     /* Theme capabilities */
     --tab-note-icons: true;
 }
diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css
@@ -1563,19 +1563,6 @@ body .calendar-dropdown-widget .calendar-body a:hover {
 
 /* Help */
 
-.help-dialog {
-    --help-background-color: #fffc;
-    --help-backdrop-blur: 10px;
-    --help-card-background: var(--card-background-color);
-    --help-card-shadow: 2px 2px 2px rgba(0, 0, 0, .10);
-    --help-card-heading-color: #797979;
-    --help-kbd-shortcut-color: #3f3f3f;
-    --help-kbd-shortcut-background: white;
-    --help-kbd-shortcut-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
-    --help-code-color: black;
-    --help-code-background: #d7d5d5;
-}
-
 .help-dialog .modal-content {
     --modal-background-color: var(--help-background-color);
     backdrop-filter: blur(var(--help-backdrop-blur));