archive/theorangeone.net-legacy
1
Fork 0
Code Activity

Add article on making QT look less poop

Browse source
This commit is contained in:
Jake Howard 2017-12-27 21:27:35 +00:00
parent 2e3c888f49
commit d47171076c
Signed by: jake
GPG key ID: 57AFB45680EDD477
2 changed files with 27 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
content/posts/make-qt-less-ugly.md Normal file
View file

@ -0,0 +1,23 @@
---
title: Make QT look less ugly
date: 2017-12-27
---
As anyone who's used an application written with the QT UI framework will know, they don't always look the best, and certainly don't fit in with the rest of your desktops theme in the way GTK does. Certain themes support styling both GTK and QT applications, however most don't.
![QT looking fairly terrible](/img/qt-gtk-before.png)
Fortunately, there's a solution, and it comes in the form of a _Theme engine_. Theme engines act as a small compatibility layer, allowing certain frameworks to render as if they were others. With this, we can tell QT applications to render as if they were GTK.
`qt5-styleplugins` is a package which allows QT applications it's components using the same underlying widget components as GTK+2. More detail on `qt5-styleplugins` can be found on the [Arch Wiki](https://wiki.archlinux.org/index.php/Uniform_look_for_Qt_and_GTK_applications#QGtkStyle)
Setting up `qt5-styleplugins` is incredibly simple:
1. Install the package from your OS's package manager. ([`qt5-styleplugins`](https://www.archlinux.org/packages/?name=qt5-styleplugins) on Arch, [`qt5-style-plugins`](https://packages.ubuntu.com/search?keywords=qt5-style-plugins) on Ubuntu)
2. Set the environment variable: `QT_QPA_PLATFORMTHEME=gtk2`
Installing the environment variable can't be done in your `.bashrc`, as variables stored here aren't accessible to applications launched outside the terminal. I'd recommend setting it in `/etc/environment` instead.
After install, simply reboot, and your apps should fit in far, _far_ better with the rest of your desktop.
![QT looking far nicer!](/img/qt-gtk-after.png)

4
static/src/scss/style.scss
View file

@ -192,6 +192,10 @@ pre.chroma {
padding-left: $spacer * 1.2;
border-left: $spacer * 0.2 solid lightgray;
}
img {
width: 100%;
}
}
.plyr {