My Sway theme [with manual]

This topic is created on a special request by SGS on post in screenshot of Garuda linux :

for my sway theming :

first for waybar (~/.config/waybar/style.css) :

/* =============================================================================
 *
 * Waybar configuration
 *
 * Configuration reference: https://github.com/Alexays/Waybar/wiki/Configuration
 *
 * =========================================================================== */
 
/* -----------------------------------------------------------------------------
 * Keyframes
 * -------------------------------------------------------------------------- */


/*
Polar Night
nord0  #2e3440
nord1  #3b4252
nord2  #434c5e
nord3  #4c566a
Snow Storm
nord4  #d8dee9
nord5  #e5e9f0
nord6  #eceff4
Frost
nord7  #8fbcbb
nord8  #88c0d0
nord9  #81a1c1
nord10 #5e81ac
Aurora
nord11 #bf616a
nord12 #d08770
nord13 #ebcb8b
nord14 #a3be8c
nord15 #b48ead
*/

/* -----------------------------------------------------------------------------
 * Base styles
 * -------------------------------------------------------------------------- */
 
/* Reset all styles */

* {
    color: #eceff4;
    border: 0;
    border-radius: 0;
    padding: 0 0;
    font-family:UbuntuMono;
    font-size: 15px;
    margin-right: 5px;
    margin-left: 5px;
    padding-bottom:3px;
   }

window#waybar {
    background:rgba (0, 0, 0, 0.55);
}

#workspaces button {
    padding: 2px 0px;
    border-bottom: 2px;
    color: #eceff4;
    border-color: #d8dee9;
    border-style: solid;
    margin-top:2px;
}

#workspaces button.focused {
    border-color: #81a1c1;
}

#mode {
    color: #ebcb8b;
}

#clock, #battery, #cpu, #memory,#idle_inhibitor, #temperature,#custom-keyboard-layout, #backlight, #network, #pulseaudio, #mode, #tray, #window,#custom-launcher,#custom-power,#custom-pacman {
    padding: 0 3px;
    border-bottom: 2px;
    border-style: solid;
}
 
/* -----------------------------------------------------------------------------
 * Module styles
 * -------------------------------------------------------------------------- */

 
#clock {
 color:#a3be8c;
}

#backlight {
    color: #ebcb8b;
}

#battery {
    color: #d8dee9;
}

#battery.charging {
    color: #81a1c1;
}

@keyframes blink {
    to {
        color: #4c566a;
        background-color: #eceff4;
    }
}

#battery.critical:not(.charging) {
    background: #bf616a;
    color: #eceff4;
    animation-name: blink;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

#cpu {
    color:#a3be8c ;
}

#memory {
    color: #d3869b;
}

#network.disabled {
    color:#bf616a;
}

#network{
    color:#a3be8c;
}

#network.disconnected {
    color: #bf616a;
}

#pulseaudio {
    color: #b48ead;
}

#pulseaudio.muted {
    color: #3b4252;
}

#temperature {
    color: #8fbcbb;
}

#temperature.critical {
    color: #bf616a;
}

#idle_inhibitor {
   color: #ebcb8b;
}

#tray {
}

#custom-launcher,#custom-power{
    border-style: hidden;
    margin-top:2px;    
}

#window{
    border-style: hidden;
    margin-top:1px;  
}    
#mode{
    margin-bottom:3px;
}

#custom-keyboard-layout{
   color:#d08770;
}   


7 Likes

Now for nwg drawer (~/.config/nwg-drawer/drawer.css) :

window {
    background-color: rgba (0, 0, 0, 0.50);
    color: #1d1f21 
}

/* search entry */
entry {
    box-shadow: 0 0 6px 5px #2e3440;
    background-color: rgba (0, 0, 0, 0.2)
}

button, image {
    background-color: #FF2222;
    background: none;
    border: none;
    margin: 4px;

}

button:hover {
    background-color: rgba (255, 0, 0, 0.2)
}

button:focus {
    background-color: rgba (225, 0, 0, 0.3);
}

/* in case you wanted to give category buttons a different look */
#category-button {
    margin: 0 10px 0 10px
}

#pinned-box {
    padding-bottom: 5px;
    border-bottom: 1px dotted gray
}

#files-box {
    padding: 5px;
    border: 1px dotted gray;
    border-radius: 15px
}

Now for wofi (~/.config/wofi/style.css)

/*
scheme: "Nord"
author: "arcticicestudio"
*/

@define-color base10 #2E3440;
@define-color base00 #3B4252;
@define-color base02 #434C5E;
@define-color base03 #4C566A;
@define-color base04 #D8DEE9;
@define-color base05 #E5E9F0;
@define-color base06 #ECEFF4;
@define-color base07 #8FBCBB;
@define-color base08 #88C0D0;
@define-color base09 #81A1C1;
@define-color base0A #5E81AC;
@define-color base0B #BF616A;
@define-color base0C #D08770;
@define-color base0D #EBCB8B;
@define-color base0E #A3BE8C;
@define-color base0F #B48EAD;

#entry {
border-radius: 0px;
padding: 5px 2px 5px 2px;
margin: 0px 4px 0px 4px;
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

#entry:selected {
color: @base0D;
background-color: rgba (255,0,0,0.3);
padding: 7px;
}
 
#text:selected {
color: @base04;
}
 
#window {
animation-name: fadeIn;
animation-duration: 0.4s;
background-color: transparent;
font-family: Ubuntu Mono;
/* font-size:14; */
}

#input {
border: none;
background-color: rgba (0,0,0,0.6);
border-radius: 0px;
margin: 4px 4px 8px 4px;
padding: 8px;
}

#inner-box {
color: rgba (255,0,0,0.5);
border-radius: 0px;
/* margin-right: 180px; */
}

#outer-box {
background-color: rgba (0,0,0,0.5);
border-radius: 0px;
border: 1px solid #474747;
padding: 10px;
box-shadow: 0px 0px 3px 1px  #0F0F0F;
margin: 25px;
}

#scroll {
}

#text {
color: @base04;
background-color: transparent;
} 

#img {
  background-color: transparent;
}

Now for nwgbar (~/.config/nwg-launchers/nwgbar/style.css) :

#bar {
    margin: 30px; /* affects top/bottom & left/right alignment */
    font-size: 16px;
    font-family: Product Sans;
}

button, image {
    background: none;
    border-style: none;
    box-shadow: none;
    color:#eceff4;
}

button {
    padding-top: 10px;
    margin: 5px
}

button:hover {
    background-color: rgba (255,0,0,0.5);
}

button:focus {
    background-color: rgba (255,0,0,0.5);
}

grid {
    background-color: rgba(0,0,0,0.7);
    border-radius: 5px;
    padding: 5px;
    box-shadow: 0 0 50px rgba(255,0,0,0.7);
    /* e.g. for common background to all buttons */
}

Thank you @SGS for giving me this opportunity
and one more request that can my theming for sway be the default themeing out of the box for sway edition :sweat_smile: (If you like it ... )

5 Likes

No problem, btw, no need to ping team-members with @SGS, as sample, we read every post even if we can't or won't answer. :smiley:

Sway is maintained by OdiousImp so ...
[We have here the motto every maintainer does his thing and as it pleases him :slight_smile: ]

But it is “easy” now for every one to use your Theme, thank you for posting.

@Ankur Sorry, I must change you first post :wink:

Headline too :slight_smile:

5 Likes

No worries , you can do it as you want :wink:
because now I have classes ....

1 Like

Hi guys! You may also like some other ideas I posted yesterday on reddit.

5 Likes

Flameshot needed :slight_smile:

6 Likes

I didn't thought that this will look so beautiful even without changing the default icons :star_struck:

I would like to say that you will feel different when you change the default configs of linux without having programming knowledge :joy:

1 Like

7 Likes

I was thinking the same but didn't knew how to do it :star_struck:
Can you tell me ? :smiley:
I mean I was not able to found from where to change wallpapers of login page...

In

sudo micro /etc/qtgreet/config.ini

change name to your.svg

sudo cp  your.svg /usr/share/qtgreet/backgrounds/your.svg

Done :wink:

1 Like

Done !!
But looks somewhat greyish :thinking:
Can that be changed through base colour.....

2 Likes

Normal :wink:

IDK the "color" settings in

Try other Basecolor ffffffc1 ???

PNG work too?

1 Like

Yeah that worked :wink:

[General]
Background = /usr/share/qtgreet/backgrounds/sway-sgs.png
BaseColor = ffffffc1
TextColor = ffffff
2 Likes

BTW,

exec /usr/share/sway/scripts/inactive-windows-transparency.py --opacity 0.85 # or 1.0

and other things I try, do not work, also deleting inactive-windows-transparency.py from scripts.

I do not want transparency/opacity in inactive windows :slight_smile:

1 Like
micro .config/sway/config.d/autostart_applications

on line 14 make the line commented like this

#exec python3 ~/.config/sway/scripts/swayfader.py

I also disabled it for sometime then reconfigured so that it look good
(in ~/.config/sway/scripts/swayfader.py)
I did this :

from i3ipc import Connection, Event
from threading import Thread
from time import sleep


FRAME_T = 0.01  # time taken between each frame of fade

# transparency values
CON_AC     = 1     # active window
CON_INAC   = 0.95   # inactive window
FLOAT_AC   = 1     # active floating window
FLOAT_INAC = 0.90  # inactive floating window
BOT_INAC   = 0.80   # bottom window


# fade durations
FADE_TIME      = 0.2
ALT_FADE_TIME  = 0.1

CON_OUT        = FADE_TIME      # window fading out
CON_IN         = 0.15           # window fading in
FLOAT_OUT      = ALT_FADE_TIME  # floating window fading out
FLOAT_IN       = ALT_FADE_TIME  # floating window fading in
BOT_OUT        = ALT_FADE_TIME  # bottom window fading out
BOT_IN         = ALT_FADE_TIME  # bottom window fading in
BOT_SWITCH_IN  = FADE_TIME      # window becoming bottom window
BOT_SWITCH_OUT = FADE_TIME      # bottom window becoming window
FLOAT_BOT_OUT  = FADE_TIME      # floating window fading out from bottom
FLOAT_BOT_IN   = FADE_TIME      # floating window fading in from bottom


class Fader:
    def __init__(self):
        self.floating_windows = []
        self.fader_running    = False
        self.fade_queue       = []
        self.fade_data        = {}
        self.bottom_win       = None
        self.old_win          = None
        self.active_win       = None

        ipc = Connection()
        ipc.on(Event.WINDOW_FOCUS,    self.on_window_focus)
        ipc.on(Event.WINDOW_NEW,      self.on_window_new)
        ipc.on(Event.WINDOW_FLOATING, self.on_window_floating)

        for win in ipc.get_tree():
            if win.type == "floating_con":
                self.floating_windows.append(win.id)
                if win.focused:
                    change_opacity(win, FLOAT_AC)
                    self.active_win = win
                else:
                    change_opacity(win, FLOAT_INAC)
            elif win.type == "con":
                if win.focused:
                    self.active_win = win
                    change_opacity(win, CON_AC)
                else:
                    change_opacity(win, CON_INAC)

        ipc.main()

    def add_fade(self, win, start, target, duration):
        if not duration:
            if win.id in self.fade_queue:
                self.fade_queue.remove(win.id)
                del self.fade_data[win.id]
            change_opacity(win, target)
            return

        if win.id in self.fade_queue:
            f = self.fade_data[win.id]
            change = (FRAME_T / duration) * (target - f["opacity"])
            f["change"] = change
            f["target"] = target
            return

        change_opacity(win, start)
        change = (FRAME_T / duration) * (target - start)
        fade_data = {"opacity": start, "change": change, "target": target, "win": win}
        self.fade_queue.append(win.id)
        self.fade_data[win.id] = fade_data

    def start_fader(self):
        if not self.fader_running:
            self.fader_running = True
            Thread(target=self.fader).start()

    def fader(self):
        while self.fade_queue:
            for win_id in self.fade_queue.copy():
                try:
                    f = self.fade_data[win_id]
                except KeyError:
                    continue
                f["opacity"] += f["change"]

                finished = False
                if f["change"] > 0:
                    if f["opacity"] >= f["target"]:
                        finished = True
                elif f["opacity"] <= f["target"]:
                    finished = True

                if finished:
                    change_opacity(f["win"], f["target"])
                    try:
                        self.fade_queue.remove(win_id)
                        del self.fade_data[win_id]
                    except (KeyError, ValueError):
                        continue
                else:
                    change_opacity(f["win"], f["opacity"])

            sleep(FRAME_T)
        self.fader_running = False

    def on_window_focus(self, ipc, e):
        if self.active_win.id == e.container.id:
            return

        if self.active_win.type == "con":
            if e.container.type == "con":
                self.add_fade(
                    e.container, CON_INAC,
                    CON_AC, CON_IN)
                self.add_fade(
                    self.active_win, CON_AC,
                    CON_INAC, CON_OUT)

            else:
                self.add_fade(
                    e.container, FLOAT_INAC,
                    FLOAT_AC, FLOAT_IN)
                self.add_fade(
                    self.active_win, CON_AC,
                    BOT_INAC, BOT_OUT)
                self.bottom_win = self.active_win

        else:
            if e.container.type == "con":
                self.add_fade(
                    self.active_win, FLOAT_AC,
                    FLOAT_INAC, FLOAT_BOT_OUT)

                if not self.bottom_win:
                    self.add_fade(
                        e.container, CON_INAC,
                        CON_AC, CON_IN)

                elif e.container.id != self.bottom_win.id:
                    self.add_fade(
                        self.bottom_win, BOT_INAC,
                        CON_INAC, BOT_SWITCH_OUT)
                    self.add_fade(
                        e.container, CON_INAC,
                        CON_AC, BOT_SWITCH_IN)
                    self.bottom_win = e.container

                else:
                    self.add_fade(
                        self.bottom_win, BOT_INAC,
                        CON_AC, BOT_IN)

            else:
                self.add_fade(
                    self.active_win, FLOAT_AC,
                    FLOAT_INAC, FLOAT_OUT)
                self.add_fade(
                    e.container, FLOAT_INAC,
                    FLOAT_AC, FLOAT_IN)

        self.start_fader()
        self.active_win = e.container

    def on_window_new(self, ipc, e):
        if self.active_win:
            if self.active_win.type == "con":
                change_opacity(self.active_win, CON_INAC)
            else:
                change_opacity(self.active_win, FLOAT_INAC)

        if self.bottom_win:
            change_opacity(self.bottom_win, CON_INAC)

        elif self.active_win and self.active_win.type == "con":
            self.bottom_win = self.active_win
            change_opacity(self.bottom_win, CON_INAC)

        change_opacity(e.container, CON_AC)
        self.old_win = self.active_win
        self.active_win = e.container

    def on_window_floating(self, ipc, e):
        c_id = e.container.id
        if c_id not in self.floating_windows:
            self.floating_windows.append(c_id)

            if self.active_win.id != e.container.id:
                change_opacity(e.container, FLOAT_INAC)

            else:
                if self.old_win and self.bottom_win:
                    if self.old_win.type == "con":
                        self.bottom_win = self.old_win
                    change_opacity(self.bottom_win, BOT_INAC)
                change_opacity(e.container, FLOAT_AC)

        else:
            self.floating_windows.remove(c_id)
            if self.active_win.id != e.container.id:
                change_opacity(e.container, CON_INAC)

            else:
                if self.old_win and self.old_win.type == "con":
                    change_opacity(self.old_win, CON_INAC)
                change_opacity(self.active_win, CON_AC)

        self.active_win = e.container


def change_opacity(win, trans):
    win.command("opacity " + str(trans))


if __name__ == "__main__":
    Fader()

(Edit : I have configured it mainly for floating window .....)

2 Likes

It's a little different than i3 :smiley: ,
thanks, I'll try it right away.

Perfect, works :slight_smile:

1 Like

I liked this one :

[General]
Background = /usr/share/qtgreet/backgrounds/sway-sgs.png
BaseColor = FF0000
TextColor = ffffff

Just red :wink: ........

2 Likes

One request @SGS can you please give me the config file :

~/.config/nwg-launchers/nwgbar/bar.json

as the logout button was not working and I tried to fix it and it totally vanished my code (somehow) ..... :sweat_smile:

[
  {
    "name": "Lock screen",
    "exec": "swaylock -C ~/.config/swaylock/config",
    "icon": "/usr/share/nwg-launchers/nwgbar/images/lock.svg"
  },
  {
  	"name": "Suspend",
  	"exec": "systemctl suspend;swaylock -C ~/.config/swaylock/config",
  	"icon": "/usr/share/nwg-launchers/nwgbar/images/suspend.svg"
  },
  {
    "name": "Logout",
    "exec": "loginctl terminate-session self",
    "icon": "/usr/share/nwg-launchers/nwgbar/images/logout.svg"
  },
  {
    "name": "Reboot",
    "exec": "systemctl reboot",
    "icon": "/usr/share/nwg-launchers/nwgbar/images/reboot.svg"
  },
  {
    "name": "Shutdown",
    "exec": "systemctl -i poweroff",
    "icon": "/usr/share/nwg-launchers/nwgbar/images/shutdown.svg"
  }
]

Hope it is the correct one :smiley:

5 Likes

Thanks It worked fine... :smiley:

2 Likes