colors generations based on wallpaper

.config/hypr/colors.conf

@@ -0,0 +1,105 @@
+#
+# Css Colors
+# Generated with Matugen
+#
+
+$background = rgb(21,18,24)
+
+$error = rgb(255,180,171)
+
+$error_container = rgb(147,0,10)
+
+$inverse_on_surface = rgb(50,47,53)
+
+$inverse_primary = rgb(106,83,140)
+
+$inverse_surface = rgb(231,224,232)
+
+$on_background = rgb(231,224,232)
+
+$on_error = rgb(105,0,5)
+
+$on_error_container = rgb(255,218,214)
+
+$on_primary = rgb(59,37,91)
+
+$on_primary_container = rgb(237,220,255)
+
+$on_primary_fixed = rgb(37,14,68)
+
+$on_primary_fixed_variant = rgb(82,60,115)
+
+$on_secondary = rgb(53,45,64)
+
+$on_secondary_container = rgb(235,221,247)
+
+$on_secondary_fixed = rgb(31,24,42)
+
+$on_secondary_fixed_variant = rgb(76,67,87)
+
+$on_surface = rgb(231,224,232)
+
+$on_surface_variant = rgb(203,196,207)
+
+$on_tertiary = rgb(75,37,46)
+
+$on_tertiary_container = rgb(255,217,223)
+
+$on_tertiary_fixed = rgb(50,16,25)
+
+$on_tertiary_fixed_variant = rgb(100,59,68)
+
+$outline = rgb(149,142,153)
+
+$outline_variant = rgb(74,69,78)
+
+$primary = rgb(214,187,251)
+
+$primary_container = rgb(82,60,115)
+
+$primary_fixed = rgb(237,220,255)
+
+$primary_fixed_dim = rgb(214,187,251)
+
+$scrim = rgb(0,0,0)
+
+$secondary = rgb(206,194,219)
+
+$secondary_container = rgb(76,67,87)
+
+$secondary_fixed = rgb(235,221,247)
+
+$secondary_fixed_dim = rgb(206,194,219)
+
+$shadow = rgb(0,0,0)
+
+$source_color = rgb(111,34,205)
+
+$surface = rgb(21,18,24)
+
+$surface_bright = rgb(59,56,62)
+
+$surface_container = rgb(33,30,36)
+
+$surface_container_high = rgb(44,41,47)
+
+$surface_container_highest = rgb(55,51,58)
+
+$surface_container_low = rgb(29,26,32)
+
+$surface_container_lowest = rgb(16,13,18)
+
+$surface_dim = rgb(21,18,24)
+
+$surface_tint = rgb(214,187,251)
+
+$surface_variant = rgb(74,69,78)
+
+$tertiary = rgb(241,183,194)
+
+$tertiary_container = rgb(100,59,68)
+
+$tertiary_fixed = rgb(255,217,223)
+
+$tertiary_fixed_dim = rgb(241,183,194)
+

.config/hypr/hyprland.conf

@@ -34,7 +34,7 @@ exec-once = swww-daemon &
 exec-once = hypridle &
 exec-once=systemctl --user start plasma-polkit-agent &
 
-exec-once = swww img ~/dotfiles/.config/assets/purple-wallpaper.jpg --transition-duration 1 --transition-type grow --transition-fps 60 --transition-pos 0.5,0.9
+source = ~/.config/hypr/lastWallpaper.conf
 
 exec-once=waybar
 exec-once = $network-tray

.config/hypr/lastWallpaper.conf

@@ -0,0 +1 @@
+exec-once = swww img ~/.config/assets/wallpaper/purple-wallpaper.jpg --transition-duration 1 --transition-type grow --transition-fps 60 --transition-pos 0.5,0.9

.config/hypr/variables.conf

@@ -1,3 +1,5 @@
+source = ~/.config/hypr/colors.conf
+
 general {
   border_size = 3
   no_border_on_floating = false
@@ -6,8 +8,8 @@ general {
   gaps_workspaces = 0
   allow_tearing = true
 
-  col.active_border=0xcdd6f4ff
+  col.active_border=$primary
-  col.inactive_border=0xb4befecc
+  col.inactive_border=$primary_container
 
   layout = master
 }

.config/matugen/config.toml

@@ -0,0 +1,23 @@
+[config.wallaper]
+command = "swww"
+arguments = ["img", "--transition-duration", "1", "--transition-type", "grow", "--transition-fps", "60", "--transition-pos", "0.5,0.9"]
+set = false
+
+[templates.waybar]
+input_path = './templates/colors.css'
+output_path = '~/.config/waybar/colors.css'
+
+[templates.rofi]
+input_path = './templates/colors.rasinc'
+output_path = '~/.config/rofi/colors.rasinc'
+post_hook = 'sed -i "s/_/-/g" ~/.config/rofi/colors.rasinc'
+
+[templates.swaync]
+input_path = './templates/colors.css'
+output_path = '~/.config/swaync/colors.css'
+post_hook = 'swaync-client -rs'
+
+[templates.hyprland]
+input_path = './templates/colors.conf'
+output_path = '~/.config/hypr/colors.conf'
+post_hook = 'sed -i "s/, /,/g" ~/.config/hypr/colors.conf'

.config/matugen/set-wallpaper.sh

@@ -0,0 +1,8 @@
+swww img --transition-duration 1 --transition-type grow --transition-fps 60 --transition-pos 0.5,0.9 $1
+if [ -z $2 ]; then
+  matugen image $1 -m dark
+else
+  matugen image $1 -m $2
+fi
+sed -i "s_\~.*--transition-duration_$1 --transition-duration_" ~/.config/hypr/lastWallpaper.conf
+sed -i "s_/\w*/\w*_\~_" ~/.config/hypr/lastWallpaper.conf

.config/matugen/templates/colors.conf

@@ -0,0 +1,7 @@
+#
+# Css Colors
+# Generated with Matugen
+#
+<* for name, value in colors *>
+${{name}} = {{value.default.rgb}}
+<* endfor *>

.config/matugen/templates/colors.css

@@ -0,0 +1,7 @@
+/*
+* Css Colors
+* Generated with Matugen
+*/
+<* for name, value in colors *>
+@define-color {{name}} {{value.default.hex}};
+<* endfor *>

.config/matugen/templates/colors.rasinc

@@ -0,0 +1,9 @@
+/*
+* Css Colors
+* Generated with Matugen
+*/
+* {
+<* for name, value in colors *>
+  {{name}}: {{value.default.hex}};
+<* endfor *>
+}

.config/rofi/colors.rasinc

@@ -0,0 +1,107 @@
+/*
+* Css Colors
+* Generated with Matugen
+*/
+* {
+
+  background: #151218;
+
+  error: #ffb4ab;
+
+  error-container: #93000a;
+
+  inverse-on-surface: #322f35;
+
+  inverse-primary: #6a538c;
+
+  inverse-surface: #e7e0e8;
+
+  on-background: #e7e0e8;
+
+  on-error: #690005;
+
+  on-error-container: #ffdad6;
+
+  on-primary: #3b255b;
+
+  on-primary-container: #eddcff;
+
+  on-primary-fixed: #250e44;
+
+  on-primary-fixed-variant: #523c73;
+
+  on-secondary: #352d40;
+
+  on-secondary-container: #ebddf7;
+
+  on-secondary-fixed: #1f182a;
+
+  on-secondary-fixed-variant: #4c4357;
+
+  on-surface: #e7e0e8;
+
+  on-surface-variant: #cbc4cf;
+
+  on-tertiary: #4b252e;
+
+  on-tertiary-container: #ffd9df;
+
+  on-tertiary-fixed: #321019;
+
+  on-tertiary-fixed-variant: #643b44;
+
+  outline: #958e99;
+
+  outline-variant: #4a454e;
+
+  primary: #d6bbfb;
+
+  primary-container: #523c73;
+
+  primary-fixed: #eddcff;
+
+  primary-fixed-dim: #d6bbfb;
+
+  scrim: #000000;
+
+  secondary: #cec2db;
+
+  secondary-container: #4c4357;
+
+  secondary-fixed: #ebddf7;
+
+  secondary-fixed-dim: #cec2db;
+
+  shadow: #000000;
+
+  source-color: #6f22cd;
+
+  surface: #151218;
+
+  surface-bright: #3b383e;
+
+  surface-container: #211e24;
+
+  surface-container-high: #2c292f;
+
+  surface-container-highest: #37333a;
+
+  surface-container-low: #1d1a20;
+
+  surface-container-lowest: #100d12;
+
+  surface-dim: #151218;
+
+  surface-tint: #d6bbfb;
+
+  surface-variant: #4a454e;
+
+  tertiary: #f1b7c2;
+
+  tertiary-container: #643b44;
+
+  tertiary-fixed: #ffd9df;
+
+  tertiary-fixed-dim: #f1b7c2;
+
+}

.config/rofi/theme.rasinc

@@ -1,22 +1,24 @@
+@import "colors.rasinc"
+
 window {
-  background-color: #313244;
+  background-color: @background;
   border: 3px solid;
-  border-color: #b4befe;
+  border-color: @primary;
   border-radius: 0 0 1em 1em;
   y-offset: -3px;
   width: 80%;
 }
 
 scrollbar {
-  background-color: #313244;
+  background-color: @background;
   handle-width: 1em;
-  handle-color: #b4befe;
+  handle-color: @surface-container;
 }
 
 mainbox {
-    background-color: #313244;
+    background-color: @background;
     orientation: vertical;
-    color: #cdd6f4;
+    color: @primary;
 }
 
 inputbar {
@@ -45,14 +47,14 @@ num-rows {
 }
 
 listview {
-  background-color: #313244;
+  background-color: @background;
   lines: 11;
   spacing: 1px;
 }
 
 element, element-text, element-icon {
-    background-color: #313244;
+    background-color: @background;
-    color: #cdd6f4;
+    color: @primary;
 }
 
 element normal.normal, element alternate.normal {
@@ -60,16 +62,16 @@ element normal.normal, element alternate.normal {
 }
 
 element selected.normal, element selected.active{
-    background-color: #f38ba8;
+    background-color: @secondary;
 }
 
 element normal.active, element alternate.active{
-    background-color: #94e2d5;
+    background-color: @tertiary;
 }
 
 mode-switcher {
-    background-color: #313244;
+    background-color: @background;
-    color: #cdd6f4;
+    color: @primary;
 }
 
 button {
@@ -77,6 +79,6 @@ button {
 }
 
 button selected.normal {
-    background-color: #6c7086;
+    background-color: @on-primary;
     color: inherit;
 }

.config/swaync/colors.css

@@ -0,0 +1,105 @@
+/*
+* Css Colors
+* Generated with Matugen
+*/
+
+@define-color background #151218;
+
+@define-color error #ffb4ab;
+
+@define-color error_container #93000a;
+
+@define-color inverse_on_surface #322f35;
+
+@define-color inverse_primary #6a538c;
+
+@define-color inverse_surface #e7e0e8;
+
+@define-color on_background #e7e0e8;
+
+@define-color on_error #690005;
+
+@define-color on_error_container #ffdad6;
+
+@define-color on_primary #3b255b;
+
+@define-color on_primary_container #eddcff;
+
+@define-color on_primary_fixed #250e44;
+
+@define-color on_primary_fixed_variant #523c73;
+
+@define-color on_secondary #352d40;
+
+@define-color on_secondary_container #ebddf7;
+
+@define-color on_secondary_fixed #1f182a;
+
+@define-color on_secondary_fixed_variant #4c4357;
+
+@define-color on_surface #e7e0e8;
+
+@define-color on_surface_variant #cbc4cf;
+
+@define-color on_tertiary #4b252e;
+
+@define-color on_tertiary_container #ffd9df;
+
+@define-color on_tertiary_fixed #321019;
+
+@define-color on_tertiary_fixed_variant #643b44;
+
+@define-color outline #958e99;
+
+@define-color outline_variant #4a454e;
+
+@define-color primary #d6bbfb;
+
+@define-color primary_container #523c73;
+
+@define-color primary_fixed #eddcff;
+
+@define-color primary_fixed_dim #d6bbfb;
+
+@define-color scrim #000000;
+
+@define-color secondary #cec2db;
+
+@define-color secondary_container #4c4357;
+
+@define-color secondary_fixed #ebddf7;
+
+@define-color secondary_fixed_dim #cec2db;
+
+@define-color shadow #000000;
+
+@define-color source_color #6f22cd;
+
+@define-color surface #151218;
+
+@define-color surface_bright #3b383e;
+
+@define-color surface_container #211e24;
+
+@define-color surface_container_high #2c292f;
+
+@define-color surface_container_highest #37333a;
+
+@define-color surface_container_low #1d1a20;
+
+@define-color surface_container_lowest #100d12;
+
+@define-color surface_dim #151218;
+
+@define-color surface_tint #d6bbfb;
+
+@define-color surface_variant #4a454e;
+
+@define-color tertiary #f1b7c2;
+
+@define-color tertiary_container #643b44;
+
+@define-color tertiary_fixed #ffd9df;
+
+@define-color tertiary_fixed_dim #f1b7c2;
+

.config/swaync/style.css

@@ -1,49 +1,51 @@
+@import url("colors.css");
+
 .control-center {
   border-radius: 0 0 1em 1em;
-  background-color: rgba(49, 50, 68, 0.9);
+  background-color: @background;
-  border: 3px solid #cdd6f4;
+  border: 3px solid @primary;
   border-top: none;
   padding: 1em;
-  color: #cdd6f4;
+  color: @primary;
 }
 
 .control-center-clear-all {
-  border: 3px solid #b4befe;
+  border: 3px solid @primary;
   border-radius: 5em;
-  box-shadow: inset #89dceb 0 0 0.5em;
+  box-shadow: inset @primary 0 0 0.5em;
 }
 
 .control-center-dnd {
-  background-color: #cba6f7;
+  background-color: @primary;
   transition: 25ms linear;
 }
 
 .control-center-dnd:checked {
-  background-color: #f5c2e7;
+  background-color: @tertiary;
 }
 
 .control-center-dnd slider {
-  background-color: #6c7086;
+  background-color: @primary_container;
-  border: 1px solid #6c7086;
+  border: 1px solid @primary_container;
-  box-shadow: inset #6c7086 0 0 0.5em;
+  box-shadow: inset @primary_container 0 0 0.5em;
 }
 
 .notification {
-  border: 3px solid #cdd6f4;
+  border: 3px solid @surface_container;
   border-radius: 1em;
-  background-color: rgba(49, 50, 68, 0.7);
+  background-color: @primary_container;
 }
 
 .notification-default-action {
-  box-shadow: inset #89dceb 0 0 0.5em;
+  box-shadow: inset @surface_container 0 0 0.5em;
 }
 
 .notification-default-action:hover {
-  background-color: rgba(49, 50, 68, 0.8);
+  background-color: @primary_container;
-  box-shadow: inset #89dceb 0 0 0.5em;
+  box-shadow: inset @surface 0 0 0.5em;
 }
 
 .close-button {
-  border: 3px solid #cdd6f4;
+  border: 3px solid @on_primary_container;
-  box-shadow: inset #89dceb 0 0 0.5em;
+  box-shadow: inset @on_primary_container 0 0 0.5em;
 }

.config/waybar/colors.css

@@ -0,0 +1,105 @@
+/*
+* Css Colors
+* Generated with Matugen
+*/
+
+@define-color background #151218;
+
+@define-color error #ffb4ab;
+
+@define-color error_container #93000a;
+
+@define-color inverse_on_surface #322f35;
+
+@define-color inverse_primary #6a538c;
+
+@define-color inverse_surface #e7e0e8;
+
+@define-color on_background #e7e0e8;
+
+@define-color on_error #690005;
+
+@define-color on_error_container #ffdad6;
+
+@define-color on_primary #3b255b;
+
+@define-color on_primary_container #eddcff;
+
+@define-color on_primary_fixed #250e44;
+
+@define-color on_primary_fixed_variant #523c73;
+
+@define-color on_secondary #352d40;
+
+@define-color on_secondary_container #ebddf7;
+
+@define-color on_secondary_fixed #1f182a;
+
+@define-color on_secondary_fixed_variant #4c4357;
+
+@define-color on_surface #e7e0e8;
+
+@define-color on_surface_variant #cbc4cf;
+
+@define-color on_tertiary #4b252e;
+
+@define-color on_tertiary_container #ffd9df;
+
+@define-color on_tertiary_fixed #321019;
+
+@define-color on_tertiary_fixed_variant #643b44;
+
+@define-color outline #958e99;
+
+@define-color outline_variant #4a454e;
+
+@define-color primary #d6bbfb;
+
+@define-color primary_container #523c73;
+
+@define-color primary_fixed #eddcff;
+
+@define-color primary_fixed_dim #d6bbfb;
+
+@define-color scrim #000000;
+
+@define-color secondary #cec2db;
+
+@define-color secondary_container #4c4357;
+
+@define-color secondary_fixed #ebddf7;
+
+@define-color secondary_fixed_dim #cec2db;
+
+@define-color shadow #000000;
+
+@define-color source_color #6f22cd;
+
+@define-color surface #151218;
+
+@define-color surface_bright #3b383e;
+
+@define-color surface_container #211e24;
+
+@define-color surface_container_high #2c292f;
+
+@define-color surface_container_highest #37333a;
+
+@define-color surface_container_low #1d1a20;
+
+@define-color surface_container_lowest #100d12;
+
+@define-color surface_dim #151218;
+
+@define-color surface_tint #d6bbfb;
+
+@define-color surface_variant #4a454e;
+
+@define-color tertiary #f1b7c2;
+
+@define-color tertiary_container #643b44;
+
+@define-color tertiary_fixed #ffd9df;
+
+@define-color tertiary_fixed_dim #f1b7c2;
+

.config/waybar/style.css

@@ -1,11 +1,13 @@
+@import url("colors.css");
+
 * {
   font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif;
   font-size: 15;
 }
 
 window#waybar {
-  background-color: #343547;
+  background-color: @background;
-  border: 3px solid #cdd6f4;
+  border: 3px solid @primary;
   border-top: none;
   color: #ffffff;
   transition-property: background-color;
@@ -24,12 +26,12 @@ box.modules-right {
 
 box.modules-left *,
 box.modules-right * {
-  color: #cdd6f4;
+  color: @primary;
   margin-left: 0.3em
 }
 
 box.modules-center * {
-  color: #cdd6f4;
+  color: @primary;
 }
 
 window#waybar.hidden {
@@ -42,58 +44,58 @@ window#waybar.empty {
 }
 
 window#waybar.solo {
-  background-color: #FFFFFF;
+  background-color: white;
 }
 
 #battery {
   transition: linear 0.1s;
-  box-shadow: inset #89dceb 0 0 0.5em;
+  box-shadow: inset @primary_container 0 0 0.5em;
-  border: 0.2em solid #b4befe;
+  border: 0.2em solid @primary_container;
   padding: 0.2em;
   border-radius: 1em;
 }
 
 #battery:hover {
-  border-color: #74c7ec;
+  border-color: @primary_fixed_dim;
-  color: #74c7ec;
+  color: @primary_fixed;
-  box-shadow: inset #74c7ec 0 0 0.5em;
+  box-shadow: inset @primary_fixed_dim 0 0 0.5em;
 }
 
 #power-profiles-daemon {
   transition: linear 0.1s;
-  box-shadow: inset #89dceb 0 0 0.5em;
+  box-shadow: inset @primary_container 0 0 0.5em;
-  border: 0.2em solid #b4befe;
+  border: 0.2em solid @primary_container;
   padding: 0.5em;
   padding-right: 0.8em;
   border-radius: 1em;
 }
 
 #power-profiles-daemon:hover {
-  border-color: #74c7ec;
+  border-color: @primary_fixed_dim;
-  color: #74c7ec;
+  color: @primary_fixed;
-  box-shadow: inset #74c7ec 0 0 0.5em;
+  box-shadow: inset @primary_fixed_dim 0 0 0.5em;
 }
 
 #backlight {
   transition: linear 0.1s;
-  box-shadow: inset #89dceb 0 0 0.5em;
+  box-shadow: inset @primary_container 0 0 0.5em;
-  border: 0.2em solid #b4befe;
+  border: 0.2em solid @primary_container;
   padding: 0.5em;
   padding-right: 0.8em;
   border-radius: 1em;
 }
 
 #backlight:hover {
-  border-color: #74c7ec;
+  border-color: @primary_fixed_dim;
-  color: #74c7ec;
+  color: @primary_fixed;
-  box-shadow: inset #74c7ec 0 0 0.5em;
+  box-shadow: inset @primary_fixed_dim 0 0 0.5em;
 }
 
 
 #pulseaudio {
   transition: linear 0.1s;
-  box-shadow: inset #89dceb 0 0 0.5em;
+  box-shadow: inset @primary_container 0 0 0.5em;
-  border: 0.2em solid #b4befe;
+  border: 0.2em solid @primary_container;
   padding: 0.5em;
   padding-right: 0;
   padding-right: 0.8em;
@@ -101,15 +103,15 @@ window#waybar.solo {
 }
 
 #pulseaudio:hover {
-  border-color: #74c7ec;
+  border-color: @primary_fixed_dim;
-  color: #74c7ec;
+  color: @primary_fixed;
-  box-shadow: inset #74c7ec 0 0 0.5em;
+  box-shadow: inset @primary_fixed_dim 0 0 0.5em;
 }
 
 #tray {
   transition: linear 0.1s;
-  box-shadow: inset #89dceb 0 0 0.5em;
+  box-shadow: inset @primary_container 0 0 0.5em;
-  border: 0.2em solid #b4befe;
+  border: 0.2em solid @primary_container;
   padding: 0.5em;
   padding-right: 0.8em;
   border-radius: 1em;
@@ -121,8 +123,8 @@ window#waybar.solo {
 
 #workspaces {
   transition: linear 0.1s;
-  box-shadow: inset #89dceb 0 0 0.5em;
+  box-shadow: inset @primary_container 0 0 0.5em;
-  border: 0.2em solid #b4befe;
+  border: 0.2em solid @primary_container;
   padding: 0.2em;
   padding-left: 0;
   padding-right: 0.3em;
@@ -130,12 +132,12 @@ window#waybar.solo {
 }
 
 #workspaces * {
-  color: #6c7086;
+  color: @on_tertiary;
 }
 
 #workspaces button {
   transition: linear 0.1s;
-  background-color: #cba6f7;
+  background-color: @tertiary;
   border-radius: 1em;
   padding: 0;
   padding-right: 0.9em;
@@ -151,9 +153,9 @@ window#waybar.solo {
 }
 
 #clock:hover {
-  color: #74c7ec;
+  color: @primary_fixed;
 }
 
 tooltip {
-  background-color: #45475a;
+  background-color: @secondary_container;
 }