BREAKING CHANGE: unify light mode identifier (#4652)

* chore: unify light mode identifier

Signed-off-by: Yue Yang <[email protected]>

Co-authored-by: charlie <[email protected]>
Co-authored-by: Andelf <[email protected]>

resources/css/common.css

@@ -92,7 +92,11 @@ html[data-theme='dark'] {
   --color-level-6: #3a7e8e;
 }
 
+/* You should always use .light-theme for light mode, the .white-theme is just for backword compatibility.
+
+See: https://github.com/logseq/logseq/pull/4652. */
 .white-theme,
+.light-theme,
 html[data-theme='light'] {
   --ls-primary-background-color: #ffffff;
   --ls-secondary-background-color: #f7f7f7;

src/main/frontend/components/settings.cljs

@@ -568,7 +568,7 @@
         theme (state/sub :ui/theme)
         dark? (= "dark" theme)
         system-theme? (state/sub :ui/system-theme?)
-        switch-theme (if dark? "white" "dark")]
+        switch-theme (if dark? "light" "dark")]
     [:div.panel-wrap.is-general
      (when-not (mobile-util/is-native-platform?)
        (version-row t version))

src/main/frontend/components/sidebar.cljs

@@ -464,7 +464,7 @@
         granted? (state/sub [:nfs/user-granted? (state/get-current-repo)])
         theme (state/sub :ui/theme)
         system-theme? (state/sub :ui/system-theme?)
-        white? (= "white" (state/sub :ui/theme))
+        light? (= "light" (state/sub :ui/theme))
         sidebar-open?  (state/sub :ui/sidebar-open?)
         settings-open? (state/sub :ui/settings-open?)
         left-sidebar-open?  (state/sub :ui/left-sidebar-open?)
@@ -504,7 +504,7 @@
        [:div#left-container
         {:class (if (state/sub :ui/sidebar-open?) "overflow-hidden" "w-full")}
         (header/header {:open-fn        open-fn
-                        :white?         white?
+                        :light?         light?
                         :current-repo   current-repo
                         :logged?        logged?
                         :page?          page?
@@ -519,7 +519,7 @@
                :home?               home?
                :route-name          route-name
                :indexeddb-support?  indexeddb-support?
-               :white?              white?
+               :light?              light?
                :db-restoring?       db-restoring?
                :main-content        main-content})
 

src/main/frontend/components/theme.cljs

@@ -19,11 +19,11 @@
     (rum/use-effect!
      #(let [doc js/document.documentElement
             cls (.-classList doc)]
-        (.setAttribute doc "data-theme" (if (= theme "white") "light" theme))
+        (.setAttribute doc "data-theme" theme)
         (if (= theme "dark") ;; for tailwind dark mode
           (.add cls "dark")
           (.remove cls "dark"))
-        (plugin-handler/hook-plugin-app :theme-mode-changed {:mode (if (= theme "white") "light" theme)} nil))
+        (plugin-handler/hook-plugin-app :theme-mode-changed {:mode theme} nil))
      [theme])
 
     (rum/use-effect!
@@ -65,13 +65,15 @@
      [system-theme?])
 
     (rum/use-effect!
-      #(state/set-modal!
-         (when settings-open?
-           (fn [] [:div.settings-modal (settings/settings)])))
-      [settings-open?])
+     #(state/set-modal!
+       (when settings-open?
+         (fn [] [:div.settings-modal (settings/settings)])))
+     [settings-open?])
 
     [:div
-     {:class    (str theme "-theme")
+     {:class    (util/classnames
+                 [(str theme "-theme")
+                  {:white-theme (= "light" theme)}]) ; The white-theme is for backward compatibility. See: https://github.com/logseq/logseq/pull/4652.
       :on-click on-click}
      child
 

src/main/frontend/handler/plugin.cljs

@@ -302,7 +302,7 @@
   (when-let [themes (get (group-by :pid (:plugin/installed-themes @state/state)) pid)]
     (when-let [theme (first themes)]
       (let [theme-mode (:mode theme)]
-        (and theme-mode (state/set-theme! (if (= theme-mode "light") "white" theme-mode)))
+        (and theme-mode (state/set-theme! theme-mode))
         (js/LSPluginCore.selectTheme (bean/->js theme))))))
 
 (defn update-plugin-settings-state

src/main/frontend/state.cljs

@@ -892,7 +892,7 @@
   [theme]
   (set-state! :ui/theme theme)
   (when (mobile-util/native-ios?)
-    (if (= theme "white")
+    (if (= theme "light")
       (util/set-theme-light)
       (util/set-theme-dark)))
   (storage/set :ui/theme theme))
@@ -900,7 +900,7 @@
 (defn sync-system-theme!
   []
   (let [system-dark? (.-matches (js/window.matchMedia "(prefers-color-scheme: dark)"))]
-    (set-theme! (if system-dark? "dark" "white"))
+    (set-theme! (if system-dark? "dark" "light"))
     (set-state! :ui/system-theme? true)
     (storage/set :ui/system-theme? true)))
 
@@ -908,7 +908,7 @@
   [theme-mode]
   (if-not (= theme-mode "system")
     (do
-      (set-theme! (if (= theme-mode "light") "white" theme-mode))
+      (set-theme! theme-mode)
       (set-state! :ui/system-theme? false)
       (storage/set :ui/system-theme? false))
     (sync-system-theme!)))
@@ -924,7 +924,7 @@
 (defn toggle-theme!
   []
   (let [theme (:ui/theme @state)
-        theme' (if (= theme "dark") "white" "dark")]
+        theme' (if (= theme "dark") "light" "dark")]
     (use-theme-mode! theme')))
 
 (defn set-root-component!

src/main/frontend/util.cljc

@@ -263,7 +263,6 @@
             (Integer/parseInt x)
             x)))
 
-
 (defn safe-parse-int
   [x]
   #?(:cljs (let [result (parse-int x)]
@@ -383,7 +382,6 @@
    (defn stop-propagation [e]
      (when e (.stopPropagation e))))
 
-
 #?(:cljs
    (defn cur-doc-top []
      (.. js/document -documentElement -scrollTop)))
@@ -1226,7 +1224,7 @@
 
         :else
         (do (swap! buf conj v)
-          (recur buf t))))))
+            (recur buf t))))))
 
 #?(:cljs
    (defn trace!
@@ -1298,11 +1296,11 @@
   "
   [args]
   (into #{} (mapcat
-              #(if (map? %)
-                 (for [[k v] %]
-                   (when v (name k)))
-                 (name %))
-              args)))
+             #(if (map? %)
+                (for [[k v] %]
+                  (when v (name k)))
+                (name %))
+             args)))
 
 #?(:cljs
    (defn- get-dom-top
@@ -1438,7 +1436,7 @@
 
 #?(:cljs
    (defn onchange-event-is-composing?
-      "Check if onchange event of Input is a composing (IME) event.
+     "Check if onchange event of Input is a composing (IME) event.
        Always ignore the IME process."
      [e]
      (gobj/getValueByKeys e "nativeEvent" "isComposing"))) ;; No keycode available
@@ -1447,7 +1445,7 @@
    (defn open-url
      [url]
      (let [route? (or (string/starts-with? url
-                        (string/replace js/location.href js/location.hash ""))
+                                           (string/replace js/location.href js/location.hash ""))
                       (string/starts-with? url "#"))]
        (if (and (not route?) (electron?))
          (js/window.apis.openExternal url)

src/main/logseq/api.cljs

@@ -71,7 +71,7 @@
     (bean/->js
       (normalize-keyword-for-json
         {:preferred-language    (:preferred-language @state/state)
-         :preferred-theme-mode  (if (= (:ui/theme @state/state) "white") "light" "dark")
+         :preferred-theme-mode  (:ui/theme @state/state)
          :preferred-format      (state/get-preferred-format)
          :preferred-workflow    (state/get-preferred-workflow)
          :preferred-todo        (state/get-preferred-todo)
@@ -93,7 +93,7 @@
 
 (def ^:export set_theme_mode
   (fn [mode]
-    (state/set-theme! (if (= mode "light") "white" "dark"))))
+    (state/set-theme! mode)))
 
 (def ^:export load_plugin_config
   (fn [path]