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 - 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 2 - (Optional) Remove blue glowing task items
![blue glowing task bar items](/attachment/wiki/Dark-Theme/kde-taskbar-blue-glowing-border.png) ![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) ![Change Task items look](/attachment/wiki/Dark-Theme/kde-desktop-theme-details.png)
4. Apply changes
4. Apply changes
![task bar items blue glowing removed](/attachment/wiki/Dark-Theme/kde-taskbar-blue-glowing-removed.png) ![task bar items blue glowing removed](/attachment/wiki/Dark-Theme/kde-taskbar-blue-glowing-removed.png)
3 - Change `Application Appearance` 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) ![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) ![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) ![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 - 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) ![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. **Note:** The black appearance theme `Xfce-dusk` makes the VM names in the `Qubes OS Manager` unreadable.
2 - *(Optional)* Change Window Manager Style 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) ![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) 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. 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. 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 - 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 2 - *(Only AppVM)* Stop template and start AppVM
3 - Add `Gnome-Tweak-Tool` to the Application Menu 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` 4 - Enable `Global Dark Theme`
1. *Debian only* 1. *Debian only*
~~~ cd ~/.config/
cd ~/.config/ mkdir gtk-3.0
mkdir gtk-3.0 cd gtk-3.0/
cd gtk-3.0/ touch settings.ini
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 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. **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 6 - Restart VM or all application
@ -195,18 +180,14 @@ Manually works for Debian, Fedora and Archlinux.
1 - Enable `Global Dark Theme` 1 - Enable `Global Dark Theme`
~~~ cd ~/.config/
cd ~/.config/ mkdir gtk-3.0
mkdir gtk-3.0 cd gtk-3.0/
cd gtk-3.0/ touch settings.ini
touch settings.ini
~~~
add the following lines to `settings.ini` add the following lines to `settings.ini`
~~~ [Settings]
[Settings] gtk-application-prefer-dark-theme=1
gtk-application-prefer-dark-theme=1
~~~
2 - follow step 5 and 6 in: Using `Gnome-Tweak-Tool` 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 XFCE in dom0](/doc/xfce/)
* [Installing i3 in dom0](/doc/i3/) * [Installing i3 in dom0](/doc/i3/)
* [Language Localization](/doc/language-localization/) * [Language Localization](/doc/language-localization/)
* [Dark Theme in Dom0 and DomU](/doc/dark-theme/)
Troubleshooting Troubleshooting