Add custom-config and custom-style for ML4W waybar themes

This commit is contained in:
Stephan Raabe 2023-12-10 14:17:32 +01:00
parent d95dbe3357
commit 830fe0ecdc
3 changed files with 37 additions and 16 deletions

View File

@ -67,6 +67,7 @@ bind = $mainMod SHIFT, 9, movetoworkspace, 9
bind = $mainMod SHIFT, 0, movetoworkspace, 10
bind = $mainMod, mouse_down, workspace, e+1
bind = $mainMod, mouse_up, workspace, e-1
bind = $mainMod CTRL, down, workspace, empty
# Fn keys
bind = , XF86MonBrightnessUp, exec, brightnessctl -q s +10%

View File

@ -3,32 +3,42 @@
Select a theme with SUPER + CTRL + T (custom Hyprland key binding) to execute the themeswitcher.sh script. The script will open rofi to show the themes in the folder ~/dotfiles/waybar/themes/
## Waybar Documentation
Waybar github: https://github.com/Alexays/Waybar
Waybar Wiki: https://github.com/Alexays/Waybar/wiki
## Create your own theme
## Define your own config and style.css for a ML4W theme
If you want to hide modules from the dotfiles ML4W themes or tweak the style, you can do this by creating a copy of the config file and name it config-custom or a copy of style.css and name it style-custom.css
The waybar loader will the use your copies instead of the default files.
With a personal config-custom you can also load a personal modules.json with additional modules.
You can reload the waybar theme with <kbd>SUPER</kbd> + <kbd>SHIFT</kbd> + <kbd>B</kbd>
## Create your own theme based on the starter theme
Please check the configurations of the folders in ~/dotfiles/waybar/themes/
Create a folder for your theme and add your configuration.
A good starting point is to copy the default folder with the default waybar theme.
The main theme folder includes the core config file and stylesheet.
Waybar configuration: https://github.com/Alexays/Waybar/wiki/Configuration
A good starting point is to copy the the waybar starter theme.
Create subfolders to save variations like in the folder ml4w. You can include stylesheets from other themes to standardize your themes like in the theme ml4w-bottom.
Copy the folder ~/dotfiles/waybar/themes/starter and name the copy for example to mytheme.
## Stylesheet
The style.css includes the style file of the theme.
Waybar Styling: https://github.com/Alexays/Waybar/wiki/Styling
## Define theme name
Add a config.sh file to save the theme name. Add it to the main or subfolders for variations.
Open the file ~/dotfiles/waybar/themes/mytheme/config.sh and give your theme a name
```
#!/bin/bash
theme_name="ML4W Light"
theme_name="MyTheme"
```
Select your new theme by clicking in the ... icon or with <kbd>SUPER</kbd> + <kbd>CTRL</kbd> + <kbd>T</kbd>
To customize your theme, you can edit the files config, style.css and modules.json
You can reload the waybar theme with <kbd>SUPER</kbd> + <kbd>SHIFT</kbd> + <kbd>B</kbd>
## Waybar documentation
Waybar configuration: https://github.com/Alexays/Waybar/wiki/Configuration
Waybar Styling: https://github.com/Alexays/Waybar/wiki/Styling

View File

@ -38,4 +38,14 @@ fi
# -----------------------------------------------------
# Loading the configuration
# -----------------------------------------------------
waybar -c ~/dotfiles/waybar/themes${arrThemes[0]}/config -s ~/dotfiles/waybar/themes${arrThemes[1]}/style.css &
config_file="config"
style_file="style.css"
# Standard files can be overwritten with an existing config-custom or style-custom.css
if [ -f ~/dotfiles/waybar/themes${arrThemes[0]}/config-custom ] ;then
config_file="config-custom"
fi
if [ -f ~/dotfiles/waybar/themes${arrThemes[1]}/style-custom.css ] ;then
style_file="style-custom.css"
fi
waybar -c ~/dotfiles/waybar/themes${arrThemes[0]}/$config_file -s ~/dotfiles/waybar/themes${arrThemes[1]}/$style_file &