Show off your pimped Garuda Hyprland Edition 🎭

Preferably with instructions :slight_smile:

4 Likes

Oh God! I’m bad at this :sweat_smile:

How to install (commands copied from Github):

git clone --depth=1 https://github.com/JaKooLit/Arch-Hyprland.git
cd Arch-Hyprland
chmod +x install.sh
./install.sh

How to add your own or Garuda wallpapers:
Copy the wallpapers and move them to Pictures/wallpapers folder

Summary

THIS IS NOT MY OWN CONFIG!! :face_with_peeking_eye:

6 Likes

I love hyprland :slight_smile:

6 Likes

This wallpaper gives me flashbacks to early Garuda days!

5 Likes

Just learning new staffs…

3 Likes

BTW.

2 Likes

I just messed up my waybar style.css with prasanthrangan hyprdots css and the end result look like above :grin:. btw if anyone wants my waybar style css, here is the config:

=============================================================================
 *
 * 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 */
@define-color bar-bg rgba(0, 0, 0, 0);

@define-color main-bg #11111b;
@define-color main-fg #cdd6f4;

@define-color wb-act-bg #a6adc8;
@define-color wb-act-fg #313244;

@define-color wb-hvr-bg #f5c2e7;
@define-color wb-hvr-fg #313244;


* {
    border: none;
    border-radius: 0px;
    font-family: "JetBrainsMono Nerd Font, Font awesome";
    font-weight: bold;
    font-size: 14px;
    min-height: 10px
   }

window#waybar {
    background:transparent;
    border-radius: 20px 20px 20px 20px; 
}

#workspaces button {
box-shadow: none;
	text-shadow: none;
    padding: 0px;
    border-radius: 9px;
    margin-top: 3px;
    margin-bottom: 3px;
    padding-left: 3px;
    padding-right: 3px;
    color: @main-fg;
    animation: gradient_f 20s ease-in infinite;
    transition: all 0.5s cubic-bezier(.55,-0.68,.48,1.682);
}

#workspaces button:hover {
    background: @wb-hvr-bg;
    color: @wb-hvr-fg;
    padding-left: 3px;
    padding-right: 3px;
    animation: gradient_f 20s ease-in infinite;
    transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
}

#workspaces button.active {
background: @wb-act-bg;
    color: @wb-act-fg;
    margin-left: 3px;
    padding-left: 12px;
    padding-right: 12px;
    margin-right: 3px;
    animation: gradient_f 20s ease-in infinite;
    transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
}

#clock, #battery, #cpu, #memory,#idle_inhibitor, #temperature,#custom-keyboard-layout, #backlight, #network, #pulseaudio, #tray, #window,#custom-launcher,#custom-power,#custom-updates,#hyprland-workspaces ,#custom-network_traffic,#custom-weather{
    color: @main-fg;
    background: @main-bg;
    opacity: 1;
    margin: 4px 0px 4px 0px;
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 10px;
}
 
/* -----------------------------------------------------------------------------
 * Module styles
 * -------------------------------------------------------------------------- */

#hyprland-workspaces {
 background:@main-bg;
 margin-right: 9px;
    padding-right: 3px;
}

#clock {
 background:@main-bg;
 margin-right: 9px;
    padding-right: 3px;
}

#backlight {
    background:@main-bg;
    margin-right: 9px;
    padding-right: 3px;
}

#battery {
    background:@main-bg;
    margin-right: 9px;
    padding-right: 3px;
}

#battery.charging {
    background:@main-bg;
    margin-right: 9px;
    padding-right: 3px;
}

@keyframes blink {
    to {
        background-color: @main-bg;
        margin-right: 9px;
    padding-right: 3px;
    }
}

#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 {
    background:@main-bg;
    margin-right: 9px;
    padding-right: 3px;
}

#memory {
    background:@main-bg;
    margin-right: 9px;
    padding-right: 3px;
}

#network.disabled {
    background:@main-bg;
    margin-right: 9px;
    padding-right: 3px;
}

#network{
    background:@main-bg;
    margin-right: 9px;
    padding-right: 3px;
}

#network.disconnected {
    margin-right: 9px;
    padding-right: 3px;
}

#pulseaudio {
    background:@main-bg;
    margin-right: 9px;
    padding-right: 3px;
}

#pulseaudio.muted {
    background:@main-bg;
    margin-right: 9px;
    padding-right: 3px;
}

#temperature {
    background:@main-bg;
    margin-right: 9px;
    padding-right: 3px;
}

#temperature.critical {
    background:@main-bg;
    margin-right: 9px;
    padding-right: 3px;
}

#idle_inhibitor {
   background:@main-bg;
    margin-right: 9px;
    padding-right: 3px;
}

#tray {
background:@main-bg;
margin-right: 9px;
    padding-right: 3px;
}
#custom-launcher{
        font-size: 20px;
        background-image: url('/home/sankar/.config/waybar/launcher.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        border-style: hidden;
}

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

#window{
    border-style: hidden;
    margin-top:1px;  
}    
#custom-keyboard-layout{
   background:@main-bg;
   margin-right: 9px;
    padding-right: 3px;
}   
#custom-network_traffic{
   background:@main-bg;
   margin-right: 9px;
    padding-right: 3px;
}
2 Likes

Sorry just the wallpaper

:smiley:

10 Likes

Looks better than the original, I don’t like the greenish one that Hyprland uses.
We now only use blue.

Add it to /usr/share/wallpapers/garuda-wallpapers/.

6 Likes

Nothing flashy (like above)

Wallpaper from @TilliDie
Garuda icon from @SGS. I have changed the color of the file provided by @ Elite.

Summary

  1. Copy the icon to /.config/waybar folder
  2. In the same folder, open style.css (preferably with Geany)
  3. Scroll down to custom-launcher (see below) and in background-image: url() add the path to the icon above.
#custom-launcher{
       font-size: 23px;
       background-image: url('/home/archit/.config/waybar/Garuda-Golden-logo.png');
       background-position: center;
       background-repeat: no-repeat;
       background-size: contain;
       border-style: hidden;
}
5 Likes

I am sure it is not from him :smiley:

The svg files are at gitlab.

1 Like

5 posts were merged into an existing topic: Some other colors for the G Garuda logo

Wud love to swap my waybar for eww.

5 Likes

Beautiful , but kinda :face_with_monocle:
Watching Looking For GIF by Tennis TV
hard to see things in the waybar

3 Likes

:joy:, I don’t like my bars brighter than my workspace… looks great when you working though

https://git.yadakuroi.quest/Dots_hypr/.git/tree/

Here’s my hyprland stuff.

3 Likes

Hyprland Light!

Wallpaper by @SGS: Show your Artwork 🎨 - #1200 by SGS

Here’s a pretty easy guide (actually neither, it’s a pun intended!) to make your Hyprland light themed (and burn your retinas :imp: )

Also sorry for the strange and haphazard way of the guide, I’m not at all good at this! :cry:
Therefore, I’ve provided the entire config at the end so that no one gets lost!!

Instructions:

Making waybar light
  1. Open the file style.css in /.config/waybar/ folder.
  2. Scroll down to window#waybar and delete the value inside the brackets background:rgba (); and paste this value:
255, 255, 255, 0.70
  1. Next copy this → #2e3440 color value and scroll down till you see “Module styles”.
    There you have to paste the color value above ahead of the color: for all modules except:
  • #battery.charging
  • #keyframes blink
  • #battery.critical
  • #network.disabled
  • #network.disconnected
  • #pulseaudio.muted
  • #temperature.critical
  1. Now scroll up till “workspaces button” and paste the color from above step in color: Also change the border-color value to #81a1c1
  2. Now just below this in “workspaces button.active” replace the color value of border-color with this: #2e3440
    Entire config for reference:
* {
    color: #2e3440;
    border: 0;
    border-radius: 0;
    padding: 0 0;
    font-family:Symbols Nerd Font Mono;
    font-size: 13px;
    margin-right: 5px;
    margin-left: 5px;
    padding-bottom:1px;
   }

window#waybar {
    background:rgba (255, 255, 255, 0.70);
    border-radius: 20px 20px 20px 20px; 
}

#workspaces button {
    padding: 2px 0px;
    border-bottom: 2px;
    border-left: 2px;
    border-right: 2px;
    border-top: 2px;
    color: #2e3440;
    border-color: #81a1c1;
    border-style: solid;
    margin-top:2px;
}

#workspaces button.active {
    border-color: #2e3440;
}

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

 
#clock {
 color: #2e3440;
}

#backlight {
    color: #2e3440;
}

#battery {
    color: #2e3440;
}

#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: #2e3440;
}

#memory {
    color: #2e3440;
}

#network.disabled {
    color: #bf616a;
}

#network{
    color: #2e3440;
}

#network.disconnected {
    color: #bf616a;
}

#pulseaudio {
    color: #2e3440;
}

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

#temperature {
    color: #2e3440;
}

#temperature.critical {
    color: #bf616a;
}

#idle_inhibitor {
   color: #2e3440;
}

#tray {
}

#custom-launcher{
        font-size: 23px;
        background-image: url('/home/archit/.config/waybar/Garuda-Golden-logo.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        border-style: hidden;
}

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

#window{
    border-style: hidden;
    margin-top:1px;  
}    
#custom-keyboard-layout{
   color: #2e3440;
}   
#custom-network_traffic{
   color: #2e3440;
}

Save and exit and relogin

Making nwg-drawer (Meta+Shift+D) light
  1. Go to /.config/nwg-drawer/and open drawer.css
  2. In window, replace the value in background-color: rgba() with
255, 255, 255, 0.70

(Do the same step for background-color: rgba () in entry just below)

  1. Now go back to window and replace color: value with #2e3440
    (Do the same in background-color in button, image just below and also in entry, box-shadow)
    Entire config for reference:
window {
    background-color: rgba (255, 255, 255, 0.70);
    color: #2e3440;
}

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

button, image {
    background-color: #2e3440;
    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;
}

Save and exit

Making nwg-bar (Meta+Shift+E) light
  1. Go to /.config/nwg-launcher/nwgbar/ and open style.css
  2. There in button, image replace the color: value to #2e3440
  3. Then scroll down to grid and change the background-color: rgba () value to
255, 255, 255, 0.70

Entire config for reference:

#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: #2e3440;
}

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(255, 255, 255, 0.70);
    border-radius: 5px;
    padding: 5px;
    box-shadow: 0 0 50px rgba(255,0,0,0.7);
    /* e.g. for common background to all buttons */
}

Save and exit

Making nwg-grid (Meta+D) light
  1. Go to /.config/nwg-launcher/nwggrid/ and open style.css
  2. In the button replace the last value (after #) with #2e3440
  3. Just below this, change the background-color: rgba () value to
255, 255, 255, 0.70

(Repeat the 3rd step for background-color in #seperator)
Entire config for reference:

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

button {
    box-shadow: 0 0 6 5 #2e3440;
    background-color: rgba (255, 255, 255, 0.70);
    padding: 15px;
    margin: 20px;
    border-radius: 10px;
}

button:hover {
    background-color: rgba(129,161,193,0.7);
}

button:focus {
    background-color: #5e81ac;
}
#searchbox {
    border: none;
    background-color: #eceff4;
    border-radius: 5px;
    padding: 10px;
    border-color: #999;
    color: #ccc;
    margin-top: 75px;
}

#separator {
    background-color: rgba (255, 255, 255, 0.70);
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 10px;
    margin-bottom: 10px
}

#description {
    margin-top: 20px
}

Save and exit

Making apps light (Messy job. Proceed at your own risk!)

Here’s the thing about apps, you can easily make most of them light by just going to the GTK Settings app and switching to Raleigh from Sweet Dark. However, after every reboot or relogin, it switches back to dark.
So to fix this I had no other oprion but to delete the Sweet-dark theme Yes, I searched all config files I can but didn’t find anything.

  1. Go to GTK Settings app and switch to Raleigh theme, and also switch cursor theme to adwaita and exit
  2. Open terminal and type
sudo pacman -Rdd plasma5-themes-sweet-full-git

Rdd because this theme is required by garuda-hyprland-settings and sddm too.
3. Go to /usr/share/sddm/themes/ and delete the ‘Sweet’ folder there (WARNING! This will make sddm look veery basic. please proceed with caution)
4. Lastly go to Kvantum Manager app > Change/Delete theme and there select KvGNOME
REBOOT

Anything that’s still dark?
Ans. Yes, Garuda apps and this

Took two days to write this, such a noob! :sob:

8 Likes

Something else I found cool

DISCLAIMER

Does make Garuda Assistant a bit ugly…

Am I the only one here? :slight_smile:

5 Likes

I like it actually! Does it have icons on the first tab?

3 Likes

Nope.

7 Likes