Show off your pimped Garuda Hyprland Edition 🎭

Garuda Community Showcase
1

Preferably with instructions :slight_smile:

4 Likes
2

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

Hyprland-dots
Hyprland-dots1366×768 60 KB

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
3

image
image1919×1200 211 KB

I love hyprland :slight_smile:

6 Likes
4

This wallpaper gives me flashbacks to early Garuda days!

5 Likes
5

Just learning new staffs…

image
image1920×1080 132 KB

3 Likes
6

BTW.

2 Likes
7

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
8

Sorry just the wallpaper

:smiley:

10 Likes
9

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
10

Nothing flashy (like above)

2024-01-06T22:17:54,271002674+05:30
2024-01-06T22:17:54,271002674+05:301366×768 89.8 KB

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

Summary

Garuda-Golden-logo
Garuda-Golden-logo2134×2134 47.7 KB

  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
11

I am sure it is not from him :smiley:

The svg files are at gitlab.

1 Like
12

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

13

Wud love to swap my waybar for eww.

2024-01-06T20:47:19,933762251+03:00
2024-01-06T20:47:19,933762251+03:001600×900 178 KB

5 Likes
14

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

3 Likes
15

: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
17

Hyprland Light!

2024-01-07T14:54:51,469470037+05:30
2024-01-07T14:54:51,469470037+05:301366×768 92.5 KB

2024-01-07T14:55:04,327216978+05:30
2024-01-07T14:55:04,327216978+05:301366×768 76.4 KB

2024-01-07T14:56:16,968185416+05:30
2024-01-07T14:56:16,968185416+05:301366×768 94.4 KB

2024-01-07T15:53:54,647746809+05:30
2024-01-07T15:53:54,647746809+05:301366×768 60.3 KB

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

2024-01-08T14:27:00,144364825+05:30
2024-01-08T14:27:00,144364825+05:301366×768 123 KB

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

9 Likes
18

Screenshot_02-Feb_23-37-26_2210
Screenshot_02-Feb_23-37-26_22101366×768 71.2 KB

Screenshot_02-Feb_23-37-50_12701
Screenshot_02-Feb_23-37-50_127011366×768 149 KB

Screenshot_02-Feb_23-39-17_7500
Screenshot_02-Feb_23-39-17_75001366×768 90.8 KB

Something else I found cool

Screenshot_02-Feb_23-46-32_5110
Screenshot_02-Feb_23-46-32_51101366×768 68.1 KB

DISCLAIMER

Does make Garuda Assistant a bit ugly…

Screenshot_02-Feb_23-51-19_7916
Screenshot_02-Feb_23-51-19_79161366×768 187 KB

Am I the only one here? :slight_smile:

5 Likes
19

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

3 Likes
20

Nope.

21

Screenshot_04-Feb_23-44-33_28244
Screenshot_04-Feb_23-44-33_282441366×768 66 KB

7 Likes