ArchLinux com Hyprland - Tutorial Completo ( Parte 3 ) - Temas GTK, QT, Ícones, Terminal, e VS Code

Hey guys. Welcome to the Textation channel! And today we're going to continue our series on Hyperland. This time we're going to start changing the look of the system a little bit . So we're going to change the GTK and QT themes, the icon theme, the VS Code theme, and also the terminal theme,

okay? So let's start here at the terminal. Kiri is a terminal emulator that is fully configurable through a file called Kiri. This file, just like hyperland. The conf file is saved in the poncfig directory in our user's home directory. So, if I open my personal directory and press the Ctrl key, it will

show me the hidden system files and folders , right? Those are the semi-transparent files and folders. And one of those folders is precisely the one called the config folder. Every user's home directory has one of these folders, okay? This poncfig folder is where the settings for the programs that your user has run are stored.

So, for example, there are Brave settings, VS Code settings, and there's also the Hyper folder, which contains the hyperland file. Which we've already edited several times in this video series, right? There's also Kiri's folder , among others, right? All the programs you run will likely create a folder inside this ponfig folder. But

right now I want you to focus only on this Kiri folder. For now it's empty, and as I said, Kir is configured through a file called Kir. Which is located inside this folder here. And you have two options for creating this file. You can either create it manually, or the most correct way is to generate this file

automatically because that way it comes as a more complete file, right? It already comes with several options that you can change, all of them very well documented, right? So, the best way for you to create this file is by generating it automatically. And how do you do that? Simply changing Kiri's theme at least once. So,

I'm going to open Kiri and type the following in here: Kiri, Kiten, Teams, okay? You just type those three little words, Kitty, Kitams, and press enter. He's going to show you this little screen where you can select a theme, right? And there are several currently. He's telling me here that he has 377 themes, meaning there are many options

you can use. You can navigate between these options using the arrow keys on your keyboard. Up and down, he switches the topics. If you press the right arrow, you switch to the tab at the top, right? You can filter by dark themes, light themes, recent themes, or themes that you have defined yourself. You can do this

filtering. So I'll list all the topics here, and you can also search for a specific topic if you already know its name, right? By pressing the bar on your keyboard, it will show you this search field below, where you can type the name of the theme you want to use. So, for example, I

really like a theme called Doom One. So, I'll search for Doom here, press enter, and it will show me the Doom One theme, okay? I'm going to select this theme here, press enter, and it will show me this other little window. In that window, it's asking me if I want to automatically modify the

kiri file. I configured it so that it always carries the theme I chose. And since this file doesn't exist yet, if I press the M key to make this modification for me, look what will happen. It will generate these two files automatically. So, the Kiri file. Conf, which is the main configuration file, and also a

theme file, which is this current one. Okay, right? This file here, its name will always be this, regardless of the theme you choose. This basically means "current topic," right? Now that these two files are in this folder, I can close my terminal and open it again. And look, he's already implemented the theme I chose.

However, there's one more thing I'm going to change here. Every time I run a command here in the terminal, I have to zoom in so you guys can see what I'm writing, right? So, I'm going to do the following: I'm going to change the font family and also change its size so that I don't have to keep

zooming in on the terminal every time I want to edit something. And to change the font, to change the font size, you edit the kir.concf file. So I'm going to use VS Code to edit this file and I'm going to type code.concfig/kir/ kir.concf here. Press enter and look, look at the size of this file.

If you had created it manually, it would be empty. And if you wanted to change any of its options, you would have to know exactly the name of the option you want to change. For example, the font is this option called family font. The font size is that parameter called font size, right?

So, by generating this file automatically, it already writes all the options that I can change here. He actually documents each and every one of them very well, doesn't he? It specifies and describes each of the options you can change, as well as the values you can use. So, it's a really detailed file, isn't it? It always

has the description and the option that you can configure, right? It's worth taking a look at this file; you'll see some changes you can make, but in this video, initially, I'm only going to change the font size and the font family I'm using. And notice that all the lines in this file, all these options, are

commented out by default, right? They have this tic-tac-toe game right here in front. This hashtag here in front means that these options are disabled, okay? Disabled. In other words, if I want to change this font family, I need to enable this option first. To activate this option, you simply remove the pound sign from

the front. Then it will end up a different color from the other lines. So now that I've uncommented out that option, I can change its value here in front. So let's say I wanted to use the Jet Brains Mono font, which is the font I most enjoy using in the terminal, VS Code, and the system,

right? This is optional. You can use whichever font you want. Other fonts that are also very good to use here in Hyperland are Fira Code, Cascade Code, and others. There are several options, but in my case I like to use Jet Brains. So I'm going to type Jet Brarains mono nerd font here, and I'll change the font size

as well. So I'm going to enable the font size parameter and specify its size here as 15 points. In that case, right? And it shows here that the font size you specify here must be in points. So, if I save this file and open my terminal again, look , the font has already been changed. You can

even check if the font you configured is the font being used here in the terminal by Fastfet, right? So, I'll install Fastfet here too, to check that out. So I'm going to type here sudo Pacman (capital 's') fast fat, confirm installation, and running fast fat it shows this terminal font option, and it's showing that I

'm using exactly the font I configured, which is Jet Brains mono, size 15 points, okay? Now that I've configured the terminal, I'm going to change the VS Code theme too, right? Because their looks don't match. So I'm going to use a theme in VS Code that's similar to the theme I chose for the terminal.

And changing the VS Code theme is pretty simple, right? Themes here in VS Code are basically extensions. So you come here to this extensions button that it has in this side panel and here you search for a theme that you like. You can explore the options he has there. If you type "team" here, for

example, it will show you several themes you can choose from. But in my case, I already know a theme that I really like, which is the OneD Pro theme. I'll click install, confirm the installation, and it will ask me which variation I want to use, right? Because some of the themes you install here

have several variations, right? You choose whichever one you want. I'll use the standard variation. I'm going to close this tab, close this side panel. So, you can see that VS Code and the terminal are now working together, right? Visually, the two look alike. So now we're going to configure the GTK and QT themes, okay? Well, there's an

important point to consider here, why? There are various GTK themes and various QT themes, right? You can use whichever theme you want, but for those who like to maintain a uniform look across the system, that is, those who want to use the same theme for both GTK and QT, it will be somewhat

limited due to the number of themes that exist that support both platforms, right? Because, in that case, most themes are either GTK-only or QT-only. So, it's rare for a theme to support both GTK and QT, okay? You could even use a Cavanton to disguise that difference, right? However, Cavanton is causing some problems here at

Hyperland regarding transparency, okay? So what do I like to do? I prefer to use a theme that supports both GTK and QT. Unfortunately, there aren't many themes that have this support, right? For example, there is the Brezy theme, which is the KDE theme. It has support for both GTK and QT. There's also the Adita theme, which is the

Gnome theme. However, the QT version of Dawiita has been discontinued for a long time and no longer receives updates, right? So there might be some problems if you use this theme. So, in my case here, I like to use the Brezy theme because it's a theme that fits very well with all the apps and it

has a very nice look, right? It's actually the theme I use in my main hyperland. And installing the Brezy theme is very simple. I'm going to open the terminal and type sudo Pacman- Saiculo and install three packages here. The first one is the Brezy theme for QT6, right? That Brezy Brezy pack for QT6. I'll also install the

Brezy 5 package, which is the Brezy theme for QT5, and the Brezy GTK package, which, as the name suggests, is the Brezy theme for GTK, okay? And I'm going to install an icon pack as well . And this is totally optional, okay? You install it if you want, you install whichever one you want

too, because, when we install this package, Breze also comes with the Brezy icon pack, right? And if you like using KDE icons, you can use that theme. But in my case here at Hyperland, I prefer to use the papyrus theme. So I'm going to install the papyrus icon package. This is just the theme I prefer

to use, okay? But there are many others out there. There's Tela, there's Numix, there are several. It's up to you to do some research and see which one you want to use. So, I'll press enter to confirm the installation and enter my password. Now that we've installed the themes, we also need to install

three more tools so we can change these themes. The first one you will install via Pacman. So, sudo Pacman- Saico. And the name of the tool is NWG dash look, okay? This NWG look is the tool you 'll use to change the GTK theme, okay? So, I've just finished installing it. If I

open my app menu here and search for NWG, it will show an app called GTK Settings, which is a very simple app, right? This shows a list of the themes you currently have installed on your computer. It has the Brezy theme, I have the Brezy Dark theme. I'll leave Bri Dark selected. I can

also change the system font. This is something that's entirely up to your taste, right? But what usually happens in IT window managers is that we use the same font for the interface that we use in the terminal, okay? Yeah, that's just to try and maintain a uniform look throughout the system, right? If you

want, you can use any font you like, okay? But here I prefer to use the Jet Brains font as well, which is the same font I'm using in the terminal and in VS Code. So, I'm going to change this font here and search for the Jet Brains font. And I'm going to use this font here, Jet

Brains Monerd, Medium variation. And I'll leave it at size 11. Click select and I'll click apply here. And notice that he's already changed the font here, even in this window, right? So I'm going to change the icon theme here now. So I'll click here on icon team, and I'll select the dark papyrus theme. If you're

using the light theme, you select the light variation, obviously, but since I'm using the dark theme, I'm going to use the icons for the dark variation. I click on apply. We're not going to change the mouse cursor for now , okay? Because it's not enough for us to just change them here, we

'll also need to use the hypercursor to make that change, but that will be for another video. So now I'm going to close this little window. And now, to change the themes in QT, we'll have to install two more tools. However, these tools are not available in the official Art Linux repositories. So we'll have to

install them through the AUR, using an AUR Helper. In my case, I'm going to use EA. So, I'm going to type EA men S in uppercase here. I'm going to add the minus parameter to the confirm and install the QT5CT KDE package, which is the tool we'll use to switch between QT5 and QT6 CT KDE

themes. Only these two tools. I press enter to confirm the installation.

After you finish installing these two programs, when you open the menu now and search for QT, you will find these two applications: QT5 Settings and QT6 Settings. So I'm going to open these two here. First QT5, then QT6. And notice that their appearance is basically the same, right? And how do you change the theme here? Basically, you

came here in style, right? By default, it uses the Fusion theme. You can switch to the Windows theme, you can switch to the Brezy theme, which is the theme we just installed, right? So I'm going to select the Brezy theme here. And here in the color palette, you can select this custom option and change

the color scheme to Brezy Dark. This color scheme is great, and you can even create your own, okay? So, if you click on these three dots and then go to the "create" option, you can create it and add a name for it, right? So, to put, for example, color one here, click OK. And you, selecting

this scheme that you created, you can go back to these three dots and click on the edit option. And you can customize exactly which colors you want to use in your interface. But this is a lot of work to change, okay? I myself don't have the patience to change this, so I prefer to use the

Brezy Dark color scheme. So I'm going to select Brezy Dark from this list and click apply. Will it work? And it didn't work. And why didn't it work? If you pay attention, you 'll see a message at the top of these windows saying that the application is not configured correctly. And if you click on

information, it will tell you here that you have n't defined a variable called qtqpa platform team, okay? So we need to create this variable in the hyperland file. So we'll do that soon enough. But for now, I'll configure the rest of the options here. So I'm going to go here to the font options and change it

to the Jet Brins font. So I'll search here for Jet Brands, the same variation I use for GTK applications, right? I will select the medium size 11 variation here. Click OK. I'll select that same font for the previous mones fonts as well. Again I search for Project Brains, select the medium variation, size 11,

click OK, I'll click apply and I'll also change the icon theme. And in this case, since I'm going to use the dark theme, I also have to select the dark papyrus theme. I click on apply. Once that's done, I'll click OK and do the same configuration here for QT6. So, I'm going to

select the bree theme, Brezy dark color scheme. I click on apply. It's not going to work yet, okay? So we'll fix that very soon. Please do n't worry about it, okay? I come here to sources. I'll change the font to Jet Brains as well. Jet Brandrains mono nerd, medium variation, size 11. Click OK. I

do the same for monospaced fonts. Jet Brains Mono Nerd, Medium Variation, Size 11. Click OK. Apply. And for the icon theme, I'm going to select papyrus dark. Click apply. So, we've already configured everything . If I click OK and open Dolphin, which is a QT application, look , it still doesn't work. He changed the icon theme, but he still hasn't applied the QT theme

itself, which I selected as the dark theme . So, we're going to configure that variable he mentioned earlier. To do this, we're going to open VS Code and open that hyperland file. Confirm once again. So I'm going to type code here. Config/hyper/hyperland.concconf. And here in this file, scrolling down a little bit, you'll find this section

called environment variables. You'll have to put that variable in here . However, you can either specify just that variable, or you can make this more comprehensive, which is what I'm going to do here. So I'm going to close my terminal and open my internet browser as well . And here I'm going to search for Hyperland

Wick and I'm going to enter the Hyperland Wick here . On this website, in the sidebar, you can search for "environment variables". Here, look, this section here. You click on that option. On this page, we'll scroll down to this section called XDG specifications. Here you're going to copy these three environment variables that it

has here, okay? Copy these three, press Ctrl+C, and go to your hyperland file. conf and paste them here. These variables are important for declaring more explicitly what type of interface you are using and what graphical backend you are using. Because some applications run differently depending on the environment you're in. So by specifying

that you use Hyperland and that you use Aand, you guarantee that these applications will function properly, okay? So, that's why you copy and paste these three variables here. After copying these three variables, you're going to copy this first one from this section called "to kit package variables," okay? You just copy the first one. Press

Ctrl+C, go below these three variables and paste them here. This variable is basically used to define what the default graphical backend for GTK applications should be, okay? Because Hyperland runs on Wayland, but some GTK applications might try to use Shorg even if they support it, so this way you ensure they always prioritize Wayland, and

only if that's not possible will they use X11. And we have to do this same configuration for the QT applications. And for that, there's another environmental variable. Then you 'll scroll down to this section called QT. variables and you're going to copy this second variable here, QT QPA platform. So, press Ctrl+C and paste it

down here. And it basically does the same thing as this variable up here, but for QT applications, okay? She ensures that Aand is the default graphical backend for these applications. And now we're going to copy that variable responsible for allowing us to change the system theme, which is this QTQPA platform team, right? It's that

variable that the program, that QT5 CT, was asking us to create, okay? Then you copy that variable and paste it down here as well. And you can leave the value of this variable as either QT5 CT or QT6, okay? I'll leave the QT6 CT as is. So, with this variable defined here, from the moment

you restart your Hyperland, the theme you applied to those applications will already be working, okay? But in addition to this variable here, I'm going to copy and paste two more, which are this first one up here. This variable simply serves to ensure that QT applications are scaled correctly, regardless of your monitor's pixel density

. Because what can happen is that GTK applications work correctly, but QT applications have a very small font, right? So, by explicitly declaring this variable here, you ensure that QT applications are also displayed correctly, okay? It's very important that you declare this variable, especially if you're using a monitor with higher resolutions , like a 4K, for example. And

lastly, I'm going to copy this third variable here. So, press Ctrl+C and paste it down here too. This variable is simply to block QT applications from using window decorations in any way, right? Because Hyperland does n't use window decorations, some QT applications might want to force the use of these decorations. So, with this variable

declared, you prevent this from happening, okay? So that's basically it . I'm going to save this file, close my Hyperland, and start it again. So I'm going to type Hyperland here and press enter. And if I open Dolphin now, look, it has already applied the theme correctly. So it's very important that you

specify those variables, okay? Otherwise, your themes won't work. I'm going to make another change here in Dolphin as well. I'm going to change how the icons are displayed here. I like to keep this list detailed. And I'm also going to change a setting, because if I open the Documents folder and then close Dolby, when I open it

again, it opens in the Documents folder, which was the folder I was in when I closed it. I don't like that option. I prefer that every time I open it, it always opens to my home screen. And for that to happen, I'm coming across these three dots. I'm here to set up and

configure Dolfing. And here I change the "show on startup" option to this second option below, where I can specify exactly which folder I want to open, which is precisely my user directory, right? Barrahome blocks my username. So I'll click here to apply. And now every time I close Dolfing and open it again, it opens to my

home page. So I'm asking you to ignore these files I have here, okay? these images. There's also a video in this folder. This is related to what I'm going to explain in the next video, okay? How do you fix this Dolphin problem, right? Because when you try to open a file here in

Dolphin, it doesn't have a reference to which program it should use to open that file, right? In fact, if you try to open this file by going to properties and changing the program it should use to open it, look, it doesn't even show you the menu to select, right? So, in the next video,

we're going to fix that little problem and do a few other things too, okay? So, to wrap up this video, I'm going to do the following. Yes, I changed the GTK theme, the QT theme, to a dark theme, but my RFI, which is the application menu, is still using a light theme. So, I'm going to make a

change here as well, right? I'm going to change Rofi's theme so that it also uses a dark theme. And changing the Rofi theme is very simple for you. You'll search for Rofi and it will show you this Rofi Team Selector; you press enter here and it will give you several theme options that you can test.

Just press enter on the theme and it will show you a preview of it. You choose which one you want to use. Ah, let's say I liked Ark Dark, for example. So, if I want to make this my default theme, I press the Alt and A keys. Now, every time I open Rofi, it will be

using this theme, okay? But of course we're not going to leave him like this , okay? In other videos, later on, after we've configured the bar, I'll even come back to change Rofi, okay? I'm going to add icons to it, change the colors, and everything else, okay? But that's a topic for another video. So

guys, that's all I had to say to you in this video. I ask that if you enjoyed the video, please leave a like, subscribe to the channel if you haven't already, and share the video if possible, okay? That way you help me a lot in growing the channel. So I'll stay here for now.

Thanks, bye. M.