From 02c2621efcab1c6dd97817d3f69aecb78653b25a Mon Sep 17 00:00:00 2001 From: Jeeppler Date: Sat, 25 Jun 2016 18:08:11 -0500 Subject: [PATCH] Dark Theme layout fixes --- customization/dark-theme.md | 121 +++++++++++++++--------------------- doc.md | 1 + 2 files changed, 52 insertions(+), 70 deletions(-) diff --git a/customization/dark-theme.md b/customization/dark-theme.md index b82ba8a3..e1e53bdf 100644 --- a/customization/dark-theme.md +++ b/customization/dark-theme.md @@ -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` diff --git a/doc.md b/doc.md index 873451cf..4aee11e7 100644 --- a/doc.md +++ b/doc.md @@ -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