[ADD][16.0] Module web_dark_mode

web_dark_mode/static/src/js/switch_item.esm.js

@@ -0,0 +1,49 @@
+/** @odoo-module **/
+
+import {browser} from "@web/core/browser/browser";
+import {registry} from "@web/core/registry";
+
+export function darkModeSwitchItem(env) {
+    return {
+        type: "switch",
+        id: "color_scheme.switch",
+        description: env._t("Dark Mode"),
+        callback: () => {
+            env.services.color_scheme.switchColorScheme();
+        },
+        isChecked: env.services.cookie.current.color_scheme === "dark",
+        sequence: 40,
+    };
+}
+
+export const colorSchemeService = {
+    dependencies: ["cookie", "orm", "ui", "user"],
+
+    async start(env, {cookie, orm, ui, user}) {
+        registry.category("user_menuitems").add("darkmode", darkModeSwitchItem);
+
+        if (!cookie.current.color_scheme) {
+            const match_media = window.matchMedia("(prefers-color-scheme: dark)");
+            const dark_mode = match_media.matches;
+            cookie.setCookie("color_scheme", dark_mode ? "dark" : "light");
+            if (dark_mode) browser.location.reload();
+        }
+
+        return {
+            async switchColorScheme() {
+                const scheme =
+                    cookie.current.color_scheme === "dark" ? "light" : "dark";
+                cookie.setCookie("color_scheme", scheme);
+
+                await orm.write("res.users", [user.userId], {
+                    dark_mode: scheme === "dark",
+                });
+
+                ui.block();
+                browser.location.reload();
+            },
+        };
+    },
+};
+
+registry.category("services").add("color_scheme", colorSchemeService);

web_dark_mode/static/src/scss/variables.scss

@@ -0,0 +1,65 @@
+$o-webclient-color-scheme: dark;
+
+$o-white: #000000;
+$o-black: #ffffff;
+
+$o-gray-100: #191c24;
+$o-gray-200: #242733;
+$o-gray-300: #3f4149;
+$o-gray-400: #5f6167;
+$o-gray-500: #797a80;
+$o-gray-600: #94959a;
+$o-gray-700: #b0b0b4;
+$o-gray-800: #cccccf;
+$o-gray-900: #e9e9eb;
+
+$o-community-color: $o-gray-400;
+$o-enterprise-color: $o-gray-400;
+$o-enterprise-primary-color: $o-gray-500;
+$o-brand-primary: $o-gray-600;
+$o-brand-secondary: $o-gray-700;
+
+$o-success: #28a745;
+$o-info: #74dcf3;
+$o-warning: #ff7b00;
+$o-danger: #ff0020;
+
+$primary: $o-gray-800;
+
+$o-main-bg-color: #f0eeee;
+$o-main-favorite-color: #f3cc00;
+$o-main-code-color: #d2317b;
+
+$o-view-background-color: $o-white;
+$o-view-background-color: $o-gray-100;
+$o-shadow-color: #c0c0c0;
+
+$o-form-lightsecondary: #ccc;
+
+$o-list-footer-bg-color: #eee;
+
+$o-tooltip-arrow-color: white;
+
+// Layout
+$o-dropdown-box-shadow: 0 1rem 1.1rem rgba(#fff, 0.1);
+
+// == List group
+
+$o-list-group-active-bg: lighten(saturate(adjust-hue($o-info, 15), 1.8), 5);
+$o-list-footer-bg-color: $o-gray-200;
+
+// == Badges
+
+// Define a minimum width. This value is arbitrary and strictly font-related.
+$o-datepicker-week-color: #8f8f8f;
+
+$component-active-bg: red;
+
+$o-webclient-background-color: $o-gray-300;
+
+.o-settings-form-view .o_base_settings {
+    --settings__tab-bg: #{$o-gray-100};
+    --settings__tab-bg--active: #{$o-gray-300};
+    --settings__tab-color: #{$o-gray-700};
+    --settings__title-bg: #{$o-gray-100};
+}