redid waybar in new style in tokyonight colors, updated sway and rofi configs with tokyonight colors too

This commit is contained in:
Mike G 2024-09-23 19:54:59 -04:00
parent 664f0b6e1a
commit c9ab46a674
4 changed files with 273 additions and 256 deletions

View file

@ -1,5 +1,5 @@
configuration {
font: "Hack 16";
font: "Hack 14";
display-drun: "󰀻 ";
drun-display-format: "{icon} {name}";
modi: "run";
@ -10,12 +10,13 @@ configuration {
@theme "/dev/null"
* {
bg: #1e1e2e99;
bg-alt: #585b7099;
bg-selected: #31324499;
bg: #222436;
bg-alt: #2d3f76;
bg-selected: #4fd6be;
fg: #cdd6f4;
fg-alt: #7f849c;
fg: #c8d3f5;
fg-alt: #c8d3f5;
fg-selected: #222436;
border: 0;
margin: 0;
@ -36,7 +37,7 @@ element {
}
element selected {
text-color: @fg;
text-color: @fg-selected;
background-color: @bg-selected;
}
@ -55,7 +56,7 @@ element-icon {
entry {
padding: 12;
background-color: @bg-alt;
text-color: @fg;
text-color: @fg-alt;
font: "Hack 28";
}

View file

@ -39,7 +39,8 @@ bindsym $mod+Shift+n exec swaync-client -t -sw
# output * bg /usr/share/backgrounds/sway/Sway_Wallpaper_Blue_1920x1080.png fill
# output * bg ~/Wallpapers/orangeMountains.png fill
# output * bg #c0caf5 solid_color
output * bg ~/Wallpapers/wp9285156.jpg fill
# output * bg ~/Wallpapers/wp9285156.jpg fill
output * bg ~/Source/tokyonight-wallpapers/tron_original.png fill
#
# Example configuration:
#
@ -62,7 +63,7 @@ output eDP-1 resolution 1920x1080 position 0,0
# your displays after another 300 seconds, and turn your screens back on when
# resumed. It will also lock your screen before your computer goes to sleep.
set $lock 'swaylock -e -F -i ~/Wallpapers/orangeMountains.png'
set $lock 'swaylock -e -F -i /home/emge/Source/tokyonight-wallpapers/fly_original.png'
exec swayidle -w \
timeout 300 $lock \
timeout 310 'swaymsg "output * power off"' resume 'swaymsg "output * power on"' \
@ -270,8 +271,12 @@ bar {
gaps inner 10
# Remove title bars
default_border pixel 2
#default_border pixel 0
include /etc/sway/config.d/*
client.focused "#ecf0c1" "#ecf0c1" "#041e23" "#ecf0c1"
# client.focused
# client.unfocused
# class <border> <background> <text> [<indicator> <chile_border>]
client.focused "#82aaff" "#82aaff" "#1b1d2b"
client.unfocused "#2d3f76" "#2d3f76" "#ff757f"

View file

@ -1,144 +1,165 @@
{
"layer": "top",
"position": "top",
"modules-left":
[
"sway/workspaces",
"sway/scratchpad",
"custom/logo",
"clock",
"cpu",
"disk",
"memory",
"temperature",
"sway/window"
],
"modules-center":
[
"clock"
"sway/workspaces"
],
"modules-right":
[
"tray",
"custom/temp2",
"custom/notification",
"custom/pacman",
"custom/updates",
"backlight",
"pulseaudio",
"network",
"bluetooth",
"idle_inhibitor",
"battery"
],
"spacing": 0,
"reload_style_on_change": true,
"clock":
{
"clock": {
"interval": 60,
"tooltip": true,
"format": "{:%a %b %d %I:%M %p}",
"tooltip-format": "<tt><small>{calendar}</small></tt>",
"calendar":
{
"format": "{:%a %b %e %I:%M}",
"tooltip-format": "<tt>{calendar}</tt>",
"calendar": {
"mode" : "year",
"mode-mon-col": 3,
"weeks-pos" : "right",
"on-scroll" : 1,
"on-click-right" : "mode",
"format" :
{
"months" : "<span color='#FFEAD3'><b>{}</b></span>",
"days" : "<span color='#ECC6D9'><b>{}</b></span>",
"weeks" : "<span color='#99FFDD'><b>W{}</b></span>",
"weekdays" : "<span color='#FFCC66'><b>{}</b></span>",
"today" : "<span color='#FF6699'><b><u>{}</u></b></span>"
"format": {
"months" : "<span color='#ffc777'><b>{}</b></span>",
"days" : "<span color='#c8d3f5'><b>{}</b></span>",
"weeks" : "<span color='#4fd6be'><b>W{}</b></span>",
"weekdays" : "<span color='#c099ff'><b>{}</b></span>",
"today" : "<span color='#ff757f'><b>{}</b></span>"
}
},
"actions":
{
"on-click-right" : "mode",
"on-click-forward" : "tz_up",
"on-click-backward" : "tz_down",
"on-scroll-up" : "shift_up",
"on-scroll-down" : "shift_down"
}
},
"custom/bg":
{
"format": "",
"exec": "~/Scripts/background-changer.sh",
"interval": 3600,
"on-click": "exec",
"tooltip": true,
"tooltip-format": "Click to Randomize Wallpaper"
"custom/logo": {
"format": "",
"tooltip": false
},
"battery":
{
"interval": 60,
"states":
{
"disk": {
"interval": 30,
"format": " {percentage_used}%",
"path": "/"
},
"memory": {
"format": " {percentage}%"
},
"temperature": {
"format": " {temperatureC}°C",
"format-critical": " {temperatureC}°C",
"interval": 1,
"critical-threshold": 80,
"on-click": "foot top"
},
"cpu": {
"interval": 1,
"format": "{icon}{usage}%",
"min-length": 6,
"max-length": 6,
"format-icons": ["▁", "▂", "▃", "▄", "▅", "▆", "▇", "█"]
},
"battery": {
"interval": 1,
"states": {
"warning": 30,
"critical": 15
},
"format": "{capacity}% {icon}",
"format-icons": ["", "", "", "", ""]
"format-charging": "{capacity}% 󰂄 ",
"format-plugged": "{capacity}% 󰂄 ",
"format-alt": "{time} {icon}",
"format-icons": [
"󰁻 ",
"󰁼 ",
"󰁾 ",
"󰂀 ",
"󰂂 ",
"󰁹 "
]
},
"sway/workspaces":
{
"disable-scroll": false,
"all-outputs": true,
"format": "{name}"
"sway/workspaces": {
"format": "{icon}",
"on-click": "activate",
"format-icons": {
"persistent": "",
"urgent": "",
"default": ""
},
"sort-by-number": true,
"persistent-workspaces": {
"1": [],
"2": [],
"3": [],
"4": [],
"5": [] }
},
"sway/window":
{
"format": "{}",
"sway/window": {
"format": "{app_id}",
"max-length": 50,
"icon": false
},
"sway/scratchpad":
{
"format": "{icon} {count}",
"show-empty": true,
"format-icons": ["",""],
"tooltip": true,
"tooltip-format": "{app}: {title}"
},
"idle_inhibitor":
{
"idle_inhibitor": {
"format": "{icon}",
"format-icons":
{
"format-icons": {
"activated": "󰛐",
"deactivated": "󰛑"
},
"timeout": 30.5
}
},
"network":
{
"format": "{ifname}",
"format-wifi": "{signalStrength}% ",
"format-ethernet": "{ifname} 󰈀",
"format-disconnected": ""
"network": {
"format-wifi": " ",
"format-ethernet": "󰈀 ",
"format-disconnected": " ",
"tooltip-format": "{ipaddr}",
"tooltip-format-wifi": "{essid} ({signalStrength}%)  | {ipaddr}",
"tooltip-format-ethernet": "{ifname} 󰈀 | {ipaddr}",
"on-click": "bash /home/emge/Source/rofi-wifi-menu/rofi-wifi-menu.sh"
},
"pulseaudio":
{
"format": "{volume}% {icon}",
"format-bluetooth": "{volume}% {icon} ",
"format-muted": "",
"format-icons":
{
"pulseaudio": {
"format": "{icon}",
"format-bluetooth": "󰂰 ",
"format-muted": " ",
"format-icons": {
"default": ["", ""]
},
"scroll-step": 1
"justify": "center",
"tooltip-format": "{icon} {volume}%"
},
"backlight":
{
"format": "{percent}% {icon}",
"format-icons": ["󰃞","󰃟","󰃠"],
"on-scroll-up": "brightnessctl set 1+",
"on-scroll-down": "brightnessctl set 1-",
"scroll-step": 0.5
"backlight": {
"format": "{icon}",
"format-icons": [
"󰃞",
"󰃝",
"󰃟",
"󰃠"
],
"tooltip-format": "{percent}% {icon}"
},
"custom/notification": {
@ -162,29 +183,28 @@
"escape": true
},
"custom/pacman": {
"format": "{icon}{}",
"custom/updates": {
"format": "{icon}",
"return-type": "json",
"format-icons": {
"pending-updates": " ",
"has-updates": " ",
"updated": ""
},
"exec-if": "which waybar-updates",
"exec": "waybar-updates"
"exec-if": "which waybar-module-pacman-updates",
"exec": "waybar-module-pacman-updates --interval-seconds 5 --network-interval-seconds 300"
},
"temperature": {
"thermal-zone": 0,
"critical-threshold": 80,
"formate-critical": "{temperatureC}°C",
"format": "{temperatureC}°C"
},
"custom/temp2": {
"hwmon-path": ["/sys/class/hwmon/hwmon2/temp1_input", "/sys/class/thermal/thermal_zone0/temp"],
"critical-threshold": 80,
"formate-critical": "{temperatureC}°C",
"format": "{temperatureC}°C"
"bluetooth": {
"format-on": "",
"format-off": "󰂯",
"format-disabled": "󰂲",
"format-connection": "󰂴",
"format-connected-battery": "{device_battery_percentage}% 󰂴",
"tooltip-format": "{controller_alias}\t{controller_address}\n\n{num_connections} connected",
"tooltip-format-connected": "{controller_alias}\t{controller_address}\n\n{num_connections} connected\n\n{device_enumerate}",
"tooltip-format-enumerate-connected": "{device_alias}\t{device_address}",
"tooltip-format-enumerate-connected-battery": "{device_alias}\t{device_address}\t{device_battery_percentage}%",
"on-click": "rofi-bluetooth"
},
"tray": {

View file

@ -5,12 +5,32 @@ use as `@variable_name`
shade, mix, and alpha modifiers are available
*/
@define-color primary_bg_color #041e23;
@define-color primary_fg_color #ecf0c1;
@define-color accent_color_1 #06afc7; /* used for tooltip border and active states */
@define-color accent_color_2 #5cab96; /* used for battery charging background */
@define-color accent_color_3 #e3cd7b; /* used for battery low background */
@define-color accent_color_4 #684c31; /* used for batter low foreground */
@define-color foreground #c8d3f5;
@define-color background #222436;
@define-color selection-foreground #c8d3f5;
@define-color selection-background #2d3f76;
@define-color urls #4fd6be;
@define-color regular0 #1b1d2b;
@define-color regular1 #ff757f;
@define-color regular2 #c3e88d;
@define-color regular3 #ffc777;
@define-color regular4 #82aaff;
@define-color regular5 #c099ff;
@define-color regular6 #86e1fc;
@define-color regular7 #828bb8;
@define-color bright0 #444a73;
@define-color bright1 #ff757f;
@define-color bright2 #c3e88d;
@define-color bright3 #ffc777;
@define-color bright4 #82aaff;
@define-color bright5 #c099ff;
@define-color bright6 #86e1fc;
@define-color bright7 #c8d3f5;
@define-color 16 #ff966c;
@define-color 17 #c53b53;
* {
border: none;
@ -21,140 +41,111 @@ shade, mix, and alpha modifiers are available
}
window#waybar {
background-color: @primary_bg_color;
color: @primary_fg_color;
border-bottom: 1px solid @primary_fg_color;
background-color: transparent;
color: @foreground;
margin: 5px;
}
tooltip {
border-radius: 15px;
background-color: @bright0;
color: @bright7;
border: 1px solid @selection-foreground;
}
#custom-logo {
padding: 0 10px;
}
.modules-right {
border-radius: 15px 0 0 15px;
background: @selection-background;
}
.modules-center {
border-radius: 15px;
background: @selection-background;
}
.modules-left {
border-radius: 0 15px 15px 0;
background: @selection-background;
}
#workspaces,
#window,
#custom-logo,
#disk,
#memory,
#cpu,
#temperature,
#clock,
#tray,
#custom-notification,
#custom-updates,
#backlight,
#bluetooth,
#pulseaudio,
#network,
#idle_inhibitor,
#battery {
padding: 0 15px;
border-radius: 15px;
}
#custom-logo {
color: @urls;
}
#clock {
background-color: @foreground;
color: @background;
}
#window {
padding: 0 10px;
background-color: @foreground;
color: @background;
}
tooltip
{
background: rgba(4, 30, 35, 0.85);
border: 2px solid @accent_color_1;
border-radius: 10px;
#workspaces button:hover {
color: @urls;
background: none;
border: none;
}
tooltip label
{
color: white;
#workspaces button.visible {
color: @16;
}
#workspaces button
{
padding: 0 5px;
background: transparent;
color: @primary_fg_color;
#temperature.critical,
#pulseaudio.muted,
#idle_inhibitor.activated,
#workspaces button.urgent {
color: @17;
}
#workspaces button.focused
{
border-bottom: 3px solid @primary_fg_color;
#battery {
background-color: @foreground;
color: @background;
border-radius: 15px 0 0 15px;
}
#custom-bg
{
padding: 0 10px;
border-right: 1px solid @primary_fg_color;
#battery.charging {
background-color: @urls;
}
#custom-pacman
{
padding: 0 10px;
border-right: 1px solid @primary_fg_color;
#battery.warning:not(.charging) {
background-color: @16;
}
#scratchpad
{
color: @primary_bg_color;
background-color: @primary_fg_color;
padding: 0 10px;
#battery.critical:not(.charging) {
background-color: @17;
}
#custom-notification
{
padding: 0 10px;
border-right: 1px solid @primary_fg_color;
#tray {
background-color: @foreground;
}
#mode, #clock, #battery
{
padding: 0px 10px;
}
#pulseaudio
{
padding: 0 10px;
border-right: 1px solid @primary_fg_color;
}
#battery
{
background-color: @primary_fg_color;
color: @primary_bg_color;
font-weight: bold;
}
#battery.charging
{
background-color: @accent_color_2;
color: @primary_fg_color;
}
#battery.warning:not(.charging)
{
background-color: @accent_color_3;
color: @accent_color_4;
}
#idle_inhibitor
{
padding: 0 10px;
}
#network
{
padding: 0 10px;
border-right: 1px solid @primary_fg_color;
}
#idle_inhibitor.activated
{
color: @accent_color_1;
}
#backlight
{
padding: 0 10px;
border-right: 1px solid @primary_fg_color;
}
@keyframes blink-update
{
to
{
background-color: dodgerblue;
}
}
#custom-pacman
{
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#custom-pacman.pending-updates
{
animation-name: blink-update;
animation-duration: 3s;
}
#tray
{
padding: 0 10px;
background-color: @primary_fg_color;
margin: 0 5px;
#custom-updates.has-updates {
color: @16;
}