From 8265c9fdead889766617ee16470d399362ccecc0 Mon Sep 17 00:00:00 2001 From: Yingjie Wang Date: Thu, 28 Mar 2024 19:26:19 -0400 Subject: [PATCH] update: add custom waybar themes --- waybar/themes/custom/colored/style.css | 16 + waybar/themes/custom/config | 73 +++++ waybar/themes/custom/config.sh | 2 + waybar/themes/custom/modules.json | 330 +++++++++++++++++++ waybar/themes/custom/style.css | 430 +++++++++++++++++++++++++ 5 files changed, 851 insertions(+) create mode 100644 waybar/themes/custom/colored/style.css create mode 100644 waybar/themes/custom/config create mode 100644 waybar/themes/custom/config.sh create mode 100644 waybar/themes/custom/modules.json create mode 100644 waybar/themes/custom/style.css diff --git a/waybar/themes/custom/colored/style.css b/waybar/themes/custom/colored/style.css new file mode 100644 index 0000000..f440400 --- /dev/null +++ b/waybar/themes/custom/colored/style.css @@ -0,0 +1,16 @@ +/* ----------------------------------------------------- + * Import Pywal colors + * ----------------------------------------------------- */ + @import '../../../../../.cache/wal/colors-waybar.css'; + + @define-color backgroundlight @color5; + @define-color backgrounddark @color11; + @define-color workspacesbackground1 @color5; + @define-color workspacesbackground2 @color11; + @define-color bordercolor @color11; + @define-color textcolor1 #FFFFFF; + @define-color textcolor2 #FFFFFF; + @define-color textcolor3 #FFFFFF; + @define-color iconcolor #FFFFFF; + + @import '../style.css'; \ No newline at end of file diff --git a/waybar/themes/custom/config b/waybar/themes/custom/config new file mode 100644 index 0000000..d4a4ae5 --- /dev/null +++ b/waybar/themes/custom/config @@ -0,0 +1,73 @@ +// __ __ _ +// \ \ / /_ _ _ _| |__ __ _ _ __ +// \ \ /\ / / _` | | | | '_ \ / _` | '__| +// \ V V / (_| | |_| | |_) | (_| | | +// \_/\_/ \__,_|\__, |_.__/ \__,_|_| +// |___/ +// +// by Stephan Raabe (2023) +// ----------------------------------------------------- +// +{ + // General Settings + + // Position TOP + "layer": "top", + "margin-bottom": 0, + + // Position BOTTOM + // "position": "bottom", + // "margin-top": 0, + // "margin-bottom": 14, + + "layer": "top", + "margin-left": 0, + "margin-right": 0, + "spacing": 0, + + // Load Modules + "include": ["~/dotfiles/waybar/themes/custom/modules.json"], + + // Modules Left + "modules-left": [ + "custom/appmenu", + "custom/settings", + "custom/waybarthemes", + "custom/wallpaper", + // START TASK TOOGLE + // "wlr/taskbar", + // END TASK TOOGLE + "group/quicklinks", + "hyprland/window", + "custom/starter" + ], + + // Modules Center + "modules-center": [ + "hyprland/workspaces" + ], + + // Modules Right + "modules-right": [ + "custom/updates", + "pulseaudio", + // START BT TOOGLE + "bluetooth", + // END BT TOOGLE + "battery", + // START NETWORK TOOGLE + "network", + // END NETWORK TOOGLE + "group/hardware", + "custom/cliphist", + // START IDLE TOOGLE + "idle_inhibitor", + // END IDLE TOOGLE + // START TRAY TOOGLE + "tray", + // END TRAY TOOGLE + "custom/exit", + "custom/ml4w-welcome", + "clock" + ] +} diff --git a/waybar/themes/custom/config.sh b/waybar/themes/custom/config.sh new file mode 100644 index 0000000..b3f7a65 --- /dev/null +++ b/waybar/themes/custom/config.sh @@ -0,0 +1,2 @@ +#!/bin/bash +theme_name="Custum 4k" diff --git a/waybar/themes/custom/modules.json b/waybar/themes/custom/modules.json new file mode 100644 index 0000000..8644a83 --- /dev/null +++ b/waybar/themes/custom/modules.json @@ -0,0 +1,330 @@ +// __ __ _ _ +// | \/ | ___ __| |_ _| | ___ ___ +// | |\/| |/ _ \ / _` | | | | |/ _ \/ __| +// | | | | (_) | (_| | |_| | | __/\__ \ +// |_| |_|\___/ \__,_|\__,_|_|\___||___/ +// +// +// by Stephan Raabe (2023) +// ----------------------------------------------------- +// +{ + // Workspaces + "hyprland/workspaces" : { + "on-click": "activate", + "active-only": false, + "all-outputs": true, + "format": "{}", + "format-icons": { + "urgent": "", + "active": "", + "default": "" + }, + "persistent-workspaces": { + "*": 5 + } + }, + + // Taskbar + "wlr/taskbar": { + "format": "{icon}", + "icon-size": 18, + "tooltip-format": "{title}", + "on-click": "activate", + "on-click-middle": "close", + "ignore-list": [ + "Alacritty" + ], + "app_ids-mapping": { + "firefoxdeveloperedition": "firefox-developer-edition" + }, + "rewrite": { + "Firefox Web Browser": "Firefox", + "Foot Server": "Terminal" + } + }, + + // Hyprland Window + "hyprland/window": { + "rewrite": { + "(.*) - Brave": "$1", + "(.*) - Chromium": "$1", + "(.*) - Brave Search": "$1", + "(.*) - Outlook": "$1", + "(.*) Microsoft Teams": "$1" + }, + "separate-outputs": true + }, + + // Cliphist + "custom/cliphist": { + "format": "", + "on-click": "sleep 0.1 && ~/dotfiles/scripts/cliphist.sh", + "on-click-right": "sleep 0.1 && ~/dotfiles/scripts/cliphist.sh d", + "on-click-middle": "sleep 0.1 && ~/dotfiles/scripts/cliphist.sh w", + "tooltip": false + }, + + // Updates Count + "custom/updates": { + "format": " {}", + "tooltip-format": "{}", + "escape": true, + "return-type": "json", + "exec": "~/dotfiles/scripts/updates.sh", + "restart-interval": 60, + "on-click": "alacritty -e ~/dotfiles/scripts/installupdates.sh", + "tooltip": false + }, + + // Theme Starter Label + "custom/starter": { + "format": "THEME STARTER", + "tooltip": false + }, + + // Wallpaper + "custom/wallpaper": { + "format": "", + "on-click": "~/dotfiles/hypr/scripts/wallpaper.sh select", + "on-click-right": "~/dotfiles/hypr/scripts/wallpaper.sh", + "tooltip": false + }, + + // Waybar Themes + "custom/waybarthemes": { + "format": "", + "on-click": "~/dotfiles/waybar/themeswitcher.sh", + "tooltip": false + }, + + // Settings + "custom/settings": { + "format": "", + "on-click": "alacritty --class dotfiles-floating -e ~/dotfiles/hypr/settings/settings.sh", + "tooltip": false + }, + + // Keybindings + "custom/keybindings": { + "format": "", + "on-click": "~/dotfiles/hypr/scripts/keybindings.sh", + "tooltip": false + }, + + // Filemanager Launcher + "custom/filemanager": { + "format": "", + "on-click": "thunar", + "tooltip": false + }, + + // Browser Launcher + "custom/browser": { + "format": "", + "on-click": "~/dotfiles/.settings/browser.sh", + "tooltip": false + }, + + // ML4W Welcome App + "custom/ml4w-welcome": { + "on-click": "~/dotfiles/apps/ML4W_Welcome-x86_64.AppImage", + "format": " ", + "tooltip": false + }, + + // ChatGPT Launcher + "custom/chatgpt": { + "format": "", + "on-click": "chromium --app=https://chat.openai.com", + "tooltip": false + }, + + // Rofi Application Launcher + "custom/appmenu": { + "format": "Apps", + "on-click": "rofi -show drun -replace", + "on-click-right": "~/dotfiles/hypr/scripts/keybindings.sh", + "tooltip": false + }, + + // Power Menu + "custom/exit": { + "format": "", + "on-click": "wlogout", + "tooltip": false + }, + + // Keyboard State + "keyboard-state": { + "numlock": true, + "capslock": true, + "format": "{name} {icon}", + "format-icons": { + "locked": "", + "unlocked": "" + } + }, + + // System tray + "tray": { + // "icon-size": 21, + "spacing": 10 + }, + + // Clock + "clock": { + // "timezone": "America/New_York", + "tooltip-format": "{:%Y %B}\n{calendar}", + "format-alt": "{:%Y-%m-%d}" + }, + + // System + "custom/system": { + "format": "", + "tooltip": false + }, + + // CPU + "cpu": { + "format": "/ C {usage}% ", + "on-click": "alacritty -e htop" + }, + + // Memory + "memory": { + "format": "/ M {}% ", + "on-click": "alacritty -e htop" + }, + + // Harddisc space used + "disk": { + "interval": 30, + "format": "D {percentage_used}% ", + "path": "/", + "on-click": "alacritty -e htop" + }, + + "hyprland/language": { + "format": "/ K {short}" + }, + + // Group Hardware + "group/hardware": { + "orientation": "inherit", + "drawer": { + "transition-duration": 300, + "children-class": "not-memory", + "transition-left-to-right": false + }, + "modules": [ + "custom/system", + "disk", + "cpu", + "memory", + "hyprland/language" + ] + }, + + // Group Settings + "group/settings": { + "orientation": "inherit", + "drawer": { + "transition-duration": 300, + "children-class": "not-memory", + "transition-left-to-right": false + }, + "modules": [ + "custom/settings", + "custom/waybarthemes", + "custom/wallpaper" + ] + }, + + // Group Quicklinks + "group/quicklinks": { + "orientation": "horizontal", + "modules": [ + "custom/filemanager", + "custom/browser" + ] + }, + + // Network + "network": { + "format": "{ifname}", + "format-wifi": " {signalStrength}%", + "format-ethernet": " {ipaddr}", + "format-disconnected": "Not connected", //An empty format will hide the module. + "tooltip-format": " {ifname} via {gwaddri}", + "tooltip-format-wifi": " {essid} ({signalStrength}%)", + "tooltip-format-ethernet": " {ifname} ({ipaddr}/{cidr})", + "tooltip-format-disconnected": "Disconnected", + "max-length": 50, + "on-click": "alacritty -e nmtui" + }, + + // Battery + "battery": { + "states": { + // "good": 95, + "warning": 30, + "critical": 15 + }, + "format": "{icon} {capacity}%", + "format-charging": " {capacity}%", + "format-plugged": " {capacity}%", + "format-alt": "{icon} {time}", + // "format-good": "", // An empty format will hide the module + // "format-full": "", + "format-icons": [" ", " ", " ", " ", " "] + }, + + // Pulseaudio + "pulseaudio": { + // "scroll-step": 1, // %, can be a float + "format": "{icon} {volume}%", + "format-bluetooth": "{volume}% {icon} {format_source}", + "format-bluetooth-muted": " {icon} {format_source}", + "format-muted": " {format_source}", + "format-source": "{volume}% ", + "format-source-muted": "", + "format-icons": { + "headphone": "", + "hands-free": "", + "headset": "", + "phone": "", + "portable": "", + "car": "", + "default": ["", " ", " "] + }, + "on-click": "pavucontrol" + }, + + // Bluetooth + "bluetooth": { + "format-disabled": "", + "format-off": "", + "interval": 30, + "on-click": "blueman-manager", + "format-no-controller": "" + }, + + // Other + "user": { + "format": "{user}", + "interval": 60, + "icon": false, + }, + + // Idle Inhibator + "idle_inhibitor": { + "format": "{icon}", + "tooltip": true, + "format-icons":{ + "activated": "", + "deactivated": "" + }, + "on-click-right": "hyprlock" + } +} diff --git a/waybar/themes/custom/style.css b/waybar/themes/custom/style.css new file mode 100644 index 0000000..fd877a2 --- /dev/null +++ b/waybar/themes/custom/style.css @@ -0,0 +1,430 @@ +/* + * __ __ _ ____ _ _ + * \ \ / /_ _ _ _| |__ __ _ _ __ / ___|| |_ _ _| | ___ + * \ \ /\ / / _` | | | | '_ \ / _` | '__| \___ \| __| | | | |/ _ \ + * \ V V / (_| | |_| | |_) | (_| | | ___) | |_| |_| | | __/ + * \_/\_/ \__,_|\__, |_.__/ \__,_|_| |____/ \__|\__, |_|\___| + * |___/ |___/ + * + * by Stephan Raabe (2023) + * ----------------------------------------------------- +*/ + +/* ----------------------------------------------------- + * Import Pywal colors + * ----------------------------------------------------- */ +/* @import 'style-light.css'; */ +/* @define-color backgroundlight #FFFFFF; +@define-color backgrounddark #FFFFFF; +@define-color workspacesbackground1 #FFFFFF; +@define-color workspacesbackground2 #CCCCCC; +@define-color bordercolor #FFFFFF; +@define-color textcolor1 #000000; +@define-color textcolor2 #000000; +@define-color textcolor3 #FFFFFF; +@define-color iconcolor #FFFFFF; */ + +/* ----------------------------------------------------- + * General + * ----------------------------------------------------- */ + +* { + font-family: "Fira Sans Semibold", FontAwesome, Roboto, Helvetica, Arial, sans-serif; + border: none; + border-radius: 0px; +} + +window#waybar { + background-color: rgba(0,0,0,0.2); + border-bottom: 0px solid #ffffff; + /* color: #FFFFFF; */ + transition-property: background-color; + transition-duration: .5s; +} + +/* ----------------------------------------------------- + * Workspaces + * ----------------------------------------------------- */ + +#workspaces { + margin: 5px 1px 6px 1px; + padding: 0px 1px; + border-radius: 15px; + border: 0px; + font-weight: bold; + font-style: normal; + font-size: 16px; + color: @textcolor1; +} + +#workspaces button { + padding: 0px 5px; + margin: 4px 3px; + border-radius: 15px; + border: 0px; + color: @textcolor3; + transition: all 0.3s ease-in-out; +} + +#workspaces button.active { + color: @textcolor1; + background: @workspacesbackground2; + border-radius: 15px; + min-width: 40px; + transition: all 0.3s ease-in-out; +} + +#workspaces button:hover { + color: @textcolor1; + background: @workspacesbackground2; + border-radius: 15px; +} + +/* ----------------------------------------------------- + * Tooltips + * ----------------------------------------------------- */ + +tooltip { + border-radius: 10px; + background-color: @backgroundlight; + opacity:0.8; + padding:20px; + margin:0px; +} + +tooltip label { + color: @textcolor2; +} + +/* ----------------------------------------------------- + * Window + * ----------------------------------------------------- */ + +#window { + background: @backgroundlight; + margin: 10px 15px 10px 0px; + padding: 2px 10px 0px 10px; + border-radius: 12px; + color:@textcolor2; + font-size:16px; + font-weight:normal; +} + +window#waybar.empty #window { + background-color:transparent; +} + +/* ----------------------------------------------------- + * Taskbar + * ----------------------------------------------------- */ + +#taskbar { + background: @backgroundlight; + margin: 6px 15px 6px 0px; + padding:0px; + border-radius: 15px; + font-weight: normal; + font-style: normal; + border: 3px solid @backgroundlight; +} + +#taskbar button { + margin:0; + border-radius: 15px; + padding: 0px 5px 0px 5px; +} + +/* ----------------------------------------------------- + * Modules + * ----------------------------------------------------- */ + +.modules-left > widget:first-child > #workspaces { + margin-left: 0; +} + +.modules-right > widget:last-child > #workspaces { + margin-right: 0; +} + +/* ----------------------------------------------------- + * Custom Quicklinks + * ----------------------------------------------------- */ + +#custom-brave, +#custom-browser, +#custom-keybindings, +#custom-outlook, +#custom-filemanager, +#custom-teams, +#custom-chatgpt, +#custom-calculator, +#custom-windowsvm, +#custom-cliphist, +#custom-wallpaper, +#custom-settings, +#custom-wallpaper, +#custom-system, +#custom-waybarthemes { + margin-right: 23px; + font-size: 20px; + font-weight: bold; + color: @iconcolor; +} + + #custom-waybarthemes,#custom-system { + margin-right:15px; + } + + + #custom-ml4w-welcome { + margin-right: 15px; + background-image: url("../assets/ml4w-icon.png"); + background-repeat: no-repeat; + background-position: center; + padding-right: 24px; +} + +/* ----------------------------------------------------- + * Idle Inhibator + * ----------------------------------------------------- */ + + #idle_inhibitor { + margin-right: 15px; + font-size: 22px; + font-weight: bold; + opacity: 0.8; + color: @iconcolor; +} + +#idle_inhibitor.activated { + margin-right: 15px; + font-size: 20px; + font-weight: bold; + opacity: 0.8; + color: #dc2f2f; +} + +/* ----------------------------------------------------- + * Custom Modules + * ----------------------------------------------------- */ + +#custom-appmenu { + background-color: @backgrounddark; + font-size: 16px; + color: @textcolor1; + border-radius: 15px; + padding: 2px 10px 0px 10px; + margin: 10px 15px 10px 10px; +} + +/* ----------------------------------------------------- + * Custom Exit + * ----------------------------------------------------- */ + +#custom-exit { + margin: 0px 20px 0px 0px; + padding:0px; + font-size:20px; + color: @iconcolor; +} + +/* ----------------------------------------------------- + * Custom Updates + * ----------------------------------------------------- */ + +#custom-updates { + background-color: @backgroundlight; + font-size: 16px; + color: @textcolor2; + border-radius: 15px; + padding: 2px 10px 0px 10px; + margin: 10px 15px 10px 0px; +} + +#custom-updates.green { + background-color: @backgroundlight; +} + +#custom-updates.yellow { + background-color: #ff9a3c; + color: #FFFFFF; +} + +#custom-updates.red { + background-color: #dc2f2f; + color: #FFFFFF; +} + +/* ----------------------------------------------------- + * Custom Youtube + * ----------------------------------------------------- */ + +#custom-youtube { + background-color: @backgroundlight; + font-size: 16px; + color: @textcolor2; + border-radius: 15px; + padding: 2px 10px 0px 10px; + margin: 10px 15px 10px 0px; +} + +/* ----------------------------------------------------- + * Hardware Group + * ----------------------------------------------------- */ + + #disk,#memory,#cpu,#language { + margin:0px; + padding:0px; + font-size:16px; + color:@iconcolor; +} + +#language { + margin-right:10px; +} + +/* ----------------------------------------------------- + * Clock + * ----------------------------------------------------- */ + +#clock { + background-color: @backgrounddark; + font-size: 16px; + color: @textcolor1; + border-radius: 15px; + padding: 2px 10px 0px 10px; + margin: 10px 15px 10px 0px; +} + +/* ----------------------------------------------------- + * Pulseaudio + * ----------------------------------------------------- */ + +#pulseaudio { + background-color: @backgroundlight; + font-size: 16px; + color: @textcolor2; + border-radius: 15px; + padding: 2px 10px 0px 10px; + margin: 10px 15px 10px 0px; +} + +#pulseaudio.muted { + background-color: @backgrounddark; + color: @textcolor1; +} + +/* ----------------------------------------------------- + * Network + * ----------------------------------------------------- */ + +#network { + background-color: @backgroundlight; + font-size: 16px; + color: @textcolor2; + border-radius: 15px; + padding: 2px 10px 0px 10px; + margin: 10px 15px 10px 0px; +} + +#network.ethernet { + background-color: @backgroundlight; + color: @textcolor2; +} + +#network.wifi { + background-color: @backgroundlight; + color: @textcolor2; +} + +/* ----------------------------------------------------- + * Bluetooth + * ----------------------------------------------------- */ + + #bluetooth, #bluetooth.on, #bluetooth.connected { + background-color: @backgroundlight; + font-size: 16px; + color: @textcolor2; + border-radius: 15px; + padding: 2px 10px 0px 10px; + margin: 10px 15px 10px 0px; +} + +#bluetooth.off { + background-color: transparent; + padding: 0px; + margin: 0px; +} + +/* ----------------------------------------------------- + * Battery + * ----------------------------------------------------- */ + +#battery { + background-color: @backgroundlight; + font-size: 16px; + color: @textcolor2; + border-radius: 15px; + padding: 2px 15px 0px 10px; + margin: 10px 15px 10px 0px; +} + +#battery.charging, #battery.plugged { + color: @textcolor2; + background-color: @backgroundlight; +} + +@keyframes blink { + to { + background-color: @backgroundlight; + color: @textcolor2; + } +} + +#battery.critical:not(.charging) { + background-color: #f53c3c; + color: @textcolor3; + animation-name: blink; + animation-duration: 0.5s; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; +} + +/* ----------------------------------------------------- + * Tray + * ----------------------------------------------------- */ + +#tray { + background-color: #2980b9; +} + +#tray > .passive { + -gtk-icon-effect: dim; +} + +#tray > .needs-attention { + -gtk-icon-effect: highlight; + background-color: #eb4d4b; +} + +/* ----------------------------------------------------- + * Other + * ----------------------------------------------------- */ + +label:focus { + background-color: #000000; +} + +#backlight { + background-color: #90b1b1; +} + +#network { + background-color: #2980b9; +} + +#network.disconnected { + background-color: #f53c3c; +} +