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

app theming: walker

Browse Source
This commit is contained in:
ItsLemmy
2025-10-29 10:57:11 -04:00
parent 2f9c3abcb5
commit 98bed3d8be
3 changed files with 77 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Assets/MatugenTemplates/walker.css
+21 -20
View File
@@ -1,12 +1,12 @@
@define-color surface {{colors.surface_variant.default.hex}};
@define-color overlay {{colors.surface.default.hex}};
@define-color text {{colors.on_surface.default.hex}};
@define-color surface {{colors.surface.default.hex}};
@define-color surfaceVariant {{colors.surface_variant.default.hex}};
@define-color green {{colors.primary.default.hex}};
@define-color yellow {{colors.secondary.default.hex}};
@define-color red {{colors.error.default.hex}};
@define-color blue {{colors.primary.default.hex}};
@define-color onSurface {{colors.on_surface.default.hex}};
@define-color onSurfaceVariant {{colors.on_surface_variant.default.hex}};
@define-color primary {{colors.primary.default.hex}};
@define-color secondary {{colors.secondary.default.hex}};
@define-color error {{colors.error.default.hex}};
@define-color outline {{colors.outline.default.hex}};
* {
@@ -38,11 +38,11 @@ scrollbar {
.preview-box,
.elephant-hint,
.placeholder {
color: @text;
color: @onSurface;
}
.box {
background: @overlay;
background: @surfaceVariant;
padding: 20px;
border-radius: 20px;
border: 2px solid @outline;
@@ -59,8 +59,8 @@ scrollbar {
.input {
background: @surface;
color: @text;
caret-color: @text;
color: @onSurface;
caret-color: @onSurface;
padding: 10px;
}
@@ -78,7 +78,7 @@ scrollbar {
}
.list {
color: @text;
color: @onSurface;
}
child {
@@ -90,7 +90,7 @@ child {
}
.item-quick-activation {
background: @blue;
background: @secondary;
border-radius: 10px;
padding: 10px;
color: @surface;
@@ -98,7 +98,7 @@ child {
child:hover .item-box,
child:selected .item-box {
background: alpha(@blue, 0.4);
background: alpha(@primary, 0.4);
}
.item-text-box {
@@ -119,10 +119,10 @@ child:selected .item-box {
}
.preview {
border-top: 1px solid @blue;
border-top: 1px solid @primary;
padding: 10px;
border-radius: 10px;
color: @text;
color: @onSurface;
}
.calc .item-text {
@@ -148,7 +148,7 @@ child:selected .item-box {
font-weight: bold;
}
.bluetooth.disconnected {
.primarytooth.disconnected {
opacity: 0.5;
}
@@ -157,15 +157,16 @@ child:selected .item-box {
}
.keybinds-wrapper {
border-top: 1px solid @blue;
border-top: 1px solid @primary;
font-size: 12px;
color: @blue;
color: @primary;
}
.keybinds {
}
.keybind {
color: @onSurfaceVariant;
}
.keybind-bind {
@@ -178,7 +179,7 @@ child:selected .item-box {
.error {
padding: 10px;
background: @red;
background: @error;
color: @surface;
}
Modules/Settings/Tabs/ColorSchemeTab.qml
+17 -17
View File
@@ -683,23 +683,23 @@ ColumnLayout {
}
}
}
// NCheckbox {
// label: "Walker"
// description: ProgramCheckerService.walkerAvailable ? I18n.tr("settings.color-scheme.templates.programs.walker.description", {
// "filepath": "~/.config/walker/style.css"
// }) : I18n.tr("settings.color-scheme.templates.programs.walker.description-missing", {
// "app": "walker"
// })
// checked: Settings.data.templates.walker
// enabled: ProgramCheckerService.walkerAvailable
// opacity: ProgramCheckerService.walkerAvailable ? 1.0 : 0.6
// onToggled: checked => {
// if (ProgramCheckerService.walkerAvailable) {
// Settings.data.templates.walker = checked
// AppThemeService.generate()
// }
// }
// }
NCheckbox {
label: "Walker"
description: ProgramCheckerService.walkerAvailable ? I18n.tr("settings.color-scheme.templates.programs.walker.description", {
"filepath": "~/.config/walker/style.css"
}) : I18n.tr("settings.color-scheme.templates.programs.walker.description-missing", {
"app": "walker"
})
checked: Settings.data.templates.walker
enabled: ProgramCheckerService.walkerAvailable
opacity: ProgramCheckerService.walkerAvailable ? 1.0 : 0.6
onToggled: checked => {
if (ProgramCheckerService.walkerAvailable) {
Settings.data.templates.walker = checked
AppThemeService.generate()
}
}
}
}
// Miscellaneous
Services/AppThemeService.qml
+39 -38
View File
@@ -114,7 +114,8 @@ Singleton {
"input": "walker.css",
"outputs": [{
"path": "~/.config/walker/themes/noctalia/style.css"
}]
}],
"strict": true
}
})
@@ -194,12 +195,9 @@ Singleton {
handleTerminalThemes()
const isDarkMode = Settings.data.colorSchemes.darkMode
const mode = isDarkMode ? "dark" : "light"
const mode = Settings.data.colorSchemes.darkMode ? "dark" : "light"
const colors = schemeData[mode]
const matugenColors = generatePalette(colors.mPrimary, colors.mSecondary, colors.mTertiary, colors.mError, colors.mSurface, colors.mOutline, isDarkMode)
let script = processAllTemplates(matugenColors, mode)
let script = processAllTemplates(colors, mode)
// Add user templates if enabled
script += buildUserTemplateCommandForPredefined(schemeData, mode)
@@ -208,75 +206,74 @@ Singleton {
generateProcess.running = true
}
function generatePalette(primaryColor, secondaryColor, tertiaryColor, errorColor, backgroundColor, outlineColor, isDarkMode) {
function generatePalette(colors, isDarkMode, isStrict) {
const c = hex => ({
"default": {
"hex": hex,
"hex_stripped": hex.replace(/^#/, "")
}
})
// Generate container colors
const primaryContainer = ColorsConvert.generateContainerColor(primaryColor, isDarkMode)
const secondaryContainer = ColorsConvert.generateContainerColor(secondaryColor, isDarkMode)
const tertiaryContainer = ColorsConvert.generateContainerColor(tertiaryColor, isDarkMode)
const primaryContainer = ColorsConvert.generateContainerColor(colors.mPrimary, isDarkMode)
const secondaryContainer = ColorsConvert.generateContainerColor(colors.mSecondary, isDarkMode)
const tertiaryContainer = ColorsConvert.generateContainerColor(colors.mTertiary, isDarkMode)
// Generate "on" colors (for text/icons)
const onPrimary = ColorsConvert.generateOnColor(primaryColor, isDarkMode)
const onSecondary = ColorsConvert.generateOnColor(secondaryColor, isDarkMode)
const onTertiary = ColorsConvert.generateOnColor(tertiaryColor, isDarkMode)
const onBackground = ColorsConvert.generateOnColor(backgroundColor, isDarkMode)
// Generate "on" colors
const onPrimary = ColorsConvert.generateOnColor(colors.mPrimary, isDarkMode)
const onSecondary = ColorsConvert.generateOnColor(colors.mSecondary, isDarkMode)
const onTertiary = ColorsConvert.generateOnColor(colors.mTertiary, isDarkMode)
const onPrimaryContainer = ColorsConvert.generateOnColor(primaryContainer, isDarkMode)
const onSecondaryContainer = ColorsConvert.generateOnColor(secondaryContainer, isDarkMode)
const onTertiaryContainer = ColorsConvert.generateOnColor(tertiaryContainer, isDarkMode)
// Generate error colors (standard red-based)
const errorContainer = ColorsConvert.generateContainerColor(errorColor, isDarkMode)
const onError = ColorsConvert.generateOnColor(errorColor, isDarkMode)
const errorContainer = ColorsConvert.generateContainerColor(colors.mError, isDarkMode)
const onError = ColorsConvert.generateOnColor(colors.mError, isDarkMode)
const onErrorContainer = ColorsConvert.generateOnColor(errorContainer, isDarkMode)
// Surface is same as background in Material Design 3
const surface = backgroundColor
const onSurface = onBackground
const surface = colors.mSurface
const onSurface = isStrict ? colors.mOnSurface : ColorsConvert.generateOnColor(colors.mSurface, isDarkMode)
// Generate surface variant (slightly different tone)
const surfaceVariant = ColorsConvert.adjustLightness(backgroundColor, isDarkMode ? 5 : -3)
const onSurfaceVariant = ColorsConvert.generateOnColor(surfaceVariant, isDarkMode)
const surfaceVariant = isStrict ? colors.mSurfaceVariant : ColorsConvert.adjustLightness(colors.mSurface, isDarkMode ? 5 : -3)
const onSurfaceVariant = isStrict ? colors.mOnSurfaceVariant : ColorsConvert.generateOnColor(surfaceVariant, isDarkMode)
// Generate surface containers (progressive elevation)
const surfaceContainerLowest = ColorsConvert.generateSurfaceVariant(backgroundColor, 0, isDarkMode)
const surfaceContainerLow = ColorsConvert.generateSurfaceVariant(backgroundColor, 1, isDarkMode)
const surfaceContainer = ColorsConvert.generateSurfaceVariant(backgroundColor, 2, isDarkMode)
const surfaceContainerHigh = ColorsConvert.generateSurfaceVariant(backgroundColor, 3, isDarkMode)
const surfaceContainerHighest = ColorsConvert.generateSurfaceVariant(backgroundColor, 4, isDarkMode)
const surfaceContainerLowest = ColorsConvert.generateSurfaceVariant(surface, 0, isDarkMode)
const surfaceContainerLow = ColorsConvert.generateSurfaceVariant(surface, 1, isDarkMode)
const surfaceContainer = ColorsConvert.generateSurfaceVariant(surface, 2, isDarkMode)
const surfaceContainerHigh = ColorsConvert.generateSurfaceVariant(surface, 3, isDarkMode)
const surfaceContainerHighest = ColorsConvert.generateSurfaceVariant(surface, 4, isDarkMode)
// Generate outline colors (for borders/dividers)
const outline = isDarkMode ? "#938f99" : "#79747e"
const outline = isStrict ? colors.mOutline : (isDarkMode ? "#938f99" : "#79747e")
const outlineVariant = ColorsConvert.adjustLightness(outline, isDarkMode ? -10 : 10)
// Shadow is always very dark
const shadow = "#000000"
return {
"primary": c(primaryColor),
"primary": c(colors.mPrimary),
"on_primary": c(onPrimary),
"primary_container": c(primaryContainer),
"on_primary_container": c(onPrimaryContainer),
"secondary": c(secondaryColor),
"secondary": c(colors.mSecondary),
"on_secondary": c(onSecondary),
"secondary_container": c(secondaryContainer),
"on_secondary_container": c(onSecondaryContainer),
"tertiary": c(tertiaryColor),
"tertiary": c(colors.mTertiary),
"on_tertiary": c(onTertiary),
"tertiary_container": c(tertiaryContainer),
"on_tertiary_container": c(onTertiaryContainer),
"error": c(errorColor),
"error": c(colors.mError),
"on_error": c(onError),
"error_container": c(errorContainer),
"on_error_container": c(onErrorContainer),
"background": c(backgroundColor),
"on_background": c(onBackground),
"background": c(surface),
"on_background": c(onSurface),
"surface": c(surface),
"on_surface": c(onSurface),
"surface_variant": c(surfaceVariant),
@@ -309,7 +306,11 @@ Singleton {
const templatePath = `${Quickshell.shellDir}/Assets/MatugenTemplates/${config.input}`
let script = ""
const palette = generatePalette(colors, Settings.data.colorSchemes.darkMode, config.strict || false)
config.outputs.forEach(output => {
const outputPath = output.path.replace("~", homeDir)
const outputDir = outputPath.substring(0, outputPath.lastIndexOf('/'))
@@ -319,14 +320,14 @@ Singleton {
script += `if [ -d "${baseConfigDir}" ]; then\n`
script += ` mkdir -p ${outputDir}\n`
script += ` cp '${templatePath}' '${outputPath}'\n`
script += ` ${replaceColorsInFile(outputPath, colors)}\n`
script += ` ${replaceColorsInFile(outputPath, palette)}\n`
script += `else\n`
script += ` echo "Discord client ${appName} not found at ${baseConfigDir}, skipping theme generation"\n`
script += `fi\n`
} else {
script += `mkdir -p ${outputDir}\n`
script += `cp '${templatePath}' '${outputPath}'\n`
script += replaceColorsInFile(outputPath, colors)
script += replaceColorsInFile(outputPath, palette)
}
})
@@ -410,7 +411,7 @@ Singleton {
const colors = schemeData[mode]
// Generate the matugen palette JSON
const matugenColors = generatePalette(colors.mPrimary, colors.mSecondary, colors.mTertiary, colors.mError, colors.mSurface, colors.mOutline, isDarkMode)
const palette = generatePalette(colors, isDarkMode, false)
// Create a temporary JSON file with the color palette
const tempJsonPath = Settings.cacheDir + "predefined-colors.json"
@@ -423,7 +424,7 @@ Singleton {
// Write the color palette to a temp JSON file
script += ` cat > '${tempJsonPathEsc}' << 'EOF'\n`
script += JSON.stringify({
"colors": matugenColors
"colors": palette
}, null, 2) + "\n"
script += "EOF\n"