[#481] If user hasn't explicitly set a dark mode pref in Silverbullet, fall back to browser pref

Author: niels

plugs/editor/editor.ts

@@ -35,7 +35,7 @@ export async function openAllNavigator() {
 }
 
 export async function toggleDarkMode() {
-  let darkMode = await clientStore.get("darkMode");
+  let darkMode = await editor.getUiOption("darkMode");
   darkMode = !darkMode;
   await clientStore.set("darkMode", darkMode);
   await editor.reloadUI();

web/components/basic_modals.tsx

@@ -17,7 +17,7 @@ export function Prompt({
   message: string;
   defaultValue?: string;
   vimMode: boolean;
-  darkMode: boolean;
+  darkMode: boolean | undefined;
   completer: (context: CompletionContext) => Promise<CompletionResult | null>;
   callback: (value?: string) => void;
 }) {

web/components/command_palette.tsx

@@ -21,7 +21,7 @@ export function CommandPalette({
   commands: Map<string, AppCommand>;
   recentCommands: Map<string, Date>;
   vimMode: boolean;
-  darkMode: boolean;
+  darkMode: boolean | undefined;
   completer: (context: CompletionContext) => Promise<CompletionResult | null>;
   onTrigger: (command: AppCommand | undefined) => void;
   config: Config;

web/components/filter.tsx

@@ -36,7 +36,7 @@ export function FilterList({
   preFilter?: (options: FilterOption[], phrase: string) => FilterOption[];
   phrasePreprocessor?: (phrase: string) => string;
   vimMode: boolean;
-  darkMode: boolean;
+  darkMode: boolean | undefined;
   completer: (context: CompletionContext) => Promise<CompletionResult | null>;
   allowNew?: boolean;
   completePrefix?: string;

web/components/mini_editor.tsx

@@ -47,7 +47,7 @@ export function MiniEditor(
     text: string;
     placeholderText?: string;
     vimMode: boolean;
-    darkMode: boolean;
+    darkMode: boolean | undefined;
     vimStartInInsertMode?: boolean;
     focus?: boolean;
     completer?: (

web/components/page_navigator.tsx

@@ -29,7 +29,7 @@ export function PageNavigator({
   allPages: PageMeta[];
   extensions: Set<string>;
   vimMode: boolean;
-  darkMode: boolean;
+  darkMode: boolean | undefined;
   mode: "page" | "meta" | "document" | "all";
   onNavigate: (page: string | undefined, type: "document" | "page") => void;
   onModeSwitch: (mode: "page" | "meta" | "document" | "all") => void;

web/components/top_bar.tsx

@@ -40,7 +40,7 @@ export function TopBar({
   syncFailures: number;
   isLoading: boolean;
   notifications: Notification[];
-  darkMode: boolean;
+  darkMode: boolean | undefined;
   vimMode: boolean;
   progressPerc?: number;
   onRename: (newName?: string) => Promise<void>;

web/editor_ui.tsx

@@ -15,6 +15,7 @@ import type { Client } from "./client.ts";
 import { Panel } from "./components/panel.tsx";
 import { safeRun, sleep } from "../lib/async.ts";
 import { parseCommand } from "$common/command.ts";
+import { clientStoreSyscalls } from "./syscalls/clientStore.ts";
 import { defaultActionButtons } from "@silverbulletmd/silverbullet/type/config";
 import type { FilterOption } from "@silverbulletmd/silverbullet/type/client";
 
@@ -97,12 +98,23 @@ export class MainUI {
     }, [viewState.uiOptions.vimMode]);
 
     useEffect(() => {
-      document.documentElement.dataset.theme = viewState.uiOptions.darkMode
-        ? "dark"
-        : "light";
-      if (this.client.isDocumentEditor()) {
-        this.client.documentEditor.updateTheme();
-      }
+      clientStoreSyscalls(client.stateDataStore)["clientStore.get"]({}, "darkMode").then((storedDarkModePreference: boolean | undefined) => {
+        let theme: 'dark' | 'light';
+        if (storedDarkModePreference === true) {
+          theme = "dark";
+        } else if (storedDarkModePreference === false) {
+          theme = "light";
+        } else {
+          theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+        }
+
+        viewState.uiOptions.darkMode = theme === "dark";
+        document.documentElement.dataset.theme = theme
+
+        if (this.client.isDocumentEditor()) {
+          this.client.documentEditor.updateTheme();
+        }
+      });
     }, [viewState.uiOptions.darkMode]);
 
     useEffect(() => {

web/type.ts

@@ -45,7 +45,7 @@ export type AppViewState = {
 
   uiOptions: {
     vimMode: boolean;
-    darkMode: boolean;
+    darkMode: boolean | undefined;
     forcedROMode: boolean;
     customStyles?: string;
   };
@@ -82,7 +82,7 @@ export const initialViewState: AppViewState = {
   syncFailures: 0,
   uiOptions: {
     vimMode: false,
-    darkMode: false,
+    darkMode: undefined,
     forcedROMode: false,
   },
   isMobile: false,