refactor: move colours to separate service

29 files changed, 205 insertions, 177 deletions

diff --git a/config/Appearance.qml b/config/Appearance.qml
index 1a5f58a..24f98cf 100644
--- a/config/Appearance.qml
+++ b/config/Appearance.qml
@@ -8,62 +8,11 @@ import Qt.labs.platform
 Singleton {
     id: root
 
-    property bool light: false
-    readonly property Transparency transparency: Transparency {}
     readonly property Rounding rounding: Rounding {}
     readonly property Spacing spacing: Spacing {}
     readonly property Padding padding: Padding {}
     readonly property Font font: Font {}
     readonly property Anim anim: Anim {}
-    readonly property Colours colours: Colours {}
-
-    function alpha(c: color, layer: bool): color {
-        if (!transparency.enabled)
-            return c;
-        c = Qt.rgba(c.r, c.g, c.b, layer ? transparency.layers : transparency.base);
-        if (layer)
-            c.hsvValue = Math.max(0, Math.min(1, c.hslLightness + (light ? -0.2 : 0.2))); // TODO: edit based on colours (hue or smth)
-        return c;
-    }
-
-    function on(c: color): color {
-        if (c.hslLightness < 0.5)
-            return Qt.hsla(c.hslHue, c.hslSaturation, 0.9, 1);
-        return Qt.hsla(c.hslHue, c.hslSaturation, 0.2, 1);
-    }
-
-    FileView {
-        path: `${StandardPaths.standardLocations(StandardPaths.GenericStateLocation)[0]}/caelestia/scheme/current-mode.txt`
-        watchChanges: true
-        onFileChanged: this.reload()
-        onLoaded: root.light = this.text() === "light"
-    }
-
-    FileView {
-        readonly property list<string> colourNames: ["rosewater", "flamingo", "pink", "mauve", "red", "maroon", "peach", "yellow", "green", "teal", "sky", "sapphire", "blue", "lavender"]
-
-        path: `${StandardPaths.standardLocations(StandardPaths.GenericStateLocation)[0]}/caelestia/scheme/current.txt`
-        watchChanges: true
-        onFileChanged: this.reload()
-        onLoaded: {
-            const contents = this.text();
-            const colours = root.colours;
-
-            for (const line of contents.split("\n")) {
-                let [name, colour] = line.split(" ");
-                name = name.trim();
-                name = colourNames.includes(name) ? name : `m3${name}`;
-                if (colours.hasOwnProperty(name))
-                    colours[name] = `#${colour.trim()}`;
-            }
-        }
-    }
-
-    component Transparency: QtObject {
-        readonly property bool enabled: false
-        readonly property real base: 0.78
-        readonly property real layers: 0.58
-    }
 
     component Rounding: QtObject {
         readonly property int small: 12
@@ -128,76 +77,4 @@ Singleton {
         readonly property AnimCurves curves: AnimCurves {}
         readonly property AnimDurations durations: AnimDurations {}
     }
-
-    component Colours: QtObject {
-        property color m3primary_paletteKeyColor: "#7870AB"
-        property color m3secondary_paletteKeyColor: "#78748A"
-        property color m3tertiary_paletteKeyColor: "#976A7D"
-        property color m3neutral_paletteKeyColor: "#79767D"
-        property color m3neutral_variant_paletteKeyColor: "#797680"
-        property color m3background: "#141318"
-        property color m3onBackground: "#E5E1E9"
-        property color m3surface: "#141318"
-        property color m3surfaceDim: "#141318"
-        property color m3surfaceBright: "#3A383E"
-        property color m3surfaceContainerLowest: "#0E0D13"
-        property color m3surfaceContainerLow: "#1C1B20"
-        property color m3surfaceContainer: "#201F25"
-        property color m3surfaceContainerHigh: "#2B292F"
-        property color m3surfaceContainerHighest: "#35343A"
-        property color m3onSurface: "#E5E1E9"
-        property color m3surfaceVariant: "#48454E"
-        property color m3onSurfaceVariant: "#C9C5D0"
-        property color m3inverseSurface: "#E5E1E9"
-        property color m3inverseOnSurface: "#312F36"
-        property color m3outline: "#938F99"
-        property color m3outlineVariant: "#48454E"
-        property color m3shadow: "#000000"
-        property color m3scrim: "#000000"
-        property color m3surfaceTint: "#C8BFFF"
-        property color m3primary: "#C8BFFF"
-        property color m3onPrimary: "#30285F"
-        property color m3primaryContainer: "#473F77"
-        property color m3onPrimaryContainer: "#E5DEFF"
-        property color m3inversePrimary: "#5F5791"
-        property color m3secondary: "#C9C3DC"
-        property color m3onSecondary: "#312E41"
-        property color m3secondaryContainer: "#484459"
-        property color m3onSecondaryContainer: "#E5DFF9"
-        property color m3tertiary: "#ECB8CD"
-        property color m3onTertiary: "#482536"
-        property color m3tertiaryContainer: "#B38397"
-        property color m3onTertiaryContainer: "#000000"
-        property color m3error: "#EA8DC1"
-        property color m3onError: "#690005"
-        property color m3errorContainer: "#93000A"
-        property color m3onErrorContainer: "#FFDAD6"
-        property color m3primaryFixed: "#E5DEFF"
-        property color m3primaryFixedDim: "#C8BFFF"
-        property color m3onPrimaryFixed: "#1B1149"
-        property color m3onPrimaryFixedVariant: "#473F77"
-        property color m3secondaryFixed: "#E5DFF9"
-        property color m3secondaryFixedDim: "#C9C3DC"
-        property color m3onSecondaryFixed: "#1C192B"
-        property color m3onSecondaryFixedVariant: "#484459"
-        property color m3tertiaryFixed: "#FFD8E7"
-        property color m3tertiaryFixedDim: "#ECB8CD"
-        property color m3onTertiaryFixed: "#301121"
-        property color m3onTertiaryFixedVariant: "#613B4C"
-
-        property color rosewater: "#B8C4FF"
-        property color flamingo: "#DBB9F8"
-        property color pink: "#F3B3E3"
-        property color mauve: "#D0BDFE"
-        property color red: "#F8B3D1"
-        property color maroon: "#F6B2DA"
-        property color peach: "#E4B7F4"
-        property color yellow: "#C3C0FF"
-        property color green: "#ADC6FF"
-        property color teal: "#D4BBFC"
-        property color sky: "#CBBEFF"
-        property color sapphire: "#BDC2FF"
-        property color blue: "#C7BFFF"
-        property color lavender: "#EAB5ED"
-    }
 }
diff --git a/modules/background/Border.qml b/modules/background/Border.qml
index a11c565..e944299 100644
--- a/modules/background/Border.qml
+++ b/modules/background/Border.qml
@@ -1,4 +1,5 @@
 import "root:/widgets"
+import "root:/services"
 import "root:/config"
 import Quickshell
 import QtQuick
@@ -33,7 +34,7 @@ Scope {
             id: rect
 
             anchors.fill: parent
-            color: Appearance.alpha(Appearance.colours.m3surface, false)
+            color: Colours.alpha(Colours.palette.m3surface, false)
             visible: false
         }
 
diff --git a/modules/bar/Panel.qml b/modules/bar/Panel.qml
index 741fa13..9dd5797 100644
--- a/modules/bar/Panel.qml
+++ b/modules/bar/Panel.qml
@@ -1,4 +1,5 @@
 import "root:/widgets"
+import "root:/services"
 import "root:/config"
 import "components"
 import "components/workspaces"
@@ -16,7 +17,7 @@ StyledRect {
     }
 
     vertical: BarConfig.vertical
-    color: Appearance.alpha(Appearance.colours.m3surface, false)
+    color: Colours.alpha(Colours.palette.m3surface, false)
     anchors.fill: parent
 
     BoxLayout {
@@ -28,10 +29,10 @@ StyledRect {
             spacing: 0
 
             Module {
-                color: Appearance.colours.mauve
+                color: Colours.palette.mauve
 
                 OsIcon {
-                    color: Appearance.on(Appearance.colours.mauve)
+                    color: Colours.on(Colours.palette.mauve)
 
                     anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
                     anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
@@ -39,10 +40,10 @@ StyledRect {
             }
 
             Module {
-                color: Appearance.colours.pink
+                color: Colours.palette.pink
 
                 ActiveWindow {
-                    colour: Appearance.on(Appearance.colours.pink)
+                    colour: Colours.on(Colours.palette.pink)
 
                     anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
                     anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
@@ -76,10 +77,10 @@ StyledRect {
         }
 
         Module {
-            color: Appearance.colours.green
+            color: Colours.palette.green
 
             Clock {
-                colour: Appearance.on(Appearance.colours.green)
+                colour: Colours.on(Colours.palette.green)
 
                 anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
                 anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
@@ -87,10 +88,10 @@ StyledRect {
         }
 
         Module {
-            color: Appearance.colours.yellow
+            color: Colours.palette.yellow
 
             Tray {
-                colour: Appearance.on(Appearance.colours.yellow)
+                colour: Colours.on(Colours.palette.yellow)
 
                 anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
                 anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
@@ -98,10 +99,10 @@ StyledRect {
         }
 
         Module {
-            color: Appearance.colours.peach
+            color: Colours.palette.peach
 
             StatusIcons {
-                colour: Appearance.on(Appearance.colours.peach)
+                colour: Colours.on(Colours.palette.peach)
 
                 anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
                 anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
@@ -109,7 +110,7 @@ StyledRect {
         }
 
         Module {
-            color: Appearance.colours.m3error
+            color: Colours.palette.m3error
 
             Layout.maximumWidth: BarConfig.sizes.height
             Layout.maximumHeight: BarConfig.sizes.height
@@ -118,7 +119,7 @@ StyledRect {
                 x: (BarConfig.sizes.height - width) / 2
                 y: (BarConfig.sizes.height - height) / 2
 
-                color: Appearance.colours.m3onError
+                color: Colours.palette.m3onError
 
                 anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
                 anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
diff --git a/modules/bar/Pills.qml b/modules/bar/Pills.qml
index bb9d08f..7af9d6d 100644
--- a/modules/bar/Pills.qml
+++ b/modules/bar/Pills.qml
@@ -125,7 +125,7 @@ BoxLayout {
     }
 
     component Pill: PaddedRect {
-        color: Appearance.alpha(Appearance.colours.m3surface, false)
+        color: Colours.alpha(Colours.palette.m3surface, false)
         radius: Appearance.rounding.full
         padding: BarConfig.vertical ? [Appearance.padding.large, 0] : [0, Appearance.padding.large]
 
diff --git a/modules/bar/components/ActiveWindow.qml b/modules/bar/components/ActiveWindow.qml
index de568dd..eeea3ac 100644
--- a/modules/bar/components/ActiveWindow.qml
+++ b/modules/bar/components/ActiveWindow.qml
@@ -9,7 +9,7 @@ import QtQuick
 StyledRect {
     id: root
 
-    property color colour: Appearance.colours.pink
+    property color colour: Colours.palette.pink
 
     animate: true
     clip: true
diff --git a/modules/bar/components/Clock.qml b/modules/bar/components/Clock.qml
index f3e3701..3397222 100644
--- a/modules/bar/components/Clock.qml
+++ b/modules/bar/components/Clock.qml
@@ -6,7 +6,7 @@ import QtQuick
 StyledRect {
     id: root
 
-    property color colour: Appearance.colours.peach
+    property color colour: Colours.palette.peach
 
     MaterialIcon {
         id: icon
diff --git a/modules/bar/components/OsIcon.qml b/modules/bar/components/OsIcon.qml
index 0daa945..ce7d51b 100644
--- a/modules/bar/components/OsIcon.qml
+++ b/modules/bar/components/OsIcon.qml
@@ -1,4 +1,5 @@
 import "root:/widgets"
+import "root:/services"
 import "root:/utils"
 import "root:/config"
 
@@ -6,5 +7,5 @@ StyledText {
     text: Icons.osIcon
     font.pointSize: Appearance.font.size.smaller
     font.family: Appearance.font.family.mono
-    color: Appearance.colours.yellow
+    color: Colours.palette.yellow
 }
diff --git a/modules/bar/components/Power.qml b/modules/bar/components/Power.qml
index 1124a55..7584747 100644
--- a/modules/bar/components/Power.qml
+++ b/modules/bar/components/Power.qml
@@ -1,9 +1,10 @@
 import "root:/widgets"
+import "root:/services"
 import "root:/config"
 
 MaterialIcon {
     text: "power_settings_new"
-    color: Appearance.colours.m3error
+    color: Colours.palette.m3error
     font.bold: true
     font.pointSize: Appearance.font.size.normal
 }
diff --git a/modules/bar/components/StatusIcons.qml b/modules/bar/components/StatusIcons.qml
index 2721cc9..cb5dc58 100644
--- a/modules/bar/components/StatusIcons.qml
+++ b/modules/bar/components/StatusIcons.qml
@@ -8,7 +8,7 @@ import QtQuick
 StyledRect {
     id: root
 
-    property color colour: Appearance.colours.rosewater
+    property color colour: Colours.palette.rosewater
 
     animate: true
     clip: true
diff --git a/modules/bar/components/Tray.qml b/modules/bar/components/Tray.qml
index 98a7dfe..a635b76 100644
--- a/modules/bar/components/Tray.qml
+++ b/modules/bar/components/Tray.qml
@@ -1,4 +1,5 @@
 import "root:/widgets"
+import "root:/services"
 import "root:/config"
 import Quickshell.Services.SystemTray
 import QtQuick
@@ -6,7 +7,7 @@ import QtQuick
 StyledRect {
     id: root
 
-    property color colour: Appearance.colours.lavender
+    property color colour: Colours.palette.lavender
 
     animate: true
     clip: true
diff --git a/modules/bar/components/workspaces/ActiveIndicator.qml b/modules/bar/components/workspaces/ActiveIndicator.qml
index 2d43f19..a9d3e60 100644
--- a/modules/bar/components/workspaces/ActiveIndicator.qml
+++ b/modules/bar/components/workspaces/ActiveIndicator.qml
@@ -33,7 +33,7 @@ Rectangle {
 
         visible: false
         anchors.fill: parent
-        color: Appearance.on(root.color)
+        color: Colours.on(root.color)
 
         Behavior on color {
             ColorAnimation {
diff --git a/modules/bar/components/workspaces/OccupiedBg.qml b/modules/bar/components/workspaces/OccupiedBg.qml
index ccbc75f..ae9c333 100644
--- a/modules/bar/components/workspaces/OccupiedBg.qml
+++ b/modules/bar/components/workspaces/OccupiedBg.qml
@@ -1,6 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import "root:/widgets"
+import "root:/services"
 import "root:/config"
 import Quickshell
 import QtQuick
@@ -51,7 +52,7 @@ Item {
             readonly property Workspace start: root.workspaces[modelData.start - 1 - root.groupOffset] ?? null
             readonly property Workspace end: root.workspaces[modelData.end - 1 - root.groupOffset] ?? null
 
-            color: Appearance.alpha(Appearance.colours.m3surfaceContainerHigh, true)
+            color: Colours.alpha(Colours.palette.m3surfaceContainerHigh, true)
             radius: BarConfig.workspaces.rounded ? Appearance.rounding.full : 0
 
             x: start?.x ?? 0
diff --git a/modules/bar/components/workspaces/Workspace.qml b/modules/bar/components/workspaces/Workspace.qml
index 9edc8e4..7f4bc68 100644
--- a/modules/bar/components/workspaces/Workspace.qml
+++ b/modules/bar/components/workspaces/Workspace.qml
@@ -34,7 +34,7 @@ Item {
 
         animate: true
         text: Hyprland.activeWsId === root.ws ? activeLabel : root.isOccupied ? occupiedLabel : label
-        color: BarConfig.workspaces.occupiedBg || root.isOccupied || Hyprland.activeWsId === root.ws ? Appearance.colours.m3onSurface : Appearance.colours.m3outlineVariant
+        color: BarConfig.workspaces.occupiedBg || root.isOccupied || Hyprland.activeWsId === root.ws ? Colours.palette.m3onSurface : Colours.palette.m3outlineVariant
         horizontalAlignment: StyledText.AlignHCenter
         verticalAlignment: StyledText.AlignVCenter
 
@@ -63,7 +63,7 @@ Item {
                     required property Hyprland.Client modelData
 
                     text: Icons.getAppCategoryIcon(modelData.wmClass, "terminal")
-                    color: Appearance.colours.m3onSurfaceVariant
+                    color: Colours.palette.m3onSurfaceVariant
                 }
             }
         }
diff --git a/modules/bar/components/workspaces/Workspaces.qml b/modules/bar/components/workspaces/Workspaces.qml
index b2def7e..738f679 100644
--- a/modules/bar/components/workspaces/Workspaces.qml
+++ b/modules/bar/components/workspaces/Workspaces.qml
@@ -9,7 +9,7 @@ Item {
     id: root
 
     property alias vertical: layout.vertical
-    property color colour: Appearance.colours.mauve
+    property color colour: Colours.palette.mauve
 
     readonly property list<Workspace> workspaces: layout.children.filter(c => c.isWorkspace).sort((w1, w2) => w1.ws - w2.ws)
     readonly property var occupied: Hyprland.workspaces.values.reduce((acc, curr) => {
diff --git a/modules/launcher/ActionItem.qml b/modules/launcher/ActionItem.qml
index f23cf0a..f4f7e2f 100644
--- a/modules/launcher/ActionItem.qml
+++ b/modules/launcher/ActionItem.qml
@@ -1,6 +1,6 @@
 import "root:/widgets"
+import "root:/services"
 import "root:/config"
-import Quickshell
 import QtQuick
 
 PaddedRect {
@@ -50,7 +50,7 @@ PaddedRect {
         StyledText {
             text: root.modelData.desc
             font.pointSize: Appearance.font.size.small
-            color: Appearance.alpha(Appearance.colours.m3outline, true)
+            color: Colours.alpha(Colours.palette.m3outline, true)
 
             elide: Text.ElideRight
             width: root.width - icon.width - Appearance.rounding.normal * 2
diff --git a/modules/launcher/AppItem.qml b/modules/launcher/AppItem.qml
index ea67682..dd0682f 100644
--- a/modules/launcher/AppItem.qml
+++ b/modules/launcher/AppItem.qml
@@ -1,4 +1,5 @@
 import "root:/widgets"
+import "root:/services"
 import "root:/config"
 import Quickshell
 import Quickshell.Widgets
@@ -52,7 +53,7 @@ PaddedRect {
         StyledText {
             text: root.modelData.comment || root.modelData.genericName || root.modelData.name
             font.pointSize: Appearance.font.size.small
-            color: Appearance.alpha(Appearance.colours.m3outline, true)
+            color: Colours.alpha(Colours.palette.m3outline, true)
 
             elide: Text.ElideRight
             width: root.width - icon.width - Appearance.rounding.normal * 2
diff --git a/modules/launcher/AppList.qml b/modules/launcher/AppList.qml
index 5dfdf8b..dc58402 100644
--- a/modules/launcher/AppList.qml
+++ b/modules/launcher/AppList.qml
@@ -39,7 +39,7 @@ ListView {
 
     highlight: StyledRect {
         radius: Appearance.rounding.normal
-        color: Appearance.alpha(Appearance.colours.m3surfaceContainerHigh, true)
+        color: Colours.alpha(Colours.palette.m3surfaceContainerHigh, true)
     }
 
     delegate: isAction ? actionItem : appItem
diff --git a/modules/launcher/Background.qml b/modules/launcher/Background.qml
index 7bffd26..7dce14a 100644
--- a/modules/launcher/Background.qml
+++ b/modules/launcher/Background.qml
@@ -1,3 +1,4 @@
+import "root:/services"
 import "root:/config"
 import QtQuick
 import QtQuick.Shapes
@@ -12,11 +13,11 @@ Shape {
     readonly property real wrapperHeight: realWrapperHeight - 1 // Pixel issues :sob:
 
     preferredRendererType: Shape.CurveRenderer
-    opacity: Appearance.transparency.enabled ? Appearance.transparency.base : 1
+    opacity: Colours.transparency.enabled ? Colours.transparency.base : 1
 
     ShapePath {
         strokeWidth: -1
-        fillColor: Appearance.colours.m3surface
+        fillColor: Colours.palette.m3surface
 
         startY: root.wrapperHeight
 
diff --git a/modules/launcher/Content.qml b/modules/launcher/Content.qml
index 41904f7..6ecced5 100644
--- a/modules/launcher/Content.qml
+++ b/modules/launcher/Content.qml
@@ -5,7 +5,6 @@ import "root:/services"
 import "root:/config"
 import Quickshell
 import QtQuick
-import QtQuick.Controls
 
 Item {
     id: root
@@ -24,7 +23,7 @@ Item {
     StyledRect {
         id: listWrapper
 
-        color: Appearance.alpha(Appearance.colours.m3surfaceContainer, true)
+        color: Colours.alpha(Colours.palette.m3surfaceContainer, true)
         radius: root.rounding
 
         implicitWidth: list.width + root.padding * 2
@@ -61,7 +60,7 @@ Item {
         placeholderText: qsTr(`Type "${LauncherConfig.actionPrefix}" for commands`)
 
         background: StyledRect {
-            color: Appearance.alpha(Appearance.colours.m3surfaceContainer, true)
+            color: Colours.alpha(Colours.palette.m3surfaceContainer, true)
             radius: root.rounding
         }
 
diff --git a/modules/launcher/ContentList.qml b/modules/launcher/ContentList.qml
index 253bcf0..5f8c783 100644
--- a/modules/launcher/ContentList.qml
+++ b/modules/launcher/ContentList.qml
@@ -139,7 +139,7 @@ Item {
             id: icon
 
             text: "manage_search"
-            color: Appearance.colours.m3onSurfaceVariant
+            color: Colours.palette.m3onSurfaceVariant
             font.pointSize: Appearance.font.size.extraLarge
 
             anchors.verticalCenter: parent.verticalCenter
@@ -153,7 +153,7 @@ Item {
             anchors.verticalCenter: parent.verticalCenter
 
             text: qsTr("No results")
-            color: Appearance.colours.m3onSurfaceVariant
+            color: Colours.palette.m3onSurfaceVariant
             font.pointSize: Appearance.font.size.larger
             font.weight: 500
         }
diff --git a/modules/launcher/WallpaperItem.qml b/modules/launcher/WallpaperItem.qml
index c0b91d4..22f8eda 100644
--- a/modules/launcher/WallpaperItem.qml
+++ b/modules/launcher/WallpaperItem.qml
@@ -60,7 +60,7 @@ StyledRect {
         opacity: root.PathView.isCurrentItem ? 0.7 : 0
         anchors.fill: mask
         radius: mask.radius
-        color: Appearance.colours.m3shadow
+        color: Colours.palette.m3shadow
         blur: 10
         spread: 3
 
diff --git a/modules/osd/Background.qml b/modules/osd/Background.qml
index d8a35b0..a24e3fb 100644
--- a/modules/osd/Background.qml
+++ b/modules/osd/Background.qml
@@ -1,3 +1,4 @@
+import "root:/services"
 import "root:/config"
 import QtQuick
 import QtQuick.Shapes
@@ -12,11 +13,11 @@ Shape {
     readonly property real wrapperWidth: realWrapperWidth - 1 // Pixel issues :sob:
 
     preferredRendererType: Shape.CurveRenderer
-    opacity: Appearance.transparency.enabled ? Appearance.transparency.base : 1
+    opacity: Colours.transparency.enabled ? Colours.transparency.base : 1
 
     ShapePath {
         strokeWidth: -1
-        fillColor: Appearance.colours.m3surface
+        fillColor: Colours.palette.m3surface
 
         startX: root.wrapperWidth
 
diff --git a/services/Colours.qml b/services/Colours.qml
new file mode 100644
index 0000000..27e0afd
--- /dev/null
+++ b/services/Colours.qml
@@ -0,0 +1,138 @@
+pragma Singleton
+
+import "root:/config"
+import Quickshell
+import Quickshell.Io
+import QtQuick
+import Qt.labs.platform
+
+Singleton {
+    id: root
+
+    readonly property list<string> colourNames: ["rosewater", "flamingo", "pink", "mauve", "red", "maroon", "peach", "yellow", "green", "teal", "sky", "sapphire", "blue", "lavender"]
+
+    property bool showPreview
+    property bool light
+    readonly property Colours palette: showPreview ? preview : current
+    readonly property Colours current: Colours {}
+    readonly property Colours preview: Colours {}
+    readonly property Transparency transparency: Transparency {}
+
+    function alpha(c: color, layer: bool): color {
+        if (!transparency.enabled)
+            return c;
+        c = Qt.rgba(c.r, c.g, c.b, layer ? transparency.layers : transparency.base);
+        if (layer)
+            c.hsvValue = Math.max(0, Math.min(1, c.hslLightness + (light ? -0.2 : 0.2))); // TODO: edit based on colours (hue or smth)
+        return c;
+    }
+
+    function on(c: color): color {
+        if (c.hslLightness < 0.5)
+            return Qt.hsla(c.hslHue, c.hslSaturation, 0.9, 1);
+        return Qt.hsla(c.hslHue, c.hslSaturation, 0.2, 1);
+    }
+
+    function load(data: string, preview: bool): void {
+        const colours = preview ? preview : current;
+        for (const line of data.trim().split("\n")) {
+            let [name, colour] = line.split(" ");
+            name = name.trim();
+            name = colourNames.includes(name) ? name : `m3${name}`;
+            if (colours.hasOwnProperty(name))
+                colours[name] = `#${colour.trim()}`;
+        }
+    }
+
+    FileView {
+        path: `${StandardPaths.standardLocations(StandardPaths.GenericStateLocation)[0]}/caelestia/scheme/current-mode.txt`
+        watchChanges: true
+        onFileChanged: reload()
+        onLoaded: root.light = text() === "light"
+    }
+
+    FileView {
+        path: `${StandardPaths.standardLocations(StandardPaths.GenericStateLocation)[0]}/caelestia/scheme/current.txt`
+        watchChanges: true
+        onFileChanged: reload()
+        onLoaded: root.load(text(), false)
+    }
+
+    component Transparency: QtObject {
+        readonly property bool enabled: false
+        readonly property real base: 0.78
+        readonly property real layers: 0.58
+    }
+
+    component Colours: QtObject {
+        property color m3primary_paletteKeyColor: "#7870AB"
+        property color m3secondary_paletteKeyColor: "#78748A"
+        property color m3tertiary_paletteKeyColor: "#976A7D"
+        property color m3neutral_paletteKeyColor: "#79767D"
+        property color m3neutral_variant_paletteKeyColor: "#797680"
+        property color m3background: "#141318"
+        property color m3onBackground: "#E5E1E9"
+        property color m3surface: "#141318"
+        property color m3surfaceDim: "#141318"
+        property color m3surfaceBright: "#3A383E"
+        property color m3surfaceContainerLowest: "#0E0D13"
+        property color m3surfaceContainerLow: "#1C1B20"
+        property color m3surfaceContainer: "#201F25"
+        property color m3surfaceContainerHigh: "#2B292F"
+        property color m3surfaceContainerHighest: "#35343A"
+        property color m3onSurface: "#E5E1E9"
+        property color m3surfaceVariant: "#48454E"
+        property color m3onSurfaceVariant: "#C9C5D0"
+        property color m3inverseSurface: "#E5E1E9"
+        property color m3inverseOnSurface: "#312F36"
+        property color m3outline: "#938F99"
+        property color m3outlineVariant: "#48454E"
+        property color m3shadow: "#000000"
+        property color m3scrim: "#000000"
+        property color m3surfaceTint: "#C8BFFF"
+        property color m3primary: "#C8BFFF"
+        property color m3onPrimary: "#30285F"
+        property color m3primaryContainer: "#473F77"
+        property color m3onPrimaryContainer: "#E5DEFF"
+        property color m3inversePrimary: "#5F5791"
+        property color m3secondary: "#C9C3DC"
+        property color m3onSecondary: "#312E41"
+        property color m3secondaryContainer: "#484459"
+        property color m3onSecondaryContainer: "#E5DFF9"
+        property color m3tertiary: "#ECB8CD"
+        property color m3onTertiary: "#482536"
+        property color m3tertiaryContainer: "#B38397"
+        property color m3onTertiaryContainer: "#000000"
+        property color m3error: "#EA8DC1"
+        property color m3onError: "#690005"
+        property color m3errorContainer: "#93000A"
+        property color m3onErrorContainer: "#FFDAD6"
+        property color m3primaryFixed: "#E5DEFF"
+        property color m3primaryFixedDim: "#C8BFFF"
+        property color m3onPrimaryFixed: "#1B1149"
+        property color m3onPrimaryFixedVariant: "#473F77"
+        property color m3secondaryFixed: "#E5DFF9"
+        property color m3secondaryFixedDim: "#C9C3DC"
+        property color m3onSecondaryFixed: "#1C192B"
+        property color m3onSecondaryFixedVariant: "#484459"
+        property color m3tertiaryFixed: "#FFD8E7"
+        property color m3tertiaryFixedDim: "#ECB8CD"
+        property color m3onTertiaryFixed: "#301121"
+        property color m3onTertiaryFixedVariant: "#613B4C"
+
+        property color rosewater: "#B8C4FF"
+        property color flamingo: "#DBB9F8"
+        property color pink: "#F3B3E3"
+        property color mauve: "#D0BDFE"
+        property color red: "#F8B3D1"
+        property color maroon: "#F6B2DA"
+        property color peach: "#E4B7F4"
+        property color yellow: "#C3C0FF"
+        property color green: "#ADC6FF"
+        property color teal: "#D4BBFC"
+        property color sky: "#CBBEFF"
+        property color sapphire: "#BDC2FF"
+        property color blue: "#C7BFFF"
+        property color lavender: "#EAB5ED"
+    }
+}
diff --git a/widgets/LayerShadow.qml b/widgets/LayerShadow.qml
index 1694a8e..b5f84c9 100644
--- a/widgets/LayerShadow.qml
+++ b/widgets/LayerShadow.qml
@@ -1,9 +1,9 @@
-import "root:/config"
+import "root:/services"
 import Qt5Compat.GraphicalEffects
 
 DropShadow {
     anchors.fill: source
-    color: Qt.alpha(Appearance.colours.m3shadow, 0.7)
+    color: Qt.alpha(Colours.palette.m3shadow, 0.7)
     radius: 10
     samples: 1 + radius * 2
 }
diff --git a/widgets/StateLayer.qml b/widgets/StateLayer.qml
index e1a7b61..4508453 100644
--- a/widgets/StateLayer.qml
+++ b/widgets/StateLayer.qml
@@ -1,4 +1,5 @@
 import "root:/widgets"
+import "root:/services"
 import "root:/config"
 import QtQuick
 
@@ -10,7 +11,7 @@ Rectangle {
 
     anchors.fill: parent
 
-    color: Appearance.colours.m3onSurface
+    color: Colours.palette.m3onSurface
     opacity: mouse.pressed ? 0.1 : mouse.hovered ? 0.08 : 0
 
     MouseArea {
diff --git a/widgets/StyledScrollBar.qml b/widgets/StyledScrollBar.qml
index 73b7451..a52bbd2 100644
--- a/widgets/StyledScrollBar.qml
+++ b/widgets/StyledScrollBar.qml
@@ -1,3 +1,4 @@
+import "root:/services"
 import "root:/config"
 import QtQuick
 import QtQuick.Controls
@@ -8,7 +9,7 @@ ScrollBar {
     contentItem: StyledRect {
         opacity: root.pressed ? 0.8 : root.policy === ScrollBar.AlwaysOn || (root.active && root.size < 1) ? 0.6 : 0
         radius: Appearance.rounding.full
-        color: Appearance.colours.m3secondary
+        color: Colours.palette.m3secondary
 
         Behavior on opacity {
             NumberAnimation {
@@ -23,7 +24,7 @@ ScrollBar {
         implicitWidth: 10
         opacity: root.policy === ScrollBar.AlwaysOn || (root.active && root.size < 1) ? 0.4 : 0
         radius: Appearance.rounding.full
-        color: Appearance.colours.m3surfaceContainerLow
+        color: Colours.palette.m3surfaceContainerLow
 
         Behavior on opacity {
             NumberAnimation {
diff --git a/widgets/StyledText.qml b/widgets/StyledText.qml
index f95414f..9e4be48 100644
--- a/widgets/StyledText.qml
+++ b/widgets/StyledText.qml
@@ -1,5 +1,6 @@
 pragma ComponentBehavior: Bound
 
+import "root:/services"
 import "root:/config"
 import QtQuick
 
@@ -11,7 +12,7 @@ Text {
     property int animateDuration: Appearance.anim.durations.normal
 
     renderType: Text.NativeRendering
-    color: Appearance.colours.m3onSurface
+    color: Colours.palette.m3onSurface
     font.family: Appearance.font.family.sans
     font.pointSize: Appearance.font.size.smaller
 
diff --git a/widgets/StyledTextField.qml b/widgets/StyledTextField.qml
index cb1ce83..1209ec1 100644
--- a/widgets/StyledTextField.qml
+++ b/widgets/StyledTextField.qml
@@ -1,5 +1,6 @@
 pragma ComponentBehavior: Bound
 
+import "root:/services"
 import "root:/config"
 import QtQuick
 import QtQuick.Controls
@@ -7,8 +8,8 @@ import QtQuick.Controls
 TextField {
     id: root
 
-    color: Appearance.colours.m3onSurface
-    placeholderTextColor: Appearance.colours.m3outline
+    color: Colours.palette.m3onSurface
+    placeholderTextColor: Colours.palette.m3outline
     font.family: Appearance.font.family.sans
     font.pointSize: Appearance.font.size.smaller
 
@@ -18,7 +19,7 @@ TextField {
         property bool disableBlink
 
         implicitWidth: 2
-        color: Appearance.colours.m3primary
+        color: Colours.palette.m3primary
         radius: Appearance.rounding.normal
         onXChanged: {
             opacity = 1;
diff --git a/widgets/VerticalSlider.qml b/widgets/VerticalSlider.qml
index 1dbe3f2..f944da8 100644
--- a/widgets/VerticalSlider.qml
+++ b/widgets/VerticalSlider.qml
@@ -1,4 +1,5 @@
 import "root:/widgets"
+import "root:/services"
 import "root:/config"
 import QtQuick
 import QtQuick.Controls
@@ -12,7 +13,7 @@ Slider {
     orientation: Qt.Vertical
 
     background: StyledRect {
-        color: Appearance.alpha(Appearance.colours.m3surfaceContainer, true)
+        color: Colours.alpha(Colours.palette.m3surfaceContainer, true)
         radius: Appearance.rounding.full
 
         StyledRect {
@@ -22,7 +23,7 @@ Slider {
             y: root.handle.y
             implicitHeight: parent.height - y
 
-            color: Appearance.alpha(Appearance.colours.m3secondary, true)
+            color: Colours.alpha(Colours.palette.m3secondary, true)
             radius: Appearance.rounding.full
         }
     }
@@ -39,7 +40,7 @@ Slider {
         RectangularShadow {
             anchors.fill: parent
             radius: rect.radius
-            color: Appearance.colours.m3shadow
+            color: Colours.palette.m3shadow
             blur: 5
             spread: 0
         }
@@ -49,7 +50,7 @@ Slider {
 
             anchors.fill: parent
 
-            color: Appearance.alpha(Appearance.colours.m3inverseSurface, true)
+            color: Colours.alpha(Colours.palette.m3inverseSurface, true)
             radius: Appearance.rounding.full
 
             MaterialIcon {
@@ -57,7 +58,7 @@ Slider {
 
                 animate: true
                 text: root.icon
-                color: Appearance.colours.m3inverseOnSurface
+                color: Colours.palette.m3inverseOnSurface
                 anchors.centerIn: parent
 
                 states: State {