db123/simple-hyprland
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added emojis

Browse Source
This commit is contained in:
Gaurav Bankar
2024-06-22 10:31:49 +05:30
parent fb41de4eea
commit 5b46885f8a
1 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
docs/theming.md
View File

@@ -1,7 +1,7 @@
# Theming, Look & feel # Theming, Look & feel 🎨✨
In this guide, we'll transform your Hyprland setup into a visually stunning environment by applying themes to various components. A well-themed desktop not only looks great but also enhances your workflow and overall user experience. In this guide, we'll transform your Hyprland setup into a visually stunning environment by applying themes to various components. A well-themed desktop not only looks great but also enhances your workflow and overall user experience.
## Installing Essential Tools ## Installing Essential Tools 🛠️
#### nwg-look #### nwg-look
[nwg-look](https://github.com/nwg-piotr/nwg-look) simplifies the process of setting GTK themes, enabling a cohesive look across different toolkits. [nwg-look](https://github.com/nwg-piotr/nwg-look) simplifies the process of setting GTK themes, enabling a cohesive look across different toolkits.
@@ -24,14 +24,14 @@ pacman -S qt5ct qt6ct kvantum
##### Adding QT Environment Variables ##### Adding QT Environment Variables
We've already added the necessary QT environment variables during the basic configuration step. We've already added the necessary QT environment variables during the basic configuration step.
## Installing themes and icons ## Installing themes and icons 🏞️
#### GTK Themes #### GTK Themes
Place the themes in the system theme directory. For this guide, we'll install the [Catppuccin theme](https://github.com/catppuccin/catppuccin) taken from [hyprdots](https://github.com/prasanthrangan/hyprdots) repo, a visually appealing option. Place the themes in the system theme directory. For this guide, we'll install the [Catppuccin theme](https://github.com/catppuccin/catppuccin) taken from [hyprdots](https://github.com/prasanthrangan/hyprdots) repo, a visually appealing option.
Extract the theme from the repos assets to the following location to apply it system-wide: Extract the theme from the repos assets to the following location to apply it system-wide:
``` ```
tar -xzvf ~/simple-hyprland/assets/themes/Catppuccin-Mocha.tar.xz -C /usr/share/themes tar -xzvf ~/simple-hyprland/assets/themes/Catppuccin-Mocha.tar.xz -C /usr/share/themes/
``` ```
#### Icon Theme #### Icon Theme
@@ -40,7 +40,7 @@ Place the icon theme in the system icon directory. We'll install the [Tela icon
Extract the theme from our assets to the following location to apply it system-wide: Extract the theme from our assets to the following location to apply it system-wide:
``` ```
tar -xzvf ~/simple-hyprland/assets/icons/Tela-circle-dracula.tar.xz -C /usr/share/icons tar -xzvf ~/simple-hyprland/assets/icons/Tela-circle-dracula.tar.xz -C /usr/share/icons/
``` ```
#### Kvantum Theme #### Kvantum Theme
@@ -50,7 +50,7 @@ For Arch-based systems, install the kvantum-theme-catppuccin from the AUR:
yay -S kvantum-theme-catppuccin yay -S kvantum-theme-catppuccin
``` ```
## Setting the Themes ## Setting the Themes 🖼️
1. Use `nwg-look` to set the global GTK and icon theme, and apply the changes. 1. Use `nwg-look` to set the global GTK and icon theme, and apply the changes.
2. Open the `kvantummanager` (with sudo to apply as root theme), select the desired theme, and apply it. 2. Open the `kvantummanager` (with sudo to apply as root theme), select the desired theme, and apply it.
3. Open the `qt6ct` (QT6 Settings) and set the icon theme. 3. Open the `qt6ct` (QT6 Settings) and set the icon theme.
@@ -58,7 +58,7 @@ yay -S kvantum-theme-catppuccin
By default all the configs we used in the previous tutorial are configured with catppuccin color theme. By default all the configs we used in the previous tutorial are configured with catppuccin color theme.
## Theming applications ## Theming applications 🖥️
At this stage, you might want to theme specific applications to achieve a uniform look across your desktop environment. At this stage, you might want to theme specific applications to achieve a uniform look across your desktop environment.
#### 1. Kitty: The terminal emulator #### 1. Kitty: The terminal emulator
@@ -68,7 +68,7 @@ Copy the configuration files for the Catppuccin theme:
2. `theme.conf` - Theme file 2. `theme.conf` - Theme file
``` ```
cp ~/Simple-Hyprland/configs/kitty ~/.config/ cp -r ~/Simple-Hyprland/configs/kitty ~/.config/
``` ```
#### 2. VS Code: The Code editor #### 2. VS Code: The Code editor
Install the Catppuccin theme extension from the Visual Studio Code Marketplace. Install the Catppuccin theme extension from the Visual Studio Code Marketplace.
@@ -77,10 +77,10 @@ Install the Catppuccin theme extension from the Visual Studio Code Marketplace.
Copy the configuration file i.e. `dunstrc`. Copy the configuration file i.e. `dunstrc`.
``` ```
cp ~/Simple-Hyprland/configs/dunst ~/.config/ cp -r ~/Simple-Hyprland/configs/dunst ~/.config/
``` ```
## Misc ## Misc 🔧
Some additional enhancements to elevate the overall feel and experience. Some additional enhancements to elevate the overall feel and experience.
#### 1. Adding blur to the windows #### 1. Adding blur to the windows
@@ -92,7 +92,7 @@ Example: To add blur to Kitty, add:
windowrulev2 = opacity 0.90 0.90,class:^(kitty)$ windowrulev2 = opacity 0.90 0.90,class:^(kitty)$
``` ```
**Pro Tip:** To get the class_name for a specific window, use the command `hyprctl clients` while the window is open. **Pro Tip:** 💡 To get the class_name for a specific window, use the command `hyprctl clients` while the window is open.
For more details refer [Hyprland Window Rules](https://wiki.hyprland.org/Configuring/Window-Rules/). For more details refer [Hyprland Window Rules](https://wiki.hyprland.org/Configuring/Window-Rules/).
@@ -140,7 +140,7 @@ decoration {
} }
} }
``` ```
With these steps, you'll have a visually stunning and cohesive desktop environment tailored to your preferences. Remember, the true beauty of a desktop lies in the eye of the beholder, so feel free to experiment and find the perfect combination that resonates with your personal style. Immerse yourself in an aesthetic experience that not only delights the senses but also enhances your productivity and workflow. With these steps, you'll have a visually stunning and cohesive desktop environment tailored to your preferences. Remember, the true beauty of a desktop lies in the eye of the beholder, so feel free to experiment and find the perfect combination that resonates with your personal style. Immerse yourself in an aesthetic experience that not only delights the senses but also enhances your productivity and workflow. 🌟🖥️✨