never/noctalia-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add gtk/qt matugen support (colors are wip), Fix some text in the Settings Tabs

Browse source
This commit is contained in:
Ly-sec 2025-08-18 15:09:39 +02:00
parent 9a71598944
commit 9b11be03af
19 changed files with 142 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.github/workflows/release.yml vendored
View file

@ -49,4 +49,4 @@ jobs:
noctalia-latest.tar.gz
body_path: release_notes.md
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

6
Assets/Matugen/matugen.base.toml Normal file
View file

@ -0,0 +1,6 @@
# Base: only write Noctalia colors.json for the shell
[config]
[templates.noctalia]
input_path = "templates/noctalia.json"
output_path = "~/.config/noctalia/colors.json"

21
Assets/Matugen/matugen.toml
View file

@ -4,4 +4,23 @@
[templates.noctalia]
input_path = "templates/noctalia.json"
output_path = "~/.config/noctalia/colors.json"
output_path = "~/.config/noctalia/colors.json"
# GTK 4 (libadwaita) variables override
[templates.gtk4]
input_path = "templates/gtk4.css"
output_path = "~/.config/gtk-4.0/gtk.css"
# GTK 3 named-colors fallback for legacy apps
[templates.gtk3]
input_path = "templates/gtk3.css"
output_path = "~/.config/gtk-3.0/gtk.css"
# Qt6ct color scheme (can also be used by qt5ct in many distros)
[templates.qt6]
input_path = "templates/qtct.conf"
output_path = "~/.config/qt6ct/colors/noctalia.conf"
[templates.qt5]
input_path = "templates/qtct.conf"
output_path = "~/.config/qt5ct/colors/noctalia.conf"

22
Assets/Matugen/templates/gtk3.css Normal file
View file

@ -0,0 +1,22 @@
/*
* GTK Colors
* Generated with Matugen
*/
@define-color accent_color {{colors.primary_fixed_dim.default.hex}};
@define-color accent_fg_color {{colors.on_primary_fixed.default.hex}};
@define-color accent_bg_color {{colors.primary_fixed_dim.default.hex}};
@define-color window_bg_color {{colors.surface_dim.default.hex}};
@define-color window_fg_color {{colors.on_surface.default.hex}};
@define-color headerbar_bg_color {{colors.surface_dim.default.hex}};
@define-color headerbar_fg_color {{colors.on_surface.default.hex}};
@define-color popover_bg_color {{colors.surface_dim.default.hex}};
@define-color popover_fg_color {{colors.on_surface.default.hex}};
@define-color view_bg_color {{colors.surface.default.hex}};
@define-color view_fg_color {{colors.on_surface.default.hex}};
@define-color card_bg_color {{colors.surface.default.hex}};
@define-color card_fg_color {{colors.on_surface.default.hex}};
@define-color sidebar_bg_color @window_bg_color;
@define-color sidebar_fg_color @window_fg_color;
@define-color sidebar_border_color @window_bg_color;
@define-color sidebar_backdrop_color @window_bg_color;

22
Assets/Matugen/templates/gtk4.css Normal file
View file

@ -0,0 +1,22 @@
/*
* GTK Colors
* Generated with Matugen
*/
@define-color accent_color {{colors.primary_fixed_dim.default.hex}};
@define-color accent_fg_color {{colors.on_primary_fixed.default.hex}};
@define-color accent_bg_color {{colors.primary_fixed_dim.default.hex}};
@define-color window_bg_color {{colors.surface_dim.default.hex}};
@define-color window_fg_color {{colors.on_surface.default.hex}};
@define-color headerbar_bg_color {{colors.surface_dim.default.hex}};
@define-color headerbar_fg_color {{colors.on_surface.default.hex}};
@define-color popover_bg_color {{colors.surface_dim.default.hex}};
@define-color popover_fg_color {{colors.on_surface.default.hex}};
@define-color view_bg_color {{colors.surface.default.hex}};
@define-color view_fg_color {{colors.on_surface.default.hex}};
@define-color card_bg_color {{colors.surface.default.hex}};
@define-color card_fg_color {{colors.on_surface.default.hex}};
@define-color sidebar_bg_color @window_bg_color;
@define-color sidebar_fg_color @window_fg_color;
@define-color sidebar_border_color @window_bg_color;
@define-color sidebar_backdrop_color @window_bg_color;

4
Assets/Matugen/templates/qtct.conf Normal file
View file

@ -0,0 +1,4 @@
[ColorScheme]
active_colors={{colors.on_background.default.hex}}, {{colors.surface.default.hex}}, #ffffff, #cacaca, #9f9f9f, #b8b8b8, {{colors.on_background.default.hex}}, #ffffff, {{colors.on_surface.default.hex}}, {{colors.background.default.hex}}, {{colors.background.default.hex}}, {{colors.shadow.default.hex}}, {{colors.primary_container.default.hex}}, {{colors.on_primary_container.default.hex}}, {{colors.secondary.default.hex}}, {{colors.primary.default.hex}}, {{colors.surface.default.hex}}, {{colors.scrim.default.hex}}, {{colors.surface.default.hex}}, {{colors.on_surface.default.hex}}, {{colors.secondary.default.hex}}
disabled_colors={{colors.on_background.default.hex}}, {{colors.surface.default.hex}}, #ffffff, #cacaca, #9f9f9f, #b8b8b8, {{colors.on_background.default.hex}}, #ffffff, {{colors.on_surface.default.hex}}, {{colors.background.default.hex}}, {{colors.background.default.hex}}, {{colors.shadow.default.hex}}, {{colors.primary_container.default.hex}}, {{colors.on_primary_container.default.hex}}, {{colors.secondary.default.hex}}, {{colors.primary.default.hex}}, {{colors.surface.default.hex}}, {{colors.scrim.default.hex}}, {{colors.surface.default.hex}}, {{colors.on_surface.default.hex}}, {{colors.secondary.default.hex}}
inactive_colors={{colors.on_background.default.hex}}, {{colors.surface.default.hex}}, #ffffff, #cacaca, #9f9f9f, #b8b8b8, {{colors.on_background.default.hex}}, #ffffff, {{colors.on_surface.default.hex}}, {{colors.background.default.hex}}, {{colors.background.default.hex}}, {{colors.shadow.default.hex}}, {{colors.primary_container.default.hex}}, {{colors.on_primary_container.default.hex}}, {{colors.secondary.default.hex}}, {{colors.primary.default.hex}}, {{colors.surface.default.hex}}, {{colors.scrim.default.hex}}, {{colors.surface.default.hex}}, {{colors.on_surface.default.hex}}, {{colors.secondary.default.hex}}

2
Commons/Settings.qml
View file

@ -200,6 +200,8 @@ Singleton {
property bool useWallpaperColors: false
property string predefinedScheme: ""
property bool darkMode: true
// External app theming (GTK & Qt)
property bool themeApps: true
}
}
}

8
Modules/SettingsPanel/Tabs/AudioTab.qml
View file

@ -73,7 +73,7 @@ ColumnLayout {
}
NText {
text: "System-wide volume level"
text: "System-wide volume level."
font.pointSize: Style.fontSizeSmall * scaling
color: Color.mOnSurface
wrapMode: Text.WordWrap
@ -123,7 +123,7 @@ ColumnLayout {
NToggle {
label: "Mute Audio Output"
description: "Mute or unmute the default audio output"
description: "Mute or unmute the default audio output."
checked: AudioService.muted
onToggled: checked => {
if (AudioService.sink && AudioService.sink.audio) {
@ -172,7 +172,7 @@ ColumnLayout {
}
NText {
text: "Select the desired audio output device"
text: "Select the desired audio output device."
font.pointSize: Style.fontSizeSmall * scaling
color: Color.mOnSurface
wrapMode: Text.WordWrap
@ -211,7 +211,7 @@ ColumnLayout {
}
NText {
text: "Select desired audio input device"
text: "Select desired audio input device."
font.pointSize: Style.fontSizeSmall * scaling
color: Color.mOnSurface
wrapMode: Text.WordWrap

10
Modules/SettingsPanel/Tabs/BarTab.qml
View file

@ -42,7 +42,7 @@ ColumnLayout {
NToggle {
label: "Show Active Window"
description: "Display the title of the currently focused window on the left side of the bar"
description: "Display the title of the currently focused window on the left side of the bar."
checked: Settings.data.bar.showActiveWindow
onToggled: checked => {
Settings.data.bar.showActiveWindow = checked
@ -51,7 +51,7 @@ ColumnLayout {
NToggle {
label: "Show System Info"
description: "Display system statistics (CPU, RAM, Temperature)"
description: "Display system statistics (CPU, RAM, Temperature)."
checked: Settings.data.bar.showSystemInfo
onToggled: checked => {
Settings.data.bar.showSystemInfo = checked
@ -60,7 +60,7 @@ ColumnLayout {
NToggle {
label: "Show Media"
description: "Display media controls and information"
description: "Display media controls and information."
checked: Settings.data.bar.showMedia
onToggled: checked => {
Settings.data.bar.showMedia = checked
@ -69,7 +69,7 @@ ColumnLayout {
NToggle {
label: "Show Notifications History"
description: "Display a shortcut to the notifications history"
description: "Display a shortcut to the notifications history."
checked: Settings.data.bar.showNotificationsHistory
onToggled: checked => {
Settings.data.bar.showNotificationsHistory = checked
@ -78,7 +78,7 @@ ColumnLayout {
NToggle {
label: "Show Applications Tray"
description: "Display the applications tray"
description: "Display the applications tray."
checked: Settings.data.bar.showTray
onToggled: checked => {
Settings.data.bar.showTray = checked

6
Modules/SettingsPanel/Tabs/BrightnessTab.qml
View file

@ -55,7 +55,7 @@ Item {
NToggle {
label: "Show Brightness Icon"
description: "Display the brightness control icon in the top bar"
description: "Display the brightness control icon in the top bar."
checked: Settings.data.bar.showBrightness
onToggled: checked => {
Settings.data.bar.showBrightness = checked
@ -82,7 +82,7 @@ Item {
}
NText {
text: "Adjust the step size for brightness changes (scroll wheel, keyboard shortcuts)"
text: "Adjust the step size for brightness changes (scroll wheel, keyboard shortcuts)."
font.pointSize: Style.fontSizeSmall * scaling
color: Color.mOnSurfaceVariant
wrapMode: Text.WordWrap
@ -135,7 +135,7 @@ Item {
}
NText {
text: "Current brightness levels for all detected monitors"
text: "Current brightness levels for all detected monitors."
font.pointSize: Style.fontSizeSmall * scaling
color: Color.mOnSurfaceVariant
wrapMode: Text.WordWrap

15
Modules/SettingsPanel/Tabs/ColorSchemeTab.qml
View file

@ -109,7 +109,7 @@ ColumnLayout {
// Use Matugen
NToggle {
label: "Use Matugen"
description: "Automatically generate colors based on your active wallpaper using Matugen"
description: "Automatically generate colors based on your active wallpaper using Matugen."
checked: Settings.data.colorSchemes.useWallpaperColors
onToggled: checked => {
Settings.data.colorSchemes.useWallpaperColors = checked
@ -140,6 +140,19 @@ ColumnLayout {
}
}
// GTK/QT theming
NToggle {
label: "Theme external apps (GTK & Qt)"
description: "Writes GTK (gtk.css) and Qt (qt6ct) themes based on your colors."
checked: Settings.data.colorSchemes.themeApps
onToggled: checked => {
Settings.data.colorSchemes.themeApps = checked
if (Settings.data.colorSchemes.useWallpaperColors) {
ColorSchemeService.changedWallpaper()
}
}
}
NDivider {
Layout.fillWidth: true
Layout.topMargin: Style.marginLarge * scaling

6
Modules/SettingsPanel/Tabs/DisplayTab.qml
View file

@ -88,7 +88,7 @@ Item {
NToggle {
label: "Bar"
description: "Enable the top bar on this monitor"
description: "Enable the top bar on this monitor."
checked: (Settings.data.bar.monitors || []).indexOf(modelData.name) !== -1
onToggled: checked => {
if (checked) {
@ -101,7 +101,7 @@ Item {
NToggle {
label: "Notifications"
description: "Enable notifications on this monitor"
description: "Enable notifications on this monitor."
checked: (Settings.data.notifications.monitors || []).indexOf(modelData.name) !== -1
onToggled: checked => {
if (checked) {
@ -116,7 +116,7 @@ Item {
NToggle {
label: "Dock"
description: "Enable the dock on this monitor"
description: "Enable the dock on this monitor."
checked: (Settings.data.dock.monitors || []).indexOf(modelData.name) !== -1
onToggled: checked => {
if (checked) {

8
Modules/SettingsPanel/Tabs/GeneralTab.qml
View file

@ -62,7 +62,7 @@ ColumnLayout {
NTextInput {
label: "Profile Picture"
description: "Your profile picture displayed in various places throughout the shell"
description: "Your profile picture displayed in various places throughout the shell."
text: Settings.data.general.avatarImage
placeholderText: "/home/user/.face"
Layout.fillWidth: true
@ -94,7 +94,7 @@ ColumnLayout {
NToggle {
label: "Show Corners"
description: "Display rounded corners on the edge of the screen"
description: "Display rounded corners on the edge of the screen."
checked: Settings.data.general.showScreenCorners
onToggled: checked => {
Settings.data.general.showScreenCorners = checked
@ -103,7 +103,7 @@ ColumnLayout {
NToggle {
label: "Dim Desktop"
description: "Dim the desktop when panels or menus are open"
description: "Dim the desktop when panels or menus are open."
checked: Settings.data.general.dimDesktop
onToggled: checked => {
Settings.data.general.dimDesktop = checked
@ -112,7 +112,7 @@ ColumnLayout {
NToggle {
label: "Auto-hide Dock"
description: "Automatically hide the dock when not in use"
description: "Automatically hide the dock when not in use."
checked: Settings.data.dock.autoHide
onToggled: checked => {
Settings.data.dock.autoHide = checked

4
Modules/SettingsPanel/Tabs/NetworkTab.qml
View file

@ -44,7 +44,7 @@ ColumnLayout {
NToggle {
label: "WiFi Enabled"
description: "Enable WiFi connectivity"
description: "Enable WiFi connectivity."
checked: Settings.data.network.wifiEnabled
onToggled: checked => {
Settings.data.network.wifiEnabled = checked
@ -54,7 +54,7 @@ ColumnLayout {
NToggle {
label: "Bluetooth Enabled"
description: "Enable Bluetooth connectivity"
description: "Enable Bluetooth connectivity."
checked: Settings.data.network.bluetoothEnabled
onToggled: checked => {
Settings.data.network.bluetoothEnabled = checked

16
Modules/SettingsPanel/Tabs/ScreenRecorderTab.qml
View file

@ -49,7 +49,7 @@ ColumnLayout {
NTextInput {
label: "Output Directory"
description: "Directory where screen recordings will be saved"
description: "Directory where screen recordings will be saved."
placeholderText: "/home/xxx/Videos"
text: Settings.data.screenRecorder.directory
onEditingFinished: {
@ -64,7 +64,7 @@ ColumnLayout {
// Show Cursor
NToggle {
label: "Show Cursor"
description: "Record mouse cursor in the video"
description: "Record mouse cursor in the video."
checked: Settings.data.screenRecorder.showCursor
onToggled: checked => {
Settings.data.screenRecorder.showCursor = checked
@ -95,7 +95,7 @@ ColumnLayout {
// Frame Rate
NComboBox {
label: "Frame Rate"
description: "Target frame rate for screen recordings (default: 60)"
description: "Target frame rate for screen recordings (default: 60)."
model: ListModel {
ListElement {
key: "30"
@ -123,7 +123,7 @@ ColumnLayout {
// Video Quality
NComboBox {
label: "Video Quality"
description: "Higher quality results in larger file sizes"
description: "Higher quality results in larger file sizes."
model: ListModel {
ListElement {
key: "medium"
@ -151,7 +151,7 @@ ColumnLayout {
// Video Codec
NComboBox {
label: "Video Codec"
description: "Different codecs offer different compression and compatibility"
description: "Different codecs offer different compression and compatibility."
model: ListModel {
ListElement {
key: "h264"
@ -183,7 +183,7 @@ ColumnLayout {
// Color Range
NComboBox {
label: "Color Range"
description: "Limited is recommended for better compatibility"
description: "Limited is recommended for better compatibility."
model: ListModel {
ListElement {
key: "limited"
@ -223,7 +223,7 @@ ColumnLayout {
// Audio Source
NComboBox {
label: "Audio Source"
description: "Audio source to capture during recording"
description: "Audio source to capture during recording."
model: ListModel {
ListElement {
key: "default_output"
@ -247,7 +247,7 @@ ColumnLayout {
// Audio Codec
NComboBox {
label: "Audio Codec"
description: "Opus is recommended for best performance and smallest audio size"
description: "Opus is recommended for best performance and smallest audio size."
model: ListModel {
ListElement {
key: "opus"

10
Modules/SettingsPanel/Tabs/TimeWeatherTab.qml
View file

@ -49,7 +49,7 @@ ColumnLayout {
NTextInput {
label: "Location name"
description: "Choose a known location near you"
description: "Choose a known location near you."
text: Settings.data.location.name
placeholderText: "Enter the location name"
Layout.fillWidth: true
@ -81,7 +81,7 @@ ColumnLayout {
NToggle {
label: "Use 12-Hour Clock"
description: "Display time in 12-hour format (AM/PM) instead of 24-hour"
description: "Display time in 12-hour format (AM/PM) instead of 24-hour."
checked: Settings.data.location.use12HourClock
onToggled: checked => {
Settings.data.location.use12HourClock = checked
@ -90,7 +90,7 @@ ColumnLayout {
NToggle {
label: "Reverse Day/Month"
description: "Display date as DD/MM instead of MM/DD"
description: "Display date as DD/MM instead of MM/DD."
checked: Settings.data.location.reverseDayMonth
onToggled: checked => {
Settings.data.location.reverseDayMonth = checked
@ -99,7 +99,7 @@ ColumnLayout {
NToggle {
label: "Show Date with Clock"
description: "Display date alongside time (e.g., 18:12 - Sat, 23 Aug)"
description: "Display date alongside time (e.g., 18:12 - Sat, 23 Aug)."
checked: Settings.data.location.showDateWithClock
onToggled: checked => {
Settings.data.location.showDateWithClock = checked
@ -128,7 +128,7 @@ ColumnLayout {
NToggle {
label: "Use Fahrenheit"
description: "Display temperature in Fahrenheit instead of Celsius"
description: "Display temperature in Fahrenheit instead of Celsius."
checked: Settings.data.location.useFahrenheit
onToggled: checked => {
Settings.data.location.useFahrenheit = checked

6
Modules/SettingsPanel/Tabs/WallpaperSelectorTab.qml
View file

@ -78,7 +78,7 @@ Item {
}
NText {
text: "Click on a wallpaper to set it as your current wallpaper"
text: "Click on a wallpaper to set it as your current wallpaper."
color: Color.mOnSurface
wrapMode: Text.WordWrap
Layout.fillWidth: true
@ -86,7 +86,7 @@ Item {
NText {
text: Settings.data.wallpaper.swww.enabled ? "Wallpapers will change with " + Settings.data.wallpaper.swww.transitionType
+ " transition" : "Wallpapers will change instantly"
+ " transition." : "Wallpapers will change instantly."
color: Color.mOnSurface
font.pointSize: Style.fontSizeSmall * scaling
visible: Settings.data.wallpaper.swww.enabled
@ -235,7 +235,7 @@ Item {
}
NText {
text: "Make sure your wallpaper directory is configured and contains image files"
text: "Make sure your wallpaper directory is configured and contains image files."
color: Color.mOnSurface
wrapMode: Text.WordWrap
horizontalAlignment: Text.AlignHCenter

16
Modules/SettingsPanel/Tabs/WallpaperTab.qml
View file

@ -54,7 +54,7 @@ ColumnLayout {
NTextInput {
label: "Wallpaper Directory"
description: "Path to your wallpaper directory"
description: "Path to your wallpaper directory."
text: Settings.data.wallpaper.directory
Layout.fillWidth: true
onEditingFinished: {
@ -86,7 +86,7 @@ ColumnLayout {
// Random Wallpaper
NToggle {
label: "Random Wallpaper"
description: "Automatically select random wallpapers from the folder"
description: "Automatically select random wallpapers from the folder."
checked: Settings.data.wallpaper.isRandom
onToggled: checked => {
Settings.data.wallpaper.isRandom = checked
@ -106,7 +106,7 @@ ColumnLayout {
}
NText {
text: "How often to change wallpapers automatically (in seconds)"
text: "How often to change wallpapers automatically (in seconds)."
font.pointSize: Style.fontSizeSmall * scaling
color: Color.mOnSurface
wrapMode: Text.WordWrap
@ -156,7 +156,7 @@ ColumnLayout {
// Use SWWW
NToggle {
label: "Use SWWW"
description: "Use SWWW daemon for advanced wallpaper management"
description: "Use SWWW daemon for advanced wallpaper management."
checked: Settings.data.wallpaper.swww.enabled
onToggled: checked => {
Settings.data.wallpaper.swww.enabled = checked
@ -173,7 +173,7 @@ ColumnLayout {
// Resize Mode
NComboBox {
label: "Resize Mode"
description: "How SWWW should resize wallpapers to fit the screen"
description: "How SWWW should resize wallpapers to fit the screen."
model: ListModel {
ListElement {
key: "no"
@ -201,7 +201,7 @@ ColumnLayout {
// Transition Type
NComboBox {
label: "Transition Type"
description: "Animation type when switching between wallpapers"
description: "Animation type when switching between wallpapers."
model: ListModel {
ListElement {
key: "none"
@ -279,7 +279,7 @@ ColumnLayout {
}
NText {
text: "Frames per second for transition animations"
text: "Frames per second for transition animations."
font.pointSize: Style.fontSizeSmall * scaling
color: Color.mOnSurface
wrapMode: Text.WordWrap
@ -318,7 +318,7 @@ ColumnLayout {
}
NText {
text: "Duration of transition animations in seconds"
text: "Duration of transition animations in seconds."
font.pointSize: Style.fontSizeSmall * scaling
color: Color.mOnSurface
wrapMode: Text.WordWrap

7
Services/ColorSchemeService.qml
View file

@ -135,7 +135,12 @@ Singleton {
Process {
id: generateColorsProcess
command: {
var cmd = ["matugen", "image", WallpaperService.currentWallpaper, "--config", Quickshell.shellDir + "/Assets/Matugen/matugen.toml"]
// Choose config based on external theming toggles
var cfg = Quickshell.shellDir + "/Assets/Matugen/matugen.toml"
if (!Settings.data.colorSchemes.themeApps) {
cfg = Quickshell.shellDir + "/Assets/Matugen/matugen.base.toml"
}
var cmd = ["matugen", "image", WallpaperService.currentWallpaper, "--config", cfg]
if (!Settings.data.colorSchemes.darkMode) {
cmd.push("--mode", "light")
} else {