lainns-mirror/noctalia-shell
1
0
Fork 0
mirror of https://github.com/noctalia-dev/noctalia-shell.git synced 2026-05-11 17:08:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Matugen: fixed generate container for light/dark themes

Browse Source
This commit is contained in:
ItsLemmy
2025-10-02 09:25:00 -04:00
parent 6b68d44182
commit 0141fb4466
3 changed files with 35 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Assets/Matugen/templates/gtk4.css
+1 -1
View File
@@ -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;
Helpers/ColorVariants.js
+13 -5
View File
@@ -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);
}
}
Services/MatugenService.qml
+21 -21
View File
@@ -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)
}
}
}