Refractor dark mode + styles handling (#562)

2026-05-24 12:22:09 +00:00 · 2024-05-30 17:54:24 +07:00 · 2024-05-30 17:54:24 +07:00 · fc50a2ce70
commit fc50a2ce70
parent a10d45883c 70a5304027
7 changed files with 28 additions and 44 deletions
--- a/.config/ags/config.js
+++ b/.config/ags/config.js
@ -20,7 +20,7 @@ import Overview from './modules/overview/main.js';
 import Session from './modules/session/main.js';
 import SideLeft from './modules/sideleft/main.js';
 import SideRight from './modules/sideright/main.js';
-import { COMPILED_STYLE_DIR, handleStyles } from './init.js';
+import { COMPILED_STYLE_DIR } from './init.js';

 const range = (length, start = 1) => Array.from({ length }, (_, i) => i + start);
 function forMonitors(widget) {
@ -32,7 +32,7 @@ function forMonitorsAsync(widget) {
    return range(n, 0).forEach((n) => widget(n).catch(print))
 }

-handleStyles();
+handleStyles(true);

 const Windows = () => [
    // forMonitors(DesktopBackground),
--- a/.config/ags/config_overviewOnly.js
+++ b/.config/ags/config_overviewOnly.js
@ -8,26 +8,12 @@
 //     bind = Super, Tab, exec, ags -t overview

 // Import
-import GLib from 'gi://GLib';
 import App from 'resource:///com/github/Aylur/ags/app.js'
-import * as Utils from 'resource:///com/github/Aylur/ags/utils.js'
-// Stuff
-import userOptions from './modules/.configuration/user_options.js';
 // Widgets
 import Overview from './modules/overview/main.js';
+import { COMPILED_STYLE_DIR } from './init.js';

-const COMPILED_STYLE_DIR = `${GLib.get_user_cache_dir()}/ags/user/generated`
-Utils.exec(`mkdir -p "${GLib.get_user_state_dir()}/ags/scss"`);
-Utils.exec(`bash -c 'echo "" > ${GLib.get_user_state_dir()}/ags/scss/_musicwal.scss'`); // reset music styles
-Utils.exec(`bash -c 'echo "" > ${GLib.get_user_state_dir()}/ags/scss/_musicmaterial.scss'`); // reset music styles
-async function applyStyle() {
-    Utils.exec(`mkdir -p ${COMPILED_STYLE_DIR}`);
-    Utils.exec(`sass -I "${GLib.get_user_state_dir()}/ags/scss" -I "${App.configDir}/scss/fallback" "${App.configDir}/scss/main.scss" "${COMPILED_STYLE_DIR}/style.css"`);
-    App.resetCss();
-    App.applyCss(`${COMPILED_STYLE_DIR}/style.css`);
-    console.log('[LOG] Styles loaded')
-}
-applyStyle().catch(print);
+handleStyles(true);

 App.config({
    css: `${COMPILED_STYLE_DIR}/style.css`,
@ -36,4 +22,3 @@ App.config({
        Overview(),
    ],
 });
-
--- a/.config/ags/init.js
+++ b/.config/ags/init.js
@ -4,17 +4,20 @@ import * as Utils from 'resource:///com/github/Aylur/ags/utils.js'

 export const COMPILED_STYLE_DIR = `${GLib.get_user_cache_dir()}/ags/user/generated`

-export const handleStyles = () => {
+globalThis['handleStyles'] = (resetMusic) => {
    // Reset
    Utils.exec(`mkdir -p "${GLib.get_user_state_dir()}/ags/scss"`);
-    Utils.exec(`bash -c 'echo "" > ${GLib.get_user_state_dir()}/ags/scss/_musicwal.scss'`); // reset music styles
-    Utils.exec(`bash -c 'echo "" > ${GLib.get_user_state_dir()}/ags/scss/_musicmaterial.scss'`); // reset music styles
+    if (resetMusic) {
+        Utils.exec(`bash -c 'echo "" > ${GLib.get_user_state_dir()}/ags/scss/_musicwal.scss'`); // reset music styles
+        Utils.exec(`bash -c 'echo "" > ${GLib.get_user_state_dir()}/ags/scss/_musicmaterial.scss'`); // reset music styles
+    }
    // Generate overrides
-    Utils.writeFile(`
-@mixin symbolic-icon {
+    Utils.writeFile(
+`@mixin symbolic-icon {
    -gtk-icon-theme: '${userOptions.icons.symbolicIconTheme}';
 }
-    `, `${GLib.get_user_state_dir()}/ags/scss/_lib_mixins_overrides.scss`)
+`,
+        `${GLib.get_user_state_dir()}/ags/scss/_lib_mixins_overrides.scss`)
    // Compile and apply
    async function applyStyle() {
        Utils.exec(`mkdir -p ${COMPILED_STYLE_DIR}`);
@ -25,4 +28,3 @@ export const handleStyles = () => {
    }
    applyStyle().catch(print);
 }
-
--- a/.config/ags/modules/.miscutils/system.js
+++ b/.config/ags/modules/.miscutils/system.js
@ -9,8 +9,13 @@ export const isArchDistro = (distroID == 'arch' || distroID == 'endeavouros' ||
 export const hasFlatpak = !!exec(`bash -c 'command -v flatpak'`);

 const LIGHTDARK_FILE_LOCATION = `${GLib.get_user_state_dir()}/ags/user/colormode.txt`;
-const colorMode = Utils.exec(`bash -c "sed -n '1p' '${LIGHTDARK_FILE_LOCATION}'"`);
-export let darkMode = Variable(!(Utils.readFile(LIGHTDARK_FILE_LOCATION).split('\n')[0].trim() == 'light'));
+export const darkMode = Variable(!(Utils.readFile(LIGHTDARK_FILE_LOCATION).split('\n')[0].trim() == 'light'));
+darkMode.connect('changed', ({ value }) => {
+    let lightdark = value ? "dark" : "light";
+    execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_state_dir()}/ags/user && sed -i "1s/.*/${lightdark}/"  ${GLib.get_user_state_dir()}/ags/user/colormode.txt`])
+        .then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchcolor.sh`]))
+        .catch(print);
+});
 export const hasPlasmaIntegration = !!Utils.exec('bash -c "command -v plasma-browser-integration-host"');

 export const getDistroIcon = () => {
--- a/.config/ags/modules/indicators/colorscheme.js
+++ b/.config/ags/modules/indicators/colorscheme.js
@ -7,6 +7,7 @@ const { execAsync } = Utils;
 import { setupCursorHover } from '../.widgetutils/cursorhover.js';
 import { showColorScheme } from '../../variables.js';
 import { MaterialIcon } from '../.commonwidgets/materialicon.js';
+import { darkMode } from '../.miscutils/system.js';

 const ColorBox = ({
    name = 'Color',
@ -97,8 +98,6 @@ const schemeOptionsArr = [
 ];

 const LIGHTDARK_FILE_LOCATION = `${GLib.get_user_state_dir()}/ags/user/colormode.txt`;
-const initColorMode = Utils.exec(`bash -c "sed -n \'1p\' ${LIGHTDARK_FILE_LOCATION}"`);
-const initColorVal = (initColorMode == "dark") ? 1 : 0;
 const initTransparency = Utils.exec(`bash -c "sed -n \'2p\' ${LIGHTDARK_FILE_LOCATION}"`);
 const initTransparencyVal = (initTransparency == "transparent") ? 1 : 0;
 const initScheme = Utils.exec(`bash -c "sed -n \'3p\' ${LIGHTDARK_FILE_LOCATION}"`);
@ -123,13 +122,13 @@ const ColorSchemeSettings = () => Widget.Box({
                    icon: 'dark_mode',
                    name: 'Dark Mode',
                    desc: 'Ya should go to sleep!',
-                    initValue: initColorVal,
-                    onChange: (self, newValue) => {
-                        let lightdark = newValue == 0 ? "light" : "dark";
-                        execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_state_dir()}/ags/user && sed -i "1s/.*/${lightdark}/"  ${GLib.get_user_state_dir()}/ags/user/colormode.txt`])
-                            .then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchcolor.sh`]))
-                            .catch(print);
+                    initValue: darkMode.value,
+                    onChange: (_, newValue) => {
+                        darkMode.value = !!newValue;
                    },
+                    extraSetup: (self) => self.hook(darkMode, (self) => {
+                        self.enabled.value = darkMode.value;
+                    }),
                }),
                ConfigToggle({
                    icon: 'border_clear',
--- a/.config/ags/modules/overview/miscfunctions.js
+++ b/.config/ags/modules/overview/miscfunctions.js
@ -36,15 +36,9 @@ export function launchCustomCommand(command) {
    }
    else if (args[0] == '>light') { // Light mode
        darkMode.value = false;
-        execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_state_dir()}/ags/user && sed -i "1s/.*/light/"  ${GLib.get_user_state_dir()}/ags/user/colormode.txt`])
-            .then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchcolor.sh`]))
-            .catch(print);
    }
    else if (args[0] == '>dark') { // Dark mode
        darkMode.value = true;
-        execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_state_dir()}/ags/user && sed -i "1s/.*/dark/"  ${GLib.get_user_state_dir()}/ags/user/colormode.txt`])
-            .then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchcolor.sh`]))
-            .catch(print);
    }
    else if (args[0] == '>badapple') { // Black and white
        execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_state_dir()}/ags/user && sed -i "3s/.*/monochrome/" ${GLib.get_user_state_dir()}/ags/user/colormode.txt`])
--- a/.config/ags/scripts/color_generation/applycolor.sh
+++ b/.config/ags/scripts/color_generation/applycolor.sh
@ -150,9 +150,8 @@ apply_gtk() { # Using gradience-cli
 }

 apply_ags() {
-    sass -I "$STATE_DIR/scss" -I "$CONFIG_DIR/scss/fallback" "$CONFIG_DIR"/scss/main.scss "$CACHE_DIR"/user/generated/style.css
+    ags run-js "handleStyles(false);"
    ags run-js 'openColorScheme.value = true; Utils.timeout(2000, () => openColorScheme.value = false);'
-    ags run-js "App.resetCss(); App.applyCss('${CACHE_DIR}/user/generated/style.css');"
 }

 if [[ "$1" = "--bad-apple" ]]; then