search

manjaro-sway / manjaro-sway

manjaro linux with wayland 🖼, sway 🌴 and a lot of ♥
https://manjaro-sway.download
MIT License
720 stars 21 forks source link

How to change this border color #329

Closed mioscape closed 11 months ago

mioscape commented 2 years ago

I wonder how to change this border colour (Brightness Bar, Volume Bar & Notification Bar)

I want to match it with Catppuccin Color Scheme

image image

boredland commented 2 years ago

You can create and load a custom theme. I will make this a bit easier then it is now, but roughly:

Create a copy of the theme: https://github.com/manjaro-sway/desktop-settings/tree/sway/community%2Fsway%2Fusr%2Fshare%2Fsway%2Fthemes%2Fmatcha-green

And point to it by editing your .config/sway/config

mioscape commented 2 years ago

You can create and load a custom theme. I will make this a bit easier then it is now, but roughly:

Create a copy of the theme: https://github.com/manjaro-sway/desktop-settings/tree/sway/community%2Fsway%2Fusr%2Fshare%2Fsway%2Fthemes%2Fmatcha-green

And point to it by editing your .config/sway/config

Which variable do i need to change. I did change the configuration, but no luck

mioscape commented 2 years ago

Any solution?

boredland commented 2 years ago

Yes, it is super easy:

cp /usr/share/sway/themes/matcha-green/definitions ~/.config/sway/definitiond.d/theme.conf

do your customization in ~/.config/sway/definitiond.d/theme.conf.

boredland commented 2 years ago

I would keep this ticket open, as we should document that in our Support.md

mioscape commented 2 years ago

I would keep this ticket open, as we should document that in our Support.md

Uhh sorry, its changed. I thought the colors changed without rebooting the device. I edit the file immediately in /usr/share/sway/themes/matcha-green/definitions, I'll move it to ~/.config

image image

boredland commented 2 years ago

I edit the file immediately in /usr/share/sway/themes/matcha-green/definitions, I'll move it to ~/.config

please do that, as it will ensure this endures updates.

boredland commented 2 years ago

keeping open to make sure we document this properly.

mioscape commented 2 years ago

I edit the file immediately in /usr/share/sway/themes/matcha-green/definitions, I'll move it to ~/.config

please do that, as it will ensure this endures updates.

It's working

image image

robin-thoene commented 1 year ago

Hey,

I know this is closed but I have a similar issue. I can not get the Volume and Brightness bar to change the color.

My current theme is located under .config/sway/themes/custom/definitions and looks like this:

# some global theme specific variables
set $gtk-theme Dracula
set $icon-theme Dracula
set $cursor-theme xcursor-breeze
set $gui-font JetBrainsMono Nerd Font 11
set $term-font JetBrainsMono Nerd Font 11
set $gtk-color-scheme prefer-dark
set $kvantum-theme Dracula

set $color0  #141a1b
set $color1  #282a2b
set $color2  #3B758C
set $color3  #41535B
set $color4  #43a5d5
set $color5  #d6d6d6
set $color6  #f8f8f2
set $color7  #ffffff
set $color8  #Cd3f45
set $color9  #db7b55
set $color10 #e6cd69
set $color11 #9fca56
set $color12 #bd93f9
set $color13 #55b5db
set $color14 #a074c4
set $color15 #8a553f

#$color0
set $background-color $color0
#$color6
set $text-color $color6
#color1
set $selection-color $color1
#color12
set $accent-color $color12

# Basic color configuration using the Base16 variables for windows and borders.
# Property Name         Border  BG       Text    Indicator Child Border
client.focused          $color5 $color12 $color0 $color6   $color12
client.focused_inactive $color1 $color1  $color5 $color3   $color1
client.unfocused        $color1 $color0  $color5 $color6   $color1
client.urgent           $color8 $color8  $color0 $color9   $color8
client.placeholder      $color0 $color0  $color5 $color0   $color0
client.background       $color7

The dracula theme I installed from here https://github.com/dracula/gtk. This is applied, I can verify by opening gtk / kvantum styled applications.

The theme is imported in my config .config/sway/config

# Default config for sway
#
# Copy this to ~/.config/sway/config and edit it to your liking.
#
# Read `man 5 sway` for a complete reference.

# styles - set the folder for your theme definition file
set $theme ~/.config/sway/themes/custom

# theme variables
include $theme/definitions

# global variables
include /etc/sway/definitions

# user variables
include $HOME/.config/sway/definitions.d/*.conf

include /etc/sway/inputs/*
include /etc/sway/outputs/*

# enable modes
include /etc/sway/modes/*

# only enable this if every app you use is compatible with wayland
# xwayland disable

# include additional configs e.g. to autostart applications
include /etc/sway/config.d/*

# user config
include $HOME/.config/sway/config.d/*.conf

Which seems to be applied, because for example the notification is themed with the correct color ($color12 -> #bd93f9)

Thanks in advance for any feedback / help.

mioscape commented 1 year ago

Hey,

I know this is closed but I have a similar issue. I can not get the Volume and Brightness bar to change the color.

My current theme is located under .config/sway/themes/custom/definitions and looks like this:

# some global theme specific variables
set $gtk-theme Dracula
set $icon-theme Dracula
set $cursor-theme xcursor-breeze
set $gui-font JetBrainsMono Nerd Font 11
set $term-font JetBrainsMono Nerd Font 11
set $gtk-color-scheme prefer-dark
set $kvantum-theme Dracula

set $color0  #141a1b
set $color1  #282a2b
set $color2  #3B758C
set $color3  #41535B
set $color4  #43a5d5
set $color5  #d6d6d6
set $color6  #f8f8f2
set $color7  #ffffff
set $color8  #Cd3f45
set $color9  #db7b55
set $color10 #e6cd69
set $color11 #9fca56
set $color12 #bd93f9
set $color13 #55b5db
set $color14 #a074c4
set $color15 #8a553f

#$color0
set $background-color $color0
#$color6
set $text-color $color6
#color1
set $selection-color $color1
#color12
set $accent-color $color12

# Basic color configuration using the Base16 variables for windows and borders.
# Property Name         Border  BG       Text    Indicator Child Border
client.focused          $color5 $color12 $color0 $color6   $color12
client.focused_inactive $color1 $color1  $color5 $color3   $color1
client.unfocused        $color1 $color0  $color5 $color6   $color1
client.urgent           $color8 $color8  $color0 $color9   $color8
client.placeholder      $color0 $color0  $color5 $color0   $color0
client.background       $color7

The dracula theme I installed from here https://github.com/dracula/gtk. This is applied, I can verify by opening gtk / kvantum styled applications.

The theme is imported in my config .config/sway/config

# Default config for sway
#
# Copy this to ~/.config/sway/config and edit it to your liking.
#
# Read `man 5 sway` for a complete reference.

# styles - set the folder for your theme definition file
set $theme ~/.config/sway/themes/custom

# theme variables
include $theme/definitions

# global variables
include /etc/sway/definitions

# user variables
include $HOME/.config/sway/definitions.d/*.conf

include /etc/sway/inputs/*
include /etc/sway/outputs/*

# enable modes
include /etc/sway/modes/*

# only enable this if every app you use is compatible with wayland
# xwayland disable

# include additional configs e.g. to autostart applications
include /etc/sway/config.d/*

# user config
include $HOME/.config/sway/config.d/*.conf

Which seems to be applied, because for example the notification is themed with the correct color ($color12 -> #bd93f9)

Thanks in advance for any feedback / help.

In my case, i need to re-apply the theme every time booted to linux

robin-thoene commented 1 year ago

Isn't that already the case when setting this theme in the config file?

robin-thoene commented 1 year ago

I found this in /etc/sway/definitions:

set $onscreen_bar /usr/share/sway/scripts/wob.sh "$accent-color" "$background-color"

this seems to be the line that is responsible for setting the bar colors. However, I already override these two colors in my theme, but the bar still stays green.

boredland commented 12 months ago

Hi there! @robin-thoene and I investigated a little yesterday evening. Apparently nothing ever refreshed the wob config and we had a problem with the order of things. As the global definitions are being loaded first, and nothing did override the $onscreen_bar variable. This one is being released as manjaro-sway-settings-git, feedback welcome! https://github.com/manjaro-sway/desktop-settings/commit/fe92adb84c5465663c6d21e0f52356b742d3522a

robin-thoene commented 12 months ago

Hey @boredland.

big thank you again for the investigation yesterday!

What I am now as well experiencing after reboot with our/my updated solution is that the primary color is no longer applied to the notifications and the dmenu

image image

boredland commented 12 months ago

With said patch, this worked nicely for me.

Add .config/sway/definitions.d/theme.conf:

# dracula
# needed packages: dracula-gtk-theme dracula-kde-theme-git dracula-icons-git
# some global theme specific variables
set $gtk-theme Dracula
set $icon-theme Dracula-icons
set $cursor-theme Dracula-cursors
set $gui-font Roboto 11
set $term-font JetBrainsMono NF 14
set $gtk-color-scheme prefer-dark
set $kvantum-theme Dracula-purple-solid

set $color0  #141a1b
set $color1  #282a2b
set $color2  #3B758C
set $color3  #41535B
set $color4  #43a5d5
set $color5  #d6d6d6
set $color6  #f8f8f2
set $color7  #ffffff
set $color8  #Cd3f45
set $color9  #db7b55
set $color10 #e6cd69
set $color11 #9fca56
set $color12 #bd93f9
set $color13 #55b5db
set $color14 #a074c4
set $color15 #8a553f

#$color0
set $background-color $color0
#$color6
set $text-color $color6
#color1
set $selection-color $color1
#color12
set $accent-color $color12

# Basic color configuration using the Base16 variables for windows and borders.
# Property Name         Border  BG       Text    Indicator Child Border
client.focused          $color5 $color12 $color0 $color6   $color12
client.focused_inactive $color1 $color1  $color5 $color3   $color1
client.unfocused        $color1 $color0  $color5 $color6   $color1
client.urgent           $color8 $color8  $color0 $color9   $color8
client.placeholder      $color0 $color0  $color5 $color0   $color0
client.background       $color7

Add .config/foot/foot.ini:

include=/usr/share/sway/templates/foot.ini

[colors]
# alpha=1.0
background=141a1b
foreground=f8f8f2

## Normal/regular colors (color palette 0-7)
regular0=21222c  # black
regular1=ff5555  # red
regular2=50fa7b  # green
regular3=f1fa8c  # yellow
regular4=bd93f9  # blue
regular5=ff79c6  # magenta
regular6=8be9fd  # cyan
regular7=f8f8f2  # white

## Bright colors (color palette 8-15)
bright0=6272a4   # bright black
bright1=ff6e6e   # bright red
bright2=69ff94   # bright green
bright3=ffffa5   # bright yellow
bright4=d6acff   # bright blue
bright5=ff92df   # bright magenta
bright6=a4ffff   # bright cyan
bright7=ffffff   # bright white

## dimmed colors (see foot.ini(5) man page)
# dim0=<not set>
# ...
# dim7=<not-set>

## The remaining 256-color palette
# 16 = <256-color palette #16>
# ...
# 255 = <256-color palette #255>

## Misc colors
selection-foreground=ffffff
selection-background=44475a
# jump-labels=<regular0> <regular3>          # black-on-yellow
# scrollback-indicator=<regular0> <bright4>  # black-on-bright-blue
# search-box-no-match=<regular0> <regular1>  # black-on-red
# search-box-match=<regular0> <regular3>     # black-on-yellow
urls=8be9fd

If y'all can confirm this working, we could even add this one to /usr/share/sway/themes/

boredland commented 12 months ago

Hey @boredland.

big thank you again for the investigation yesterday!

What I am now as well experiencing after reboot with our/my updated solution is that the primary color is no longer applied to the notifications and the dmenu

Have to skel-ed the new .config/sway/config?

robin-thoene commented 12 months ago

What do you mean exactly with to skel?

boredland commented 12 months ago

What do you mean exactly with to skel?

Copy the file from /etc/.skel - either manually or via the skel command.

robin-thoene commented 12 months ago

No luck so far. I executed the skel command and installed dracula-kde-theme-git. For some reason yay can not find darcula-gtk-theme on my machine.

I installed GTK and Kvantum theme manually before using the Dracula documentation and in my old version where I explicitly set the $theme var to my theme the notification cards and the dmenu where styled correct.

boredland commented 12 months ago

Just tried it on another machine and it worked like a charm... Updated the theme.conf to also use the icon-theme.

robin-thoene commented 12 months ago

I will investigate this after work and copy your theme.conf as well. Maybe there is a difference in that.

boredland commented 12 months ago

Maybe. Also I think the foot-theme needs some adaption. Perhaps you already figured that one out?

robin-thoene commented 12 months ago

I created a foot.ini in .config/foot and set it's content to the values from the official Dracula repo

boredland commented 12 months ago

Oh, nice.

robin-thoene commented 12 months ago

Still no luck, even using your theme.conf, but I can not try out using the AUR package darcula-gtk-theme as yay has an error when I try to install it:

No AUR package found for darcula-gtk-theme

boredland commented 12 months ago

Still no luck, even using your theme.conf, but I can not try out using the AUR package darcula-gtk-theme as yay has an error when I try to install it:

No AUR package found for darcula-gtk-theme

Oh, I just misspelled ;)

boredland commented 11 months ago

closing as we now have some stock themes that demo how theming could be done. its a rofi script Manjaro Sway Theme that will allow you to apply them.