add styled slider finally

modules/applets/VolPopup.qml

@@ -78,9 +78,8 @@ Rectangle {
                             }
                         }
                     }
-                    Slider {
+                    StyledSlider {
                         Layout.rightMargin: 10
-
                         focusPolicy: Qt.NoFocus
                         value: audioDelContainer.modelData.audio.volume
                         from: 0

modules/bar/Bar.qml

@@ -23,7 +23,7 @@ Variants {
         margins.left: Config.cfg.bar.floating ? 10 : 0
         margins.right: Config.cfg.bar.floating ? 10 : 0
         Rectangle {
-            color: Colors.c.base00
+            color: Colors.c.base01
             radius: Config.cfg.bar.floating ? Config.cfg.appearance.rounding : 0
 	    anchors.fill: parent
 	    implicitHeight: parent.height

settings/settings.json

@@ -1,7 +1,7 @@
 {
     "appearance": {
         "accent": "base0D",
-        "currentTheme": "base16-tokyo-night-dark.json",
+        "currentTheme": "base16-rose-pine-moon.json",
         "font": "Inter",
         "fontSize": 14,
         "iconSize": 16,
@@ -14,6 +14,6 @@
     },
     "wallpaper": {
         "wallDir": "/home/lucy/.walls/",
-        "wallpaper": "/home/lucy/.walls/faris.png"
+        "wallpaper": "/home/lucy/.walls/lain_room.png"
     }
 }

widgets/BarComponent.qml

@@ -4,7 +4,7 @@ import qs
 import qs.settings
 
 Rectangle {
-    property color base: Qt.rgba(Colors.accent.r, Colors.accent.g, Colors.accent.b, active ? 0.5 : 0.15)
+    property color base: Qt.rgba(Colors.accent.r, Colors.accent.g, Colors.accent.b, active ? 0.3 : 0.17)
     property bool active: false
     color: base
     implicitHeight: Config.cfg.bar.height - 8

widgets/StyledSlider.qml

@@ -0,0 +1,36 @@
+import QtQuick
+import QtQuick.Controls.Basic
+import qs.settings
+import qs
+
+Slider {
+    id: control
+    value: 0.5
+
+    background: Rectangle {
+        x: control.leftPadding
+        y: control.topPadding + control.availableHeight / 2 - height / 2
+        implicitWidth: 200
+        implicitHeight: 2
+        width: control.availableWidth
+        height: implicitHeight
+        radius: 2
+        color: Colors.c.base01
+
+        Rectangle {
+            width: control.visualPosition * parent.width
+            height: parent.height
+            color: Colors.c.base03
+            radius: Config.cfg.appearance.rounding
+        }
+    }
+
+    handle: Rectangle {
+        x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
+        y: control.topPadding + control.availableHeight / 2 - height / 2
+        implicitWidth: Config.cfg.appearance.iconSize
+        implicitHeight: Config.cfg.appearance.iconSize
+        radius: Config.cfg.appearance.rounding
+        color: control.pressed ? Colors.c.base0D : Colors.c.base04
+    }
+}