Refactor out some configs

configs/hyprland.conf

@@ -0,0 +1,127 @@
+# Set environment variables to force wayland
+env = XCURSOR_SIZE,24
+env = GDK_BACKEND,wayland,x11
+env = QT_QPA_PLATFORM,wayland;xcb
+env = SDL_VIDEODRIVER,wayland
+env = CLUTTER_BACKEND,wayland
+input {
+  kb_layout = us
+  kb_variant =
+  kb_model =
+  kb_options =
+  kb_rules =
+  follow_mouse = 1
+}
+
+general {
+  # See https://wiki.hyprland.org/Configuring/Variables/ for more
+  gaps_in = 5
+  gaps_out = 10
+  border_size = 3
+  col.active_border = rgba(3fc5b7ee) rgba(70b433ee) 45deg
+  col.inactive_border = rgba(252525aa)
+  layout = dwindle
+}
+decoration {
+  rounding = 10
+  blur = true
+  blur_size = 3
+  blur_passes = 1
+  blur_new_optimizations = true
+  drop_shadow = true
+  shadow_range = 4
+  shadow_render_power = 3
+  col.shadow = rgba(181818ee)
+}
+
+animations {
+  enabled = true;
+  bezier = myBezier, 0.05, 0.9, 0.1, 1.05
+  animation = windows, 1, 7, myBezier
+  animation = windowsOut, 1, 7, default, popin 80%
+  animation = border, 1, 10, default
+  animation = borderangle, 1, 8, default
+  animation = fade, 1, 7, default
+  animation = workspaces, 1, 6, default
+}
+
+dwindle {
+  # See https://wiki.hyprland.org/Configuring/Dwindle-Layout/ for more
+  pseudotile = true # master switch for pseudotiling. Enabling is bound to mainMod + P in the keybinds section below
+  preserve_split = true # you probably want this
+}
+
+gestures {
+  workspace_swipe = false
+}
+
+$mainMod = SUPER
+
+bind = $mainMod, Q, exec, alacritty
+bind = $mainMod, C, killactive,
+bind = $mainMod, M, exit,
+bind = $mainMod, E, exec, dolphin
+bind = $mainMod, V, togglefloating,
+bind = $mainMod, R, exec, ${fuzzel-command}
+bind = $mainMod, P, pseudo, # dwindle
+bind = $mainMod, B, togglesplit, # dwindle
+bind = $mainMod, Z, exec, ${swaylock-command}
+
+# Move focus with mainMod + arrow keys
+bind = $mainMod, H, movefocus, l
+bind = $mainMod, L, movefocus, r
+bind = $mainMod, K, movefocus, u
+bind = $mainMod, J, movefocus, d
+
+# Switch workspaces with mainMod + [0-9]
+bind = $mainMod, 1, workspace, 1
+bind = $mainMod, 2, workspace, 2
+bind = $mainMod, 3, workspace, 3
+bind = $mainMod, 4, workspace, 4
+bind = $mainMod, 5, workspace, 5
+bind = $mainMod, 6, workspace, 6
+bind = $mainMod, 7, workspace, 7
+bind = $mainMod, 8, workspace, 8
+bind = $mainMod, 9, workspace, 9
+bind = $mainMod, 0, workspace, 10
+
+# Move active window to a workspace with mainMod + SHIFT + [0-9]
+bind = $mainMod SHIFT, 1, movetoworkspace, 1
+bind = $mainMod SHIFT, 2, movetoworkspace, 2
+bind = $mainMod SHIFT, 3, movetoworkspace, 3
+bind = $mainMod SHIFT, 4, movetoworkspace, 4
+bind = $mainMod SHIFT, 5, movetoworkspace, 5
+bind = $mainMod SHIFT, 6, movetoworkspace, 6
+bind = $mainMod SHIFT, 7, movetoworkspace, 7
+bind = $mainMod SHIFT, 8, movetoworkspace, 8
+bind = $mainMod SHIFT, 9, movetoworkspace, 9
+bind = $mainMod SHIFT, 0, movetoworkspace, 10
+
+# Scroll through existing workspaces with mainMod + scroll
+bind = $mainMod, mouse_down, workspace, e+1
+bind = $mainMod, mouse_up, workspace, e-1
+
+# Move/resize windows with mainMod + LMB/RMB and dragging
+bindm = $mainMod, mouse:272, movewindow
+bindm = $mainMod, mouse:273, resizewindow
+
+# Media key binds
+bind = , xf86audioraisevolume, exec, swayosd --output-volume=raise
+bind = SHIFT, xf86audioraisevolume, exec, swayosd --output-volume=+2
+bind = , xf86audiolowervolume, exec, swayosd --output-volume=lower
+bind = SHIFT, xf86audiolowervolume, exec, swayosd --output-volume=-2
+bind = , xf86audiomute, exec, swayosd --output-volume mute-toggle
+
+# Screenshots
+bind = , print, exec, grimblast copysave area ~/Pictures/Screenshots/$(date -Iseconds).png
+bind = SHIFT, print, exec, grimblast copysave output ~/Pictures/Screenshots/$(date -Iseconds).png
+
+# Caps lock indicator
+bindr = CAPS, caps_lock, exec, swayosd --caps-lock
+
+# systemd integration
+exec-once=dbus-update-activation-environment --systemd DISPLAY WAYLAND_DISPLAY HYPRLAND_INSTANCE_SIGNATURE XDG_CURRENT_DESKTOP && sleep 2 && systemctl --user start hyprland-session.target
+
+# Clipboard history management
+exec-once=wl-paste --watch cliphist store
+bind = $mainMod, X, exec, cliphist list | ${fuzzel-command} --dmenu | cliphist decode | wl-copy

configs/waybar.css

@@ -0,0 +1,297 @@
+* {
+    border: none;
+    border-radius: 0px;
+    font-family: Roboto, Helvetica, Arial, sans-serif;
+    font-size: 12px;
+    min-height: 0;
+}
+
+window#waybar {
+    background-color: transparent;
+    color: #ffffff;
+    transition-property: background-color;
+    transition-duration: .5s;
+}
+
+window#waybar.hidden {
+    opacity: 0.2;
+}
+
+
+#workspaces button {
+    background: #1f1f1f;
+    color: #ffffff;
+    border-radius: 20px;
+
+}
+
+/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
+#workspaces button:hover {
+    background: lightblue;
+    color: black;
+    border-bottom: 3px solid #ffffff;
+
+}
+
+#workspaces button.active {
+    background: #3f3f3f;
+}
+
+#workspaces button.active:hover {
+    background: lightblue;
+    color: black;
+    border-bottom: 3px solid #ffffff;
+
+}
+
+#workspaces button.urgent {
+    background-color: #eb4d4b;
+}
+
+#mode {
+    background-color: #64727D;
+    border-bottom: 3px solid #ffffff;
+}
+
+#clock,
+#battery,
+#cpu,
+#memory,
+#disk,
+#temperature,
+#backlight,
+#network,
+#pulseaudio,
+#custom-media,
+#custom-launcher,
+#custom-power,
+#tray,
+#mode,
+#idle_inhibitor,
+#mpd {
+    padding: 0 10px;
+    color: black;
+}
+#mpd {
+    background-color: #8EC5FC;
+    background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
+    color: black;
+    border-radius: 20px;
+    margin-right: 5px;
+}
+
+#window,
+#workspaces {
+    margin: 0px 4px;
+}
+
+/* If workspaces is the leftmost module, omit left margin */
+.modules-left > widget:first-child > #workspaces {
+    margin-left: 0px;
+}
+
+/* If workspaces is the rightmost module, omit right margin */
+.modules-right > widget:last-child > #workspaces {
+    margin-right: 0px;
+}
+
+#clock {
+    background-color: #FA8BFF;
+    background-image: linear-gradient(-45deg, #FA8BFF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    color: black;
+    border-radius: 0px 20px 20px 0px;
+    margin-right: 4px;
+
+}
+
+#battery {
+    background-color: #ffffff;
+    color: #000000;
+}
+
+#battery.charging, #battery.plugged {
+    color: #ffffff;
+    background-color: #26A65B;
+}
+
+@keyframes blink {
+    to {
+        background-color: #ffffff;
+        color: #000000;
+    }
+}
+
+#battery.critical:not(.charging) {
+    background-color: #f53c3c;
+    color: #ffffff;
+    animation-name: blink;
+    animation-duration: 0.5s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+}
+
+label:focus {
+    background-color: #000000;
+}
+
+#cpu {
+    background-color: #FA8BFF;
+    background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    color: black;
+}
+
+#memory {
+    background-color: #FA8BFF;
+    background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    color: black;
+}
+
+#disk {
+    background-color: #FA8BFF;
+    background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    color: black;
+}
+
+#backlight {
+    background-color: #FA8BFF;
+    background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
+
+}
+
+#network {
+    background-color: #FA8BFF;
+    background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    color: black;
+}
+
+#network.disconnected {
+    background-color: #FA8BFF;
+    background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    color: red;
+}
+
+#pulseaudio {
+    background-color: #FA8BFF;
+    background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    color: black;
+}
+
+#pulseaudio.muted {
+    background-color: #FA8BFF;
+    background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    color: red;
+}
+
+#custom-media {
+    background-color: #8EC5FC;
+    background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
+    color: black;
+    border-radius: 20px;
+    margin-right: 5px;
+}
+
+#custom-media.custom-spotify {
+    background-color: #8EC5FC;
+    background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
+    color: black;
+    border-radius: 20px;
+    margin-right: 5px;
+
+}
+
+#custom-media.custom-vlc {
+    background-color: #8EC5FC;
+    background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
+    color: black;
+    border-radius: 20px;
+    margin-right: 5px;
+}
+
+#custom-power{
+    background-color: #FA8BFF;
+    background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    font-size: 16px;
+    border-radius: 19px;
+
+}
+#custom-launcher{
+    background-color: #FA8BFF;
+    background-image: linear-gradient(-45deg, #FA8BFF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    font-size: 18px;
+    border-radius: 20px;
+
+}
+
+#custom-updater {
+    background-color: #FA8BFF;
+    background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    color: black;
+}
+
+
+#temperature {
+    background-color: #FA8BFF;
+    background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    color: black;
+}
+
+#temperature.critical {
+    background-color: #eb4d4b;
+}
+
+#tray {
+    background-color: #FA8BFF;
+    background-image: linear-gradient(-45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    color: black;
+}
+
+#tray > .passive {
+    -gtk-icon-effect: dim;
+    background-color: #FA8BFF;
+    background-image: linear-gradient(-45deg, #FA8BFF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    color: black;
+}
+
+#tray > .needs-attention {
+    -gtk-icon-effect: highlight;
+    background-color: #FA8BFF;
+    background-image: linear-gradient(-45deg, #FA8BFF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    color: black;
+}
+
+#idle_inhibitor {
+    background-color: #FA8BFF;
+    background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    border-radius: 20px 0px 0px 20px;
+
+}
+
+#idle_inhibitor.activated {
+    background-color: #FA8BFF;
+    background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    color: black;
+    border-radius: 20px 0px 0px 20px;
+
+}
+
+#language {
+    background-color: #FA8BFF;
+    background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    color: black;
+    min-width: 16px;
+}
+
+#keyboard-state {
+    background: #97e1ad;
+    color: #000000;
+    min-width: 16px;
+}
+
+#keyboard-state > label {
+    padding: 0px 5px;
+}
+
+#keyboard-state > label.locked {
+    background: rgba(0, 0, 0, 0.2);
+}

home-manager/linux/programs/hyprland.nix

@@ -70,135 +70,7 @@ in with lib; {
       };
       recommendedEnvironment = true;
       systemdIntegration = false;
-      extraConfig = ''
+      extraConfig = builtins.readFile ../../../configs/hyprland.conf;
-        # Set environment variables to force wayland
-        env = XCURSOR_SIZE,24
-        env = GDK_BACKEND,wayland,x11
-        env = QT_QPA_PLATFORM,wayland;xcb
-        env = SDL_VIDEODRIVER,wayland
-        env = CLUTTER_BACKEND,wayland
-        input {
-          kb_layout = us
-          kb_variant =
-          kb_model =
-          kb_options =
-          kb_rules =
-          follow_mouse = 1
-        }
-
-        general {
-          # See https://wiki.hyprland.org/Configuring/Variables/ for more
-          gaps_in = 5
-          gaps_out = 10
-          border_size = 3
-          col.active_border = rgba(3fc5b7ee) rgba(70b433ee) 45deg
-          col.inactive_border = rgba(252525aa)
-          layout = dwindle
-        }
-        decoration {
-          rounding = 10
-          blur = true
-          blur_size = 3
-          blur_passes = 1
-          blur_new_optimizations = true
-          drop_shadow = true
-          shadow_range = 4
-          shadow_render_power = 3
-          col.shadow = rgba(181818ee)
-        }
-
-        animations {
-          enabled = true;
-          bezier = myBezier, 0.05, 0.9, 0.1, 1.05
-          animation = windows, 1, 7, myBezier
-          animation = windowsOut, 1, 7, default, popin 80%
-          animation = border, 1, 10, default
-          animation = borderangle, 1, 8, default
-          animation = fade, 1, 7, default
-          animation = workspaces, 1, 6, default
-        }
-
-        dwindle {
-          # See https://wiki.hyprland.org/Configuring/Dwindle-Layout/ for more
-          pseudotile = true # master switch for pseudotiling. Enabling is bound to mainMod + P in the keybinds section below
-          preserve_split = true # you probably want this
-        }
-
-        gestures {
-          workspace_swipe = false
-        }
-
-        $mainMod = SUPER
-
-        bind = $mainMod, Q, exec, alacritty
-        bind = $mainMod, C, killactive,
-        bind = $mainMod, M, exit,
-        bind = $mainMod, E, exec, dolphin
-        bind = $mainMod, V, togglefloating,
-        bind = $mainMod, R, exec, ${fuzzel-command}
-        bind = $mainMod, P, pseudo, # dwindle
-        bind = $mainMod, B, togglesplit, # dwindle
-        bind = $mainMod, Z, exec, ${swaylock-command}
-
-        # Move focus with mainMod + arrow keys
-        bind = $mainMod, H, movefocus, l
-        bind = $mainMod, L, movefocus, r
-        bind = $mainMod, K, movefocus, u
-        bind = $mainMod, J, movefocus, d
-
-        # Switch workspaces with mainMod + [0-9]
-        bind = $mainMod, 1, workspace, 1
-        bind = $mainMod, 2, workspace, 2
-        bind = $mainMod, 3, workspace, 3
-        bind = $mainMod, 4, workspace, 4
-        bind = $mainMod, 5, workspace, 5
-        bind = $mainMod, 6, workspace, 6
-        bind = $mainMod, 7, workspace, 7
-        bind = $mainMod, 8, workspace, 8
-        bind = $mainMod, 9, workspace, 9
-        bind = $mainMod, 0, workspace, 10
-
-        # Move active window to a workspace with mainMod + SHIFT + [0-9]
-        bind = $mainMod SHIFT, 1, movetoworkspace, 1
-        bind = $mainMod SHIFT, 2, movetoworkspace, 2
-        bind = $mainMod SHIFT, 3, movetoworkspace, 3
-        bind = $mainMod SHIFT, 4, movetoworkspace, 4
-        bind = $mainMod SHIFT, 5, movetoworkspace, 5
-        bind = $mainMod SHIFT, 6, movetoworkspace, 6
-        bind = $mainMod SHIFT, 7, movetoworkspace, 7
-        bind = $mainMod SHIFT, 8, movetoworkspace, 8
-        bind = $mainMod SHIFT, 9, movetoworkspace, 9
-        bind = $mainMod SHIFT, 0, movetoworkspace, 10
-
-        # Scroll through existing workspaces with mainMod + scroll
-        bind = $mainMod, mouse_down, workspace, e+1
-        bind = $mainMod, mouse_up, workspace, e-1
-
-        # Move/resize windows with mainMod + LMB/RMB and dragging
-        bindm = $mainMod, mouse:272, movewindow
-        bindm = $mainMod, mouse:273, resizewindow
-
-        # Media key binds
-        bind = , xf86audioraisevolume, exec, swayosd --output-volume=raise
-        bind = SHIFT, xf86audioraisevolume, exec, swayosd --output-volume=+2
-        bind = , xf86audiolowervolume, exec, swayosd --output-volume=lower
-        bind = SHIFT, xf86audiolowervolume, exec, swayosd --output-volume=-2
-        bind = , xf86audiomute, exec, swayosd --output-volume mute-toggle
-
-        # Screenshots
-        bind = , print, exec, grimblast copysave area ~/Pictures/Screenshots/$(date -Iseconds).png
-        bind = SHIFT, print, exec, grimblast copysave output ~/Pictures/Screenshots/$(date -Iseconds).png
-
-        # Caps lock indicator
-        bindr = CAPS, caps_lock, exec, swayosd --caps-lock
-
-        # systemd integration
-        exec-once=dbus-update-activation-environment --systemd DISPLAY WAYLAND_DISPLAY HYPRLAND_INSTANCE_SIGNATURE XDG_CURRENT_DESKTOP && sleep 2 && systemctl --user start hyprland-session.target
-
-        # Clipboard history management
-        exec-once=wl-paste --watch cliphist store
-        bind = $mainMod, X, exec, cliphist list | ${fuzzel-command} --dmenu | cliphist decode | wl-copy
-      '';
     };
 
     # systemd session target
@@ -405,305 +277,7 @@ in with lib; {
           };
         };
       };
-      style = ''
+      style = builtins.readFile ../../../configs/waybar.css;
-        * {
-            border: none;
-            border-radius: 0px;
-            font-family: Roboto, Helvetica, Arial, sans-serif;
-            font-size: 12px;
-            min-height: 0;
-        }
-
-        window#waybar {
-            background-color: transparent;
-            color: #ffffff;
-            transition-property: background-color;
-            transition-duration: .5s;
-        }
-
-        window#waybar.hidden {
-            opacity: 0.2;
-        }
-
-
-        #workspaces button {
-            background: #1f1f1f;
-            color: #ffffff;
-            border-radius: 20px;
-
-        }
-
-        /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
-        #workspaces button:hover {
-            background: lightblue;
-            color: black;
-            border-bottom: 3px solid #ffffff;
-
-        }
-
-        #workspaces button.active {
-            background: #3f3f3f;
-        }
-
-        #workspaces button.active:hover {
-            background: lightblue;
-            color: black;
-            border-bottom: 3px solid #ffffff;
-
-        }
-
-        #workspaces button.urgent {
-            background-color: #eb4d4b;
-        }
-
-        #mode {
-            background-color: #64727D;
-            border-bottom: 3px solid #ffffff;
-        }
-
-        #clock,
-        #battery,
-        #cpu,
-        #memory,
-        #disk,
-        #temperature,
-        #backlight,
-        #network,
-        #pulseaudio,
-        #custom-media,
-        #custom-launcher,
-        #custom-power,
-        #tray,
-        #mode,
-        #idle_inhibitor,
-        #mpd {
-            padding: 0 10px;
-            color: black;
-        }
-        #mpd {
-            background-color: #8EC5FC;
-            background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
-            color: black;
-            border-radius: 20px;
-            margin-right: 5px;
-        }
-
-        #window,
-        #workspaces {
-            margin: 0px 4px;
-        }
-
-        /* If workspaces is the leftmost module, omit left margin */
-        .modules-left > widget:first-child > #workspaces {
-            margin-left: 0px;
-        }
-
-        /* If workspaces is the rightmost module, omit right margin */
-        .modules-right > widget:last-child > #workspaces {
-            margin-right: 0px;
-        }
-
-        #clock {
-            background-color: #FA8BFF;
-            background-image: linear-gradient(-45deg, #FA8BFF 0%, #2BD2FF 52%, #2BD2FF 90%);
-            color: black;
-            border-radius: 0px 20px 20px 0px;
-            margin-right: 4px;
-
-        }
-
-        #battery {
-            background-color: #ffffff;
-            color: #000000;
-        }
-
-        #battery.charging, #battery.plugged {
-            color: #ffffff;
-            background-color: #26A65B;
-        }
-
-        @keyframes blink {
-            to {
-                background-color: #ffffff;
-                color: #000000;
-            }
-        }
-
-        #battery.critical:not(.charging) {
-            background-color: #f53c3c;
-            color: #ffffff;
-            animation-name: blink;
-            animation-duration: 0.5s;
-            animation-timing-function: linear;
-            animation-iteration-count: infinite;
-            animation-direction: alternate;
-        }
-
-        label:focus {
-            background-color: #000000;
-        }
-
-        #cpu {
-            background-color: #FA8BFF;
-            background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
-            color: black;
-        }
-
-        #memory {
-            background-color: #FA8BFF;
-            background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
-            color: black;
-        }
-
-        #disk {
-            background-color: #FA8BFF;
-            background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
-            color: black;
-        }
-
-        #backlight {
-            background-color: #FA8BFF;
-            background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
-
-        }
-
-        #network {
-            background-color: #FA8BFF;
-            background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
-            color: black;
-        }
-
-        #network.disconnected {
-            background-color: #FA8BFF;
-            background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
-            color: red;
-        }
-
-        #pulseaudio {
-            background-color: #FA8BFF;
-            background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
-            color: black;
-        }
-
-        #pulseaudio.muted {
-            background-color: #FA8BFF;
-            background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
-            color: red;
-        }
-
-        #custom-media {
-            background-color: #8EC5FC;
-            background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
-            color: black;
-            border-radius: 20px;
-            margin-right: 5px;
-        }
-
-        #custom-media.custom-spotify {
-            background-color: #8EC5FC;
-            background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
-            color: black;
-            border-radius: 20px;
-            margin-right: 5px;
-
-        }
-
-        #custom-media.custom-vlc {
-            background-color: #8EC5FC;
-            background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
-            color: black;
-            border-radius: 20px;
-            margin-right: 5px;
-        }
-
-        #custom-power{
-            background-color: #FA8BFF;
-            background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BD2FF 90%);
-            font-size: 16px;
-            border-radius: 19px;
-
-        }
-        #custom-launcher{
-            background-color: #FA8BFF;
-            background-image: linear-gradient(-45deg, #FA8BFF 0%, #2BD2FF 52%, #2BD2FF 90%);
-            font-size: 18px;
-            border-radius: 20px;
-
-        }
-
-        #custom-updater {
-            background-color: #FA8BFF;
-            background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
-            color: black;
-        }
-
-
-        #temperature {
-            background-color: #FA8BFF;
-            background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
-            color: black;
-        }
-
-        #temperature.critical {
-            background-color: #eb4d4b;
-        }
-
-        #tray {
-            background-color: #FA8BFF;
-            background-image: linear-gradient(-45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
-            color: black;
-        }
-
-        #tray > .passive {
-            -gtk-icon-effect: dim;
-            background-color: #FA8BFF;
-            background-image: linear-gradient(-45deg, #FA8BFF 0%, #2BD2FF 52%, #2BD2FF 90%);
-            color: black;
-        }
-
-        #tray > .needs-attention {
-            -gtk-icon-effect: highlight;
-            background-color: #FA8BFF;
-            background-image: linear-gradient(-45deg, #FA8BFF 0%, #2BD2FF 52%, #2BD2FF 90%);
-            color: black;
-        }
-
-        #idle_inhibitor {
-            background-color: #FA8BFF;
-            background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BD2FF 90%);
-            border-radius: 20px 0px 0px 20px;
-
-        }
-
-        #idle_inhibitor.activated {
-            background-color: #FA8BFF;
-            background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BD2FF 90%);
-            color: black;
-            border-radius: 20px 0px 0px 20px;
-
-        }
-
-        #language {
-            background-color: #FA8BFF;
-            background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
-            color: black;
-            min-width: 16px;
-        }
-
-        #keyboard-state {
-            background: #97e1ad;
-            color: #000000;
-            min-width: 16px;
-        }
-
-        #keyboard-state > label {
-            padding: 0px 5px;
-        }
-
-        #keyboard-state > label.locked {
-            background: rgba(0, 0, 0, 0.2);
-        }
-      '';
     };
     # Override the service to run during graphical-session-pre.target
     systemd.user.services.waybar = {