Refractor dark mode + styles handling (#562)

.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),

.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`
+handleStyles(true);
-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);
 
 App.config({
     css: `${COMPILED_STYLE_DIR}/style.css`,
@@ -36,4 +22,3 @@ App.config({
         Overview(),
     ],
 });
-

.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
+    if (resetMusic) {
-    Utils.exec(`bash -c 'echo "" > ${GLib.get_user_state_dir()}/ags/scss/_musicmaterial.scss'`); // reset music styles
+        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(`
+    Utils.writeFile(
-@mixin symbolic-icon {
+`@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);
 }
-

.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 const darkMode = Variable(!(Utils.readFile(LIGHTDARK_FILE_LOCATION).split('\n')[0].trim() == 'light'));
-export let 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 = () => {

.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,
+                    initValue: darkMode.value,
-                    onChange: (self, newValue) => {
+                    onChange: (_, newValue) => {
-                        let lightdark = newValue == 0 ? "light" : "dark";
+                        darkMode.value = !!newValue;
-                        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);
                     },
+                    extraSetup: (self) => self.hook(darkMode, (self) => {
+                        self.enabled.value = darkMode.value;
+                    }),
                 }),
                 ConfigToggle({
                     icon: 'border_clear',

.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`])

.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