From 0141fb44664b5ec1a453597629f79765e6883aee Mon Sep 17 00:00:00 2001 From: ItsLemmy Date: Thu, 2 Oct 2025 09:25:00 -0400 Subject: [PATCH] Matugen: fixed generate container for light/dark themes --- Assets/Matugen/templates/gtk4.css | 2 +- Helpers/ColorVariants.js | 18 +++++++++---- Services/MatugenService.qml | 42 +++++++++++++++---------------- 3 files changed, 35 insertions(+), 27 deletions(-) diff --git a/Assets/Matugen/templates/gtk4.css b/Assets/Matugen/templates/gtk4.css index 6db0bb71..6c99191e 100644 --- a/Assets/Matugen/templates/gtk4.css +++ b/Assets/Matugen/templates/gtk4.css @@ -17,7 +17,7 @@ @define-color card_bg_color {{colors.surface.default.hex}}; @define-color card_fg_color {{colors.on_surface.default.hex}}; -@define-color sidebar_bg_color {{colors.surface_variant.default.hex}}; +@define-color sidebar_bg_color {{colors.surface_container.default.hex}}; @define-color sidebar_fg_color {{colors.on_surface_variant.default.hex}}; @define-color sidebar_border_color @window_bg_color; @define-color sidebar_backdrop_color @window_bg_color; diff --git a/Helpers/ColorVariants.js b/Helpers/ColorVariants.js index 0f0708fe..32405961 100644 --- a/Helpers/ColorVariants.js +++ b/Helpers/ColorVariants.js @@ -127,13 +127,21 @@ function generateBright(hexColor) { * Generate container variant (much lighter, desaturated version) * Material 3 container is typically used for backgrounds, much lighter with reduced saturation */ -function generateContainer(hexColor) { +function generateContainer(hexColor, isDarkTheme = false) { const hsl = hexToHSL(hexColor); if (!hsl) return hexColor; - // Significantly increase lightness (aim for 85-90) and reduce saturation - const newL = Math.min(hsl.l + (90 - hsl.l) * 0.85, 90); - const newS = Math.max(hsl.s * 0.4, 10); + let newL, newS; + + if (isDarkTheme) { + // Dark theme: darken the color (aim for 10-20 lightness) + newL = Math.max(hsl.l - (hsl.l - 15) * 0.85, 10); + newS = Math.max(hsl.s * 0.4, 10); + } else { + // Light theme: lighten the color (aim for 85-90 lightness) + newL = Math.min(hsl.l + (90 - hsl.l) * 0.85, 90); + newS = Math.max(hsl.s * 0.4, 10); + } return hslToHex(hsl.h, newS, newL); -} +} \ No newline at end of file diff --git a/Services/MatugenService.qml b/Services/MatugenService.qml index 1f13ca41..d1f9e871 100644 --- a/Services/MatugenService.qml +++ b/Services/MatugenService.qml @@ -256,79 +256,79 @@ Singleton { }, "primary_container": { "light": { - "color": ColorVariants.generateContainer(variant.mPrimary) + "color": ColorVariants.generateContainer(variant.mPrimary, false) }, "default": { - "color": ColorVariants.generateContainer(variant.mPrimary) + "color": ColorVariants.generateContainer(variant.mPrimary, true) }, "dark": { - "color": ColorVariants.generateContainer(variant.mPrimary) + "color": ColorVariants.generateContainer(variant.mPrimary, true) } }, "secondary_container": { "light": { - "color": ColorVariants.generateContainer(variant.mSecondary) + "color": ColorVariants.generateContainer(variant.mSecondary, false) }, "default": { - "color": ColorVariants.generateContainer(variant.mSecondary) + "color": ColorVariants.generateContainer(variant.mSecondary, true) }, "dark": { - "color": ColorVariants.generateContainer(variant.mSecondary) + "color": ColorVariants.generateContainer(variant.mSecondary, true) } }, "tertiary_container": { "light": { - "color": ColorVariants.generateContainer(variant.mTertiary) + "color": ColorVariants.generateContainer(variant.mTertiary, false) }, "default": { - "color": ColorVariants.generateContainer(variant.mTertiary) + "color": ColorVariants.generateContainer(variant.mTertiary, true) }, "dark": { - "color": ColorVariants.generateContainer(variant.mTertiary) + "color": ColorVariants.generateContainer(variant.mTertiary, true) } }, "on_primary_container": { "light": { - "color": ColorVariants.generateContainer(variant.mOnPrimary) + "color": ColorVariants.generateContainer(variant.mOnPrimary, false) }, "default": { - "color": ColorVariants.generateContainer(variant.mOnPrimary) + "color": ColorVariants.generateContainer(variant.mOnPrimary, true) }, "dark": { - "color": ColorVariants.generateContainer(variant.mOnPrimary) + "color": ColorVariants.generateContainer(variant.mOnPrimary, true) } }, "on_secondary_container": { "light": { - "color": ColorVariants.generateContainer(variant.mOnSecondary) + "color": ColorVariants.generateContainer(variant.mOnSecondary, false) }, "default": { - "color": ColorVariants.generateContainer(variant.mOnSecondary) + "color": ColorVariants.generateContainer(variant.mOnSecondary, true) }, "dark": { - "color": ColorVariants.generateContainer(variant.mOnSecondary) + "color": ColorVariants.generateContainer(variant.mOnSecondary, true) } }, "on_tertiary_container": { "light": { - "color": ColorVariants.generateContainer(variant.mOnTertiary) + "color": ColorVariants.generateContainer(variant.mOnTertiary, false) }, "default": { - "color": ColorVariants.generateContainer(variant.mOnTertiary) + "color": ColorVariants.generateContainer(variant.mOnTertiary, true) }, "dark": { - "color": ColorVariants.generateContainer(variant.mOnTertiary) + "color": ColorVariants.generateContainer(variant.mOnTertiary, true) } }, "surface_container": { "light": { - "color": ColorVariants.generateContainer(variant.mSurface) + "color": ColorVariants.generateContainer(variant.mSurface, false) }, "default": { - "color": ColorVariants.generateContainer(variant.mSurface) + "color": ColorVariants.generateContainer(variant.mSurface, true) }, "dark": { - "color": ColorVariants.generateContainer(variant.mSurface) + "color": ColorVariants.generateContainer(variant.mSurface, true) } } }