Mirrors/stylix
2
0
Fork 0
mirror of https://github.com/danth/stylix synced 2024-11-10 06:34:15 +00:00
Code Issues Projects Releases Packages Wiki Activity

Style GNOME shell ✨

Browse source
This commit is contained in:
Daniel Thwaites 2022-12-19 19:23:41 +00:00
parent ce781e1d96
commit 46899f291b
No known key found for this signature in database
GPG key ID: D8AFC4BF05670F9D
5 changed files with 305 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
flake.nix
View file

@ -66,7 +66,7 @@
./modules/feh.nix
./modules/fish.nix
./modules/gedit
./modules/gnome.nix
./modules/gnome
./modules/grub.nix
./modules/gtk
./modules/helix.nix

31
modules/gnome.nix
View file

@ -1,31 +0,0 @@
{ pkgs, config, lib, ... }:
with lib;
{
options.stylix.targets.gnome.enable =
config.lib.stylix.mkEnableTarget "GNOME" true;
config = mkIf config.stylix.targets.gnome.enable {
home-manager.sharedModules = [{
dconf.settings."org/gnome/desktop/background" = {
color-shading-type = "solid";
picture-options = "zoom";
picture-uri = "file://${config.stylix.image}";
picture-uri-dark = "file://${config.stylix.image}";
};
dconf.settings."org/gnome/desktop/interface".color-scheme =
if config.stylix.polarity == "dark"
then "prefer-dark"
else "default";
}];
# As Stylix is controlling the wallpaper, there is no need for this
# pack of default wallpapers to be installed.
# If you want to use one, you can set stylix.image to something like
# "${pkgs.gnome.gnome-backgrounds}/path/to/your/preferred/background"
# which will then download the pack regardless of its exclusion below.
environment.gnome.excludePackages = [ pkgs.gnome.gnome-backgrounds ];
};
}

71
modules/gnome/colors.mustache Normal file
View file

@ -0,0 +1,71 @@
$is_highcontrast: "false";
$base_color: #{{base00-hex}};
$bg_color: #{{base00-hex}};
$fg_color: #{{base05-hex}};
$selected_fg_color: #{{base00-hex}};
$selected_bg_color: #{{base03-hex}};
$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%));
$borders_color: if($variant == 'light', transparentize($fg_color, .5), transparentize($fg_color, .9));
$borders_edge: if($variant == 'light', rgba(255,255,255,0.8), lighten($bg_color, 5%));
$link_color: #{{base0D-hex}};
$link_visited_color: #{{base0D-hex}};
$warning_color: #{{base0E-hex}};
$error_color: #{{base08-hex}};
$success_color: #{{base0B-hex}};
$destructive_color: $error_color;
$osd_fg_color: #{{base05-hex}};
$osd_bg_color: #{{base01-hex}};
$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
$osd_insensitive_fg_color: $fg_color;
$osd_borders_color: transparentize(black, 0.3);
$osd_outer_borders_color: transparentize($osd_fg_color, 0.98);
$shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2));
// button
$button_mix_factor: 5%;
// cards
$card_bg_color: #{{base01-hex}};
$card_outer_borders_color: transparentize($fg_color, 0.98);
// notifications
$bubble_buttons_color: $card_bg_color;
// overview background color
$system_bg_color: $base_color;
//insensitive state derived colors
$insensitive_fg_color: $fg_color;
$insensitive_bg_color: mix($bg_color, $base_color, 60%);
$insensitive_borders_color: mix($borders_color, $base_color, 60%);
//colors for the backdrop state, derived from the main colors.
$backdrop_base_color: if($variant =='light', darken($base_color,1%), lighten($base_color,1%));
$backdrop_bg_color: $bg_color;
$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 80%);
$backdrop_insensitive_color: if($variant =='light', darken($backdrop_bg_color,15%), lighten($backdrop_bg_color,15%));
$backdrop_borders_color: mix($borders_color, $bg_color, 90%);
$backdrop_dark_fill: mix($backdrop_borders_color,$backdrop_bg_color, 35%);
// derived checked colors
$checked_bg_color: if($variant=='light', darken($bg_color, 7%), lighten($bg_color, 7%));
$card_checked_bg_color: if($variant=='light', darken($card_bg_color, 7%), lighten($card_bg_color, 7%));
$checked_fg_color: if($variant=='light', darken($fg_color, 7%), lighten($fg_color, 7%));
// derived hover colors
$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 10%));
$card_hover_bg_color: if($variant=='light', darken($card_bg_color, 3%), lighten($card_bg_color, 10%));
$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 10%));
// derived active colors
$active_bg_color: if($variant=='light', darken($bg_color, 5%), lighten($bg_color, 12%));
$card_active_bg_color: if($variant=='light', darken($card_bg_color, 5%), lighten($card_bg_color, 12%));
$active_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 12%));

72
modules/gnome/default.nix Normal file
View file

@ -0,0 +1,72 @@
{ pkgs, config, lib, ... }:
with lib;
let
colors = config.lib.stylix.colors {
template = builtins.readFile ./colors.mustache;
extension = "scss";
};
theme = pkgs.stdenv.mkDerivation {
name = "stylix-gnome-shell.css";
src = pkgs.fetchurl {
url = "mirror://gnome/sources/gnome-shell/43/gnome-shell-43.2.tar.xz";
sha256 = "52/UvpNCQQ7p+9zday2Bxv8GDnyMxaDxyuanq6JdGGA=";
};
sourceRoot = "gnome-shell-43.2/data/theme";
patches = [ ./shell.patch ];
postPatch = ''
rm gnome-shell-sass/{_colors.scss,_palette.scss}
cp ${colors} gnome-shell-sass/_colors.scss
'';
nativeBuildInputs = with pkgs; [ sass ];
buildPhase = ''
sass gnome-shell.scss >$out
'';
installPhase = "true";
};
in {
options.stylix.targets.gnome.enable =
config.lib.stylix.mkEnableTarget "GNOME" config.services.xserver.desktopManager.gnome.enable;
config = mkIf config.stylix.targets.gnome.enable {
home-manager.sharedModules = [({ lib, ... }: {
dconf.settings = {
"org/gnome/desktop/background" = {
color-shading-type = "solid";
picture-options = "zoom";
picture-uri = "file://${config.stylix.image}";
picture-uri-dark = "file://${config.stylix.image}";
};
"org/gnome/desktop/interface".color-scheme =
if config.stylix.polarity == "dark"
then "prefer-dark"
else "default";
"org/gnome/shell/extensions/user-theme".name = "Stylix";
};
xdg.dataFile."themes/Stylix/gnome-shell/gnome-shell.css" = {
source = theme;
onChange = ''
gnome-extensions disable user-theme@gnome-shell-extensions.gcampax.github.com
gnome-extensions enable user-theme@gnome-shell-extensions.gcampax.github.com
'';
};
})];
# As Stylix is controlling the wallpaper, there is no need for this
# pack of default wallpapers to be installed.
# If you want to use one, you can set stylix.image to something like
# "${pkgs.gnome.gnome-backgrounds}/path/to/your/preferred/background"
# which will then download the pack regardless of its exclusion below.
environment.gnome.excludePackages = [ pkgs.gnome.gnome-backgrounds ];
};
}

161
modules/gnome/shell.patch Normal file
View file

@ -0,0 +1,161 @@
diff --git a/gnome-shell-sass/_drawing.scss b/gnome-shell-sass/_drawing.scss
index 7c8959e2c..6066def91 100644
--- a/gnome-shell-sass/_drawing.scss
+++ b/gnome-shell-sass/_drawing.scss
@@ -248,7 +248,7 @@
&:insensitive {
@include button(insensitive);
background-color: transparent;
- color: transparentize($selected_fg_color, .5);
+ color: $insensitive_fg_color;
}
}
}
diff --git a/gnome-shell-sass/widgets/_dash.scss b/gnome-shell-sass/widgets/_dash.scss
index 8f5d5f939..f3a7e1029 100644
--- a/gnome-shell-sass/widgets/_dash.scss
+++ b/gnome-shell-sass/widgets/_dash.scss
@@ -1,6 +1,6 @@
/* Dash */
-$dash_background_color: lighten($system_bg_color, 5%);
+$dash_background_color: $card_bg_color;
$dash_placeholder_size: 32px;
$dash_padding: $base_padding*2; // 12px
$dash_border_radius: $modal_radius + $dash_padding;
diff --git a/gnome-shell-sass/widgets/_message-list.scss b/gnome-shell-sass/widgets/_message-list.scss
index 5196661c1..663e754bd 100644
--- a/gnome-shell-sass/widgets/_message-list.scss
+++ b/gnome-shell-sass/widgets/_message-list.scss
@@ -128,7 +128,7 @@
}
// body
- .message-body {color: darken($fg_color, 10%);}
+ .message-body {color: $fg_color;}
}
// URLs in messages
@@ -143,18 +143,17 @@
border-radius: $base_border_radius;
color: $fg_color;
- // colors are lightened since the media controls are in a card
&:hover {
- background-color: lighten($hover_bg_color, 5%);
+ background-color: $card_hover_bg_color;
color: $fg_color;
}
&:active {
- background-color: lighten($active_bg_color, 5%);
+ background-color: $card_active_bg_color;
color: $fg_color;
}
- &:insensitive { color: lighten($insensitive_fg_color, 5%); }
+ &:insensitive { color: $insensitive_fg_color; }
// fix margin for last button
&:last-child:ltr { margin-right: $base_margin*3; }
@@ -171,7 +170,7 @@
// when there is no artwork
&.fallback {
color: darken($fg_color, 17%);
- background-color: $bg_color;
+ background-color: $card_bg_color;
border: 1px solid transparent;
border-radius: $base_border_radius;
icon-size: $large_icon_size !important; // 32px
diff --git a/gnome-shell-sass/widgets/_panel.scss b/gnome-shell-sass/widgets/_panel.scss
index fd3e7d2da..051eefbfe 100644
--- a/gnome-shell-sass/widgets/_panel.scss
+++ b/gnome-shell-sass/widgets/_panel.scss
@@ -1,7 +1,7 @@
/* Top Bar */
// a.k.a. the panel
-$panel_bg_color: #000;
+$panel_bg_color: $osd_bg_color;
$panel_fg_color: if($variant == 'light', lighten($bg_color, 10%), darken($fg_color, 5%));
$panel_height: 2.2em;
$panel_transition_duration: 250ms; // same as the overview transition duration
diff --git a/gnome-shell-sass/widgets/_popovers.scss b/gnome-shell-sass/widgets/_popovers.scss
index 138a4fc0f..ccd020a0f 100644
--- a/gnome-shell-sass/widgets/_popovers.scss
+++ b/gnome-shell-sass/widgets/_popovers.scss
@@ -37,22 +37,22 @@
&:rtl {padding-right: $base_padding;}
&:focus, &:hover {
- background-color: $hover_bg_color !important;
- &:active { background-color: $active_bg_color !important;}
+ background-color: $card_hover_bg_color !important;
+ &:active { background-color: $card_active_bg_color !important;}
}
- &:checked {background-color: $checked_bg_color !important;}
+ &:checked {background-color: $card_checked_bg_color !important;}
&:checked {
margin-bottom: 0;
- box-shadow: inset 0 -1px 0 0 darken($checked_bg_color, 5%);
+ box-shadow: inset 0 -1px 0 0 darken($card_checked_bg_color, 5%);
border-radius: $base_border_radius $base_border_radius 0 0;
- &:focus,&:hover { background-color: lighten($checked_bg_color, 3%) !important;}
- &:active { background-color: lighten($checked_bg_color, 5%) !important;}
+ &:focus,&:hover { background-color: lighten($card_checked_bg_color, 3%) !important;}
+ &:active { background-color: lighten($card_checked_bg_color, 5%) !important;}
}
&:active {
- background-color: lighten($active_bg_color, 5%);
+ background-color: lighten($card_active_bg_color, 5%);
color: $active_fg_color;
}
@@ -84,7 +84,7 @@
// popover submenus
.popup-sub-menu {
- background-color: $checked_bg_color;
+ background-color: $card_checked_bg_color;
border-radius: 0 0 $base_border_radius $base_border_radius;
.popup-menu-ornament {
@@ -100,12 +100,12 @@
border-radius: 0 0 $base_border_radius $base_border_radius;
}
- &:focus,&:hover { background-color: $hover_bg_color !important;}
+ &:focus,&:hover { background-color: $card_hover_bg_color !important;}
&:checked {
- background-color: $checked_bg_color !important;
- &:focus,&:hover { background-color: lighten($checked_bg_color, 8%) !important;}
+ background-color: $card_checked_bg_color !important;
+ &:focus,&:hover { background-color: lighten($card_checked_bg_color, 8%) !important;}
}
- &:active { background-color: $active_bg_color !important;}
+ &:active { background-color: $card_active_bg_color !important;}
}
.popup-menu-section {
diff --git a/gnome-shell-sass/widgets/_quick-settings.scss b/gnome-shell-sass/widgets/_quick-settings.scss
index b429a2dc5..858f286a2 100644
--- a/gnome-shell-sass/widgets/_quick-settings.scss
+++ b/gnome-shell-sass/widgets/_quick-settings.scss
@@ -81,9 +81,12 @@
icon-size: $base_icon_size*1.5; // a non-standard symbolic size but ok
border-radius: 999px;
padding: 1.5 * $base_padding;
- background-color: lighten($bg_color, 10%);
+ background-color: $card_bg_color;
- &.active { background-color: $selected_bg_color; }
+ &.active {
+ color: $selected_fg_color;
+ background-color: $selected_bg_color;
+ }
}
& .title {