Dark Theme layout fixes

This commit is contained in:
Jeeppler 2016-06-25 18:08:11 -05:00
parent a14e5f007d
commit 02c2621efc
2 changed files with 52 additions and 70 deletions

View File

@ -20,58 +20,55 @@ This is the result after applying the steps described here.
1 - Change `Workspace Appearance`
1. Open the `Workspace Appearance` window
1. Open the `Workspace Appearance` window
~~~
Qubes Menu -> System Tools -> System Settings -> Workspace Appearance
~~~
Qubes Menu -> System Tools -> System Settings -> Workspace Appearance
![Workspace Appearance](/attachment/wiki/Dark-Theme/kde-app-appearance-menu-style.png)
![Workspace Appearance](/attachment/wiki/Dark-Theme/kde-app-appearance-menu-style.png)
2. Go to `Desktop Theme`
2. Go to `Desktop Theme`
![Desktop Menu](/attachment/wiki/Dark-Theme/kde-appearance-settings-desktop-theme-oxygen.png)
![Desktop Menu](/attachment/wiki/Dark-Theme/kde-appearance-settings-desktop-theme-oxygen.png)
3. Select `Oxygen` and `Apply` the change
3. Select `Oxygen` and `Apply` the change
2 - (Optional) Remove blue glowing task items
![blue glowing task bar items](/attachment/wiki/Dark-Theme/kde-taskbar-blue-glowing-border.png)
1. Adjust Oxygen `Details`
1. Adjust Oxygen `Details`
~~~
Qubes Menu -> System Tools -> System Settings -> Workspace Appearance -> Desktop Theme -> Details (Tab)
~~~
Qubes Menu -> System Tools -> System Settings -> Workspace Appearance -> Desktop Theme -> Details (Tab)
2. Select `Oxygen`
2. Select `Oxygen`
3. Change `Theme Item -> Task Items` from `Oxygen Task Items` to `Air Task Items`
3. Change `Theme Item -> Task Items` from `Oxygen Task Items` to `Air Task Items`
![Change Task items look](/attachment/wiki/Dark-Theme/kde-desktop-theme-details.png)
4. Apply changes
![Change Task items look](/attachment/wiki/Dark-Theme/kde-desktop-theme-details.png)
4. Apply changes
![task bar items blue glowing removed](/attachment/wiki/Dark-Theme/kde-taskbar-blue-glowing-removed.png)
3 - Change `Application Appearance`
1. Open the `Application Appearance` window
1. Open the `Application Appearance` window
~~~
Qubes Menu -> System Tools -> System Settings -> Application Appearance
~~~
2. Go to `Colors`
Qubes Menu -> System Tools -> System Settings -> Application Appearance
2. Go to `Colors`
![colors tab](/attachment/wiki/Dark-Theme/kde-app-appearance-menu-colors.png)
3. Select `Obsidian Coast`
3. Select `Obsidian Coast`
![set to Obsidian Coast](/attachment/wiki/Dark-Theme/kde-app-appearance-menu-colors-set.png)
4. Apply Changes
4. Apply Changes
Qubes VM Manager should now look like the image below.
Qubes VM Manager should now look like the image below.
![result black Qubes Manager](/attachment/wiki/Dark-Theme/kde-black-qubes-manager.png)
@ -90,29 +87,25 @@ This is the result after applying the steps described here.
1 - Change Appearance
1. Open the `Appearance` dialog
1. Open the `Appearance` dialog
~~~
Qubes Menu -> System Tools -> Appearance
~~~
Qubes Menu -> System Tools -> Appearance
![appearance dialog](/attachment/wiki/Dark-Theme/xfce-appearance-dialog.png)
2. Change Style to `Albatross`
2. Change Style to `Albatross`
**Note:** The black appearance theme `Xfce-dusk` makes the VM names in the `Qubes OS Manager` unreadable.
2 - *(Optional)* Change Window Manager Style
1. Open the `Window Manager` dialog
1. Open the `Window Manager` dialog
~~~
Qubes Menu -> System Tools -> Appearance
~~~
Qubes Menu -> System Tools -> Appearance
![window manager dialog](/attachment/wiki/Dark-Theme/xfce-window-manager-theme.png)
2. Change the Theme in the `Style` Tab (e. g. Defcon-IV). All available themes work.
2. Change the Theme in the `Style` Tab (e. g. Defcon-IV). All available themes work.
Dark App VM, Template VM, Standalone VM, HVM (Linux Gnome)
@ -120,7 +113,7 @@ Dark App VM, Template VM, Standalone VM, HVM (Linux Gnome)
Almost all Qubes VM's are based on the Gnome desktop. Therefor the description below is focused on the Gnome Desktop Environment.
Using `Gnome-Tweak-Tool`
Using "Gnome-Tweak-Tool"
------------------------
The advantage of creating a dark themed Template VM is, that each AppVM which is derived from the Template VM will be dark themed by default.
@ -133,54 +126,46 @@ The advantage of creating a dark themed Template VM is, that each AppVM which is
1 - Install `Gnome-Tweak-Tool`
1. Fedora
1. Fedora
~~~
sudo dnf install gnome-tweak-tool
~~~
sudo dnf install gnome-tweak-tool
2. Debian
2. Debian
~~~
sudo apt-get install gnome-tweak-tool
~~~
sudo apt-get install gnome-tweak-tool
2 - *(Only AppVM)* Stop template and start AppVM
3 - Add `Gnome-Tweak-Tool` to the Application Menu
1. `Right-click` on VM entry in `Qubes VM Manager` select `Add/remove app shortcuts`
1. `Right-click` on VM entry in `Qubes VM Manager` select `Add/remove app shortcuts`
2. Select `Tweak Tool` and press the `>` button to add it
2. Select `Tweak Tool` and press the `>` button to add it
![Application Dialog](/attachment/wiki/Dark-Theme/dialog-add-gnome-tweak-tool.png)
![Application Dialog](/attachment/wiki/Dark-Theme/dialog-add-gnome-tweak-tool.png)
4 - Enable `Global Dark Theme`
1. *Debian only*
1. *Debian only*
~~~
cd ~/.config/
mkdir gtk-3.0
cd gtk-3.0/
touch settings.ini
~~~
cd ~/.config/
mkdir gtk-3.0
cd gtk-3.0/
touch settings.ini
2. Start `Tweak Tool` from the VM application menu and set the `Global Dark Theme` switch to `on`
2. Start `Tweak Tool` from the VM application menu and set the `Global Dark Theme` switch to `on`
![Global Dark Theme enabled](/attachment/wiki/Dark-Theme/gnome-tweak-tool.png)
![Global Dark Theme enabled](/attachment/wiki/Dark-Theme/gnome-tweak-tool.png)
5 - *(Optional)* Modify Firefox
**Note:** Firefox uses GTK style settings by default. This can create side effects such as unusable forms or search fields. There are two different ways to avoid this. Either by using a add-on or by overwriting the defaults.
- use the theme [GTK+ Dark Theme Global Fixes](https://userstyles.org/styles/111694/gtk-dark-theme-global-fixes) and the [Stylish](https://addons.mozilla.org/en-US/firefox/addon/stylish/) addon
- use the theme [GTK+ Dark Theme Global Fixes](https://userstyles.org/styles/111694/gtk-dark-theme-global-fixes) and the [Stylish](https://addons.mozilla.org/en-US/firefox/addon/stylish/) addon
- or add the following line to `/rw/config/rc.local`
- or add the following line to `/rw/config/rc.local`
~~~
sed -i.bak "s/Exec=firefox %u/Exec=bash -c 'GTK_THEME=Adwaita:light firefox %u'/g" /usr/share/applications/firefox.desktop
~~~
sed -i.bak "s/Exec=firefox %u/Exec=bash -c 'GTK_THEME=Adwaita:light firefox %u'/g" /usr/share/applications/firefox.desktop
6 - Restart VM or all application
@ -195,18 +180,14 @@ Manually works for Debian, Fedora and Archlinux.
1 - Enable `Global Dark Theme`
~~~
cd ~/.config/
mkdir gtk-3.0
cd gtk-3.0/
touch settings.ini
~~~
cd ~/.config/
mkdir gtk-3.0
cd gtk-3.0/
touch settings.ini
add the following lines to `settings.ini`
~~~
[Settings]
gtk-application-prefer-dark-theme=1
~~~
[Settings]
gtk-application-prefer-dark-theme=1
2 - follow step 5 and 6 in: Using `Gnome-Tweak-Tool`

1
doc.md
View File

@ -147,6 +147,7 @@ Customization Guides
* [Installing XFCE in dom0](/doc/xfce/)
* [Installing i3 in dom0](/doc/i3/)
* [Language Localization](/doc/language-localization/)
* [Dark Theme in Dom0 and DomU](/doc/dark-theme/)
Troubleshooting