Skip to main content

Тёмная тема

Базовая настройка тёмной темы

Для включения тёмной темы в GTK и Qt/KDE приложения нужно установить следующие пакеты:

pikaur -S gnome-themes-extra adwaita-qt5-git adwaita-qt6-git

Создать файл /etc/profile.d/dark-theme.sh со следующим содержимым:

export GTK_THEME=Adwaita:dark
export GTK2_RC_FILES=/usr/share/themes/Adwaita-dark/gtk-2.0/gtkrc
export QT_QPA_PLATFORMTHEME=qt5ct:qt6ct
export QT_QPA_PLATFORM=wayland

Запустить qt5ct и qt6ct и на вкладке Внешний вид выбрать Стиль Adwaita-Dark.

Для запуска brave нужно создать файл ~/.config/brave-flags.conf со следующим содержимым:

--ozone-platform=wayland

Настройка тёмной темы Gruvbox

Подсмотрено в разных источниках, в т.ч. тут.

Необходимо выполнить шаги по базовой настройке тёмной темы, а затем дополнительно выполнить следующие действия или изменения.

Установить пакеты с темами Gruvbox для GTK:

pikaur -S gruvbox-gtk-theme-git gruvbox-icon-theme-git gruvbox-plus-icon-theme adw-gtk-theme

Создать файлы с цветовой схемой Gruvbox для qt5qc и qt6qc соответственно ~/.config/qt5ct/colors/gruvbox.conf и ~/.config/qt6ct/colors/gruvbox.conf со следующим содержимым:

[ColorScheme]
active_colors=#ffebdbb2, #ff1d2021, #ffbdae93, #ffa89984, #ff3c3836, #ff504945, #ffebdbb2, #ffebdbb2, #ffebdbb2, #ff282828, #ff1d2021, #ff504945, #ff458588, #ff282828, #ff458588, #ffcc241d, #ff282828, #ffebdbb2, #ff1d2021, #ffebdbb2, #ffbdae93
disabled_colors=#ffbdae93, #ff1d2021, #ffbdae93, #ffa89984, #ff3c3836, #ff504945, #ffbdae93, #ffbdae93, #ffbdae93, #ff282828, #ff1d2021, #ff504945, #ff438184, #ff3c3836, #ff458588, #ffcc241d, #ff282828, #ffebdbb2, #ff1d2021, #ffebdbb2, #ffbdae93
inactive_colors=#ffebdbb2, #ff1d2021, #ffbdae93, #ffa89984, #ff3c3836, #ff504945, #ffebdbb2, #ffebdbb2, #ffebdbb2, #ff282828, #ff1d2021, #ff504945, #ff438184, #ffa89984, #ff458588, #ffcc241d, #ff282828, #ffebdbb2, #ff1d2021, #ffebdbb2, #ffbdae93

В qt5ct и qt6ct на вкладке Внешний вид выбрать Цветовую схему gruvbox, на вкладке Стиль значков выбрать Gruvbox Plus Dark, на вкладке Шрифты установить Общий Noto Sans 10 и Фиксированной ширины Adwaita Mono 11.

Скопировать тему adw-gtk3-dark для изменения в adw-gtk3-gruvbox-dark, для этого выполнить команду:

sudo cp -r /usr/share/themes/adw-gtk3-dark /usr/share/themes/adw-gtk3-gruvbox-dark

Заменить файл содержимое файла /usr/share/themes/adw-gtk3-gruvbox-dark/gtk-3.0/gtk.css на файл с темой gruvbox из репозитория adw-colors. Далее в файл потребуется внести ряд изменений: подключить CSS с базовой тёмной темой adw-gtk3-dark и заменить некоторые цвета:

...

@import '../../adw-gtk3-dark/gtk-3.0/gtk.css';

...

@define-color accent_bg_color #83a598;
...
@define-color popover_bg_color #3c3836;
Полный текст файла /usr/share/themes/adw-gtk3-gruvbox-dark/gtk-3.0/gtk.css. 
/*

  Gruvbox theme for libadwaita
  and adw-gtk3 - https://github.com/lassekongo83/adw-gtk3

  Colors from - https://github.com/morhetz/gruvbox

  1. If ~/.config/gtk-4.0/gtk.css and/or ~/.config/gtk-3.0/gtk.css exists, make backups
  2. Enable the adw-gtk3-dark theme
  3. Save this file to ~/.config/gtk-4.0/gtk.css
  4. Make the file a symbolic link to ~/.config/gtk-3.0/gtk.css (or copy it to that location)
  5. Close and re-open any open apps or log out and in again

*/

@import '../../adw-gtk3-dark/gtk-3.0/gtk.css';

/* Global color definitions */

@define-color window_bg_color #282828; /* dark gray */
@define-color window_fg_color #ebdbb2; /* light brown */
@define-color view_bg_color #3c3836;   /* gray */
@define-color view_fg_color @window_fg_color;
@define-color accent_bg_color #83a598; /* blue */ /* was: #928374; creamy */
@define-color accent_color @accent_bg_color;
@define-color headerbar_bg_color @window_bg_color;
@define-color headerbar_fg_color @window_fg_color;
@define-color popover_bg_color #3c3836; /* gray */ /* was: #627321; salad green */
@define-color popover_fg_color @view_fg_color;
@define-color dialog_bg_color @popover_bg_color;
@define-color dialog_fg_color @popover_fg_color;
@define-color card_bg_color rgba(255, 255, 255, 0.08);
@define-color card_fg_color @window_fg_color;

:root {
  --accent-bg-color: @accent_bg_color;
  --accent-fg-color: @accent_fg_color;

  --destructive-bg-color: @destructive_bg_color;
  --destructive-fg-color: @destructive_fg_color;

  --success-bg-color: @success_bg_color;
  --success-fg-color: @success_fg_color;

  --warning-bg-color: @warning_bg_color;
  --warning-fg-color: @warning_fg_color;

  --error-bg-color: @error_bg_color;
  --error-fg-color: @error_fg_color;

  --window-bg-color: @window_bg_color;
  --window-fg-color: @window_fg_color;

  --view-bg-color: @view_bg_color;
  --view-fg-color: @view_fg_color;

  --headerbar-bg-color: @headerbar_bg_color;
  --headerbar-fg-color: @headerbar_fg_color;
  --headerbar-border-color: @headerbar_border_color;
  --headerbar-backdrop-color: @headerbar_backdrop_color;
  --headerbar-shade-color: @headerbar_shade_color;
  --headerbar-darker-shade-color: @headerbar_darker_shade_color;

  --sidebar-bg-color: @sidebar_bg_color;
  --sidebar-fg-color: @sidebar_fg_color;
  --sidebar-backdrop-color: @sidebar_backdrop_color;
  --sidebar-border-color: @sidebar_border_color;
  --sidebar-shade-color: @sidebar_shade_color;

  --secondary-sidebar-bg-color: @secondary_sidebar_bg_color;
  --secondary-sidebar-fg-color: @secondary_sidebar_fg_color;
  --secondary-sidebar-backdrop-color: @secondary_sidebar_backdrop_color;
  --secondary-sidebar-border-color: @secondary_sidebar_border_color;
  --secondary-sidebar-shade-color: @secondary_sidebar_shade_color;

  --card-bg-color: @card_bg_color;
  --card-fg-color: @card_fg_color;
  --card-shade-color: @card_shade_color;

  --dialog-bg-color: @dialog_bg_color;
  --dialog-fg-color: @dialog_fg_color;

  --popover-bg-color: @popover_bg_color;
  --popover-fg-color: @popover_fg_color;
  --popover-shade-color: @popover_shade_color;

  --thumbnail-bg-color: @thumbnail_bg_color;
  --thumbnail-fg-color: @thumbnail_fg_color;

  --shade-color: @shade_color;
  --scrollbar-outline-color: @scrollbar_outline_color;
}

/* More customizations */

button.titlebutton { /* GTK3 */
  color: transparent;
  min-width: 18px;
  min-height: 18px;
}
button.titlebutton:backdrop {
  opacity: 0.5;
}

windowcontrols > button > image { /* GTK4 */
  color: transparent;
  min-width: 18px;
  min-height: 18px;
  border-radius: 100%;
  padding: 0;
  margin: 0 5px;
}

button.titlebutton.close,
windowcontrols > button.close > image,
button.titlebutton.close:hover:backdrop,
windowcontrols > button.close:hover:backdrop > image {
  background-color: #cc241d;
}

button.titlebutton.close:hover,
windowcontrols > button.close:hover > image {
  background-color: #fb4934;
}

button.titlebutton.maximize,
windowcontrols > button.maximize > image,
button.titlebutton.maximize:hover:backdrop,
windowcontrols > button.maximize:hover:backdrop > image {
  background-color: #98971a;
}

button.titlebutton.maximize:hover,
windowcontrols > button.maximize:hover > image {
  background-color: #b8bb26;
}

button.titlebutton.minimize,
windowcontrols > button.minimize > image,
button.titlebutton.minimize:hover:backdrop,
windowcontrols > button.minimize:hover:backdrop > image {
  background-color: #d79921;
}

button.titlebutton.minimize:hover,
windowcontrols > button.minimize:hover > image {
  background-color: #fabd2f;
}

button.titlebutton.close:backdrop,
button.titlebutton.maximize:backdrop,
button.titlebutton.minimize:backdrop,
windowcontrols > button.close:backdrop > image,
windowcontrols > button.maximize:backdrop > image,
windowcontrols > button.minimize:backdrop > image {
  background-color: #665c54;
}

Создать файл (или заменить в нём ранее созданное содержимое) /etc/profile.d/dark-theme.sh со следующим содержимым:

export GTK_THEME=adw-gtk3-gruvbox-dark
export GTK2_RC_FILES=/usr/share/themes/Gruvbox-Dark/gtk-2.0/gtkrc
export QT_QPA_PLATFORMTHEME=qt5ct
export QT_QPA_PLATFORM=wayland

Таким образом настраивается тёмная тема Gruvbox для большинства приложений GTK и Qt/KDE, но для некоторых приложений потребуется дополнительная настройка.

No comments to display

Back to top