diff --git a/lib/StyleManager.vala b/lib/StyleManager.vala index c895bc9e3..31eb8e9d6 100644 --- a/lib/StyleManager.vala +++ b/lib/StyleManager.vala @@ -11,11 +11,9 @@ public class Granite.StyleManager : Object { private static Gtk.CssProvider? accent_provider = null; private static Gtk.CssProvider? base_provider = null; - private static Gtk.CssProvider? dark_provider = null; private static Gtk.CssProvider? app_provider = null; #if INCLUDE_GTK_STYLESHEETS private static Gtk.CssProvider? gtk_base_provider = null; - private static Gtk.CssProvider? gtk_dark_provider = null; #endif private static HashTable? style_managers_by_displays; @@ -95,57 +93,20 @@ public class Granite.StyleManager : Object { } } - if (Gtk.Settings.get_for_display (display).gtk_application_prefer_dark_theme) { - if (base_provider != null) { - Gtk.StyleContext.remove_provider_for_display (display, base_provider); - } - -#if INCLUDE_GTK_STYLESHEETS - if (gtk_base_provider != null) { - Gtk.StyleContext.remove_provider_for_display (display, gtk_base_provider); - } -#endif - - if (dark_provider == null) { - dark_provider = new Gtk.CssProvider (); - dark_provider.load_from_resource ("/io/elementary/granite/Granite-dark.css"); - } - -#if INCLUDE_GTK_STYLESHEETS - if (gtk_dark_provider == null) { - gtk_dark_provider = new Gtk.CssProvider (); - gtk_dark_provider.load_from_resource ("/io/elementary/granite/Gtk-dark.css"); - } - - Gtk.StyleContext.add_provider_for_display (display, gtk_dark_provider, Gtk.STYLE_PROVIDER_PRIORITY_THEME + 1); -#endif - Gtk.StyleContext.add_provider_for_display (display, dark_provider, Gtk.STYLE_PROVIDER_PRIORITY_THEME); - } else { - if (dark_provider != null) { - Gtk.StyleContext.remove_provider_for_display (display, dark_provider); - } - -#if INCLUDE_GTK_STYLESHEETS - if (gtk_dark_provider != null) { - Gtk.StyleContext.remove_provider_for_display (display, gtk_dark_provider); - } -#endif - - if (base_provider == null) { - base_provider = new Gtk.CssProvider (); - base_provider.load_from_resource ("/io/elementary/granite/Granite.css"); - } + if (base_provider == null) { + base_provider = new Gtk.CssProvider (); + base_provider.load_from_resource ("/io/elementary/granite/Granite.css"); + } #if INCLUDE_GTK_STYLESHEETS - if (gtk_base_provider == null) { - gtk_base_provider = new Gtk.CssProvider (); - gtk_base_provider.load_from_resource ("/io/elementary/granite/Gtk.css"); - } + if (gtk_base_provider == null) { + gtk_base_provider = new Gtk.CssProvider (); + gtk_base_provider.load_from_resource ("/io/elementary/granite/Gtk.css"); + } - Gtk.StyleContext.add_provider_for_display (display, gtk_base_provider, Gtk.STYLE_PROVIDER_PRIORITY_THEME + 1); + Gtk.StyleContext.add_provider_for_display (display, gtk_base_provider, Gtk.STYLE_PROVIDER_PRIORITY_THEME + 1); #endif - Gtk.StyleContext.add_provider_for_display (display, base_provider, Gtk.STYLE_PROVIDER_PRIORITY_THEME); - } + Gtk.StyleContext.add_provider_for_display (display, base_provider, Gtk.STYLE_PROVIDER_PRIORITY_THEME); } private Gtk.CssProvider? init_provider_from_file (File file) { diff --git a/lib/Styles/Common/_lighting.scss b/lib/Styles/Common/_lighting.scss index e110cd25d..cfb03289e 100644 --- a/lib/Styles/Common/_lighting.scss +++ b/lib/Styles/Common/_lighting.scss @@ -2,7 +2,7 @@ // simplified @function shadow($level) { - @if $color-scheme == "light" { + // @if $color-scheme == "light" { @if $level == 1 { @return 0 1px 3px rgba(black, 0.12), @@ -22,27 +22,27 @@ 0 15px 12px -10px rgba(black, 0.4), 0 8px 14px 4px rgba(black, 0.15); } - } @else if $color-scheme == "dark" { - @if $level == 1 { - @return - 0 1px 3px rgba(black, 0.42), - 0 1px 2px rgba(black, 0.44); - } @else if $level == 2 { - @return - 0 3px 4px rgba(black, 0.25), - 0 3px 3px -3px rgba(black, 0.45); - } @else if $level == 3 { - @return - 0 3px 8px 2px rgba(black, 0.2), - 0 5px 5px -3px rgba(black, 0.5), - 0 8px 5px 1px rgba(black, 0.2); - } @else if $level == 4 { - @return - 0 2px 4px 2px rgba(black, 0.2), - 0 15px 12px -10px rgba(black, 0.5), - 0 8px 14px 4px rgba(black, 0.25); - } - } + // } @else if $color-scheme == "dark" { + // @if $level == 1 { + // @return + // 0 1px 3px rgba(black, 0.42), + // 0 1px 2px rgba(black, 0.44); + // } @else if $level == 2 { + // @return + // 0 3px 4px rgba(black, 0.25), + // 0 3px 3px -3px rgba(black, 0.45); + // } @else if $level == 3 { + // @return + // 0 3px 8px 2px rgba(black, 0.2), + // 0 5px 5px -3px rgba(black, 0.5), + // 0 8px 5px 1px rgba(black, 0.2); + // } @else if $level == 4 { + // @return + // 0 2px 4px 2px rgba(black, 0.2), + // 0 15px 12px -10px rgba(black, 0.5), + // 0 8px 14px 4px rgba(black, 0.25); + // } + // } } @function highlight($sides: "full") { diff --git a/lib/Styles/Granite-dark.scss b/lib/Styles/Granite-dark.scss deleted file mode 100644 index 57c400733..000000000 --- a/lib/Styles/Granite-dark.scss +++ /dev/null @@ -1,6 +0,0 @@ -$color-scheme: "dark"; -// Common Styles -@import 'Index-dark.scss'; - -// Granite widgets -@import 'Granite/Index.scss'; diff --git a/lib/Styles/Granite.scss b/lib/Styles/Granite.scss index 144986d95..d9367fb5f 100644 --- a/lib/Styles/Granite.scss +++ b/lib/Styles/Granite.scss @@ -1,4 +1,3 @@ -$color-scheme: "light"; // Common Styles @import 'Index.scss'; diff --git a/lib/Styles/Granite/Button.scss b/lib/Styles/Granite/Button.scss index 4fdde5258..a31889875 100644 --- a/lib/Styles/Granite/Button.scss +++ b/lib/Styles/Granite/Button.scss @@ -5,7 +5,9 @@ button { color: white; text-shadow: none; - @if $color-scheme == "dark" {background-clip: padding-box;} + @media (prefers-color-scheme: dark) { + background-clip: padding-box; + } &:backdrop { background-color: inherit; @@ -50,7 +52,7 @@ button { // This stacks with the other shadows, // so reduce it's alpha by the sum of other shadows $shadow-border-color: scale-color($border-color, $alpha: -50%); - @if $color-scheme == "dark" { + @media (prefers-color-scheme: dark) { $shadow-border-color: transparent } diff --git a/lib/Styles/Gtk-dark.scss b/lib/Styles/Gtk-dark.scss deleted file mode 100644 index 29048dc94..000000000 --- a/lib/Styles/Gtk-dark.scss +++ /dev/null @@ -1,6 +0,0 @@ -$color-scheme: "dark"; -// Common Styles -@import 'Index-dark.scss'; - -// Gtk widgets -@import 'Gtk/Index.scss'; diff --git a/lib/Styles/Gtk.scss b/lib/Styles/Gtk.scss index 905f5a900..383b43903 100644 --- a/lib/Styles/Gtk.scss +++ b/lib/Styles/Gtk.scss @@ -1,4 +1,3 @@ -$color-scheme: "light"; // Common Styles @import 'Index.scss'; diff --git a/lib/Styles/Gtk/Paned.scss b/lib/Styles/Gtk/Paned.scss index 728b7bf46..4a47fa619 100644 --- a/lib/Styles/Gtk/Paned.scss +++ b/lib/Styles/Gtk/Paned.scss @@ -1,5 +1,5 @@ $separator-highlight-color: rgba(white, 1); -@if $color-scheme == "dark" { +@media (prefers-color-scheme: dark) { $separator-highlight-color: rgba(white, 0.10); } diff --git a/lib/Styles/Gtk/Separator.scss b/lib/Styles/Gtk/Separator.scss index b36d7ac4e..b6dee3962 100644 --- a/lib/Styles/Gtk/Separator.scss +++ b/lib/Styles/Gtk/Separator.scss @@ -1,5 +1,5 @@ $separator-color: rgba(black, 0.15); -@if $color-scheme == "dark" { +@media (prefers-color-scheme: dark) { $separator-color: rgba(black, 0.35); } @@ -8,4 +8,4 @@ separator { min-height: 1px; min-width: 1px; } - + diff --git a/lib/Styles/Index-dark.scss b/lib/Styles/Index-dark.scss index 67612f686..049f333d5 100644 --- a/lib/Styles/Index-dark.scss +++ b/lib/Styles/Index-dark.scss @@ -1,56 +1,3 @@ $color-scheme: "dark"; -// Constants and functions -@import 'Common/Variables.scss'; -// Outset box shadow or border color on toplevel elements like windows, menus, popovers -$toplevel-border-color: rgba(black, 0.75); - -@function bg-color($level) { - // Inputs - @if $level == 0 { - @return $BLACK_500; - // Views - } @else if $level == 1 { - @return mix($BLACK_500, $BLACK_600, $weight: 50%); - // Background - } @else if $level == 2 { - @return $BLACK_600; - // Sidebars and inline toolbars - } @else if $level == 3 { - @return mix($BLACK_600, $BLACK_700, $weight: 50%); - // Titlebars and toolbars - } @else if $level == 4 { - @return $BLACK_700; - } -} - -// Outset box shadow or border color on inputs like buttons, entries, checkboxes -$border-color: rgba(black, 0.3); - -// Text, images, and other foreground elements -$fg-color: white; - -// Inset box shadows -$highlight_color: rgba(white, 0.2); - -// Semantic colors -$error-color: $STRAWBERRY_300; -$success-color: $LIME_300; -$warning-color: $BANANA_100; -$warning-icon-color: $BANANA_500; - -// Common styles -@import 'Common/Mixins.scss'; -@import '_exported.scss'; -@import '_label.scss'; -@import '_osd.scss'; - -// Gtk Widgets -// @import 'Gtk/Index.scss'; - -// Granite widgets -@import 'Granite/Index.scss'; - -// Maps -@import 'Shumate/Index.scss'; diff --git a/lib/Styles/Index.scss b/lib/Styles/Index.scss index 3faa7061b..d4cebff5e 100644 --- a/lib/Styles/Index.scss +++ b/lib/Styles/Index.scss @@ -1,5 +1,3 @@ -$color-scheme: "light"; - // Constants and functions @import 'Common/Variables.scss'; @@ -54,3 +52,43 @@ $warning-icon-color: mix($BANANA_500, $BANANA_700, $weight: 50%); // Maps @import 'Shumate/Index.scss'; + + +// DARK STUFF + +// Outset box shadow or border color on toplevel elements like windows, menus, popovers +$toplevel-border-color: rgba(black, 0.75); + +@function bg-color($level) { + // Inputs + @if $level == 0 { + @return $BLACK_500; + // Views + } @else if $level == 1 { + @return mix($BLACK_500, $BLACK_600, $weight: 50%); + // Background + } @else if $level == 2 { + @return $BLACK_600; + // Sidebars and inline toolbars + } @else if $level == 3 { + @return mix($BLACK_600, $BLACK_700, $weight: 50%); + // Titlebars and toolbars + } @else if $level == 4 { + @return $BLACK_700; + } +} + +// Outset box shadow or border color on inputs like buttons, entries, checkboxes +$border-color: rgba(black, 0.3); + +// Text, images, and other foreground elements +$fg-color: white; + +// Inset box shadows +$highlight_color: rgba(white, 0.2); + +// Semantic colors +$error-color: $STRAWBERRY_300; +$success-color: $LIME_300; +$warning-color: $BANANA_100; +$warning-icon-color: $BANANA_500; diff --git a/lib/Styles/_exported.scss b/lib/Styles/_exported.scss index daf695eec..66f8e0035 100644 --- a/lib/Styles/_exported.scss +++ b/lib/Styles/_exported.scss @@ -12,7 +12,7 @@ @define-color selected_bg_color #{'alpha(@accent_color, 0.25)'}; @define-color selected_fg_color #{'shade(@accent_color, 0.5)'}; -@if $color-scheme == "dark" { +@media (prefers-color-scheme: dark) { @define-color selected_bg_color #{'alpha(shade(@accent_color, 0.85), 0.5)'}; @define-color selected_fg_color #{'mix(shade(@accent_color, 1.1), white, 0.75)'}; } diff --git a/lib/Styles/meson.build b/lib/Styles/meson.build index cf0820c75..f1b8c11d6 100644 --- a/lib/Styles/meson.build +++ b/lib/Styles/meson.build @@ -16,20 +16,6 @@ gtk_stylesheet_deps = custom_target( install_dir: get_option('datadir') / 'themes' / 'Granite' / 'gtk-4.0' ) -gtk_stylesheet_dark_deps = custom_target( - 'Gtk-dark.scss', - input: 'Gtk-dark.scss', - output: 'gtk-dark.css', - command: [ - sassc, - sassc_opts, - '@INPUT@', - '@OUTPUT@', - ], - install: get_option('gtk-stylesheets'), - install_dir: get_option('datadir') / 'themes' / 'Granite' / 'gtk-4.0' -) - granite_stylesheet_deps = custom_target( 'Granite.scss', input: 'Granite.scss', @@ -44,20 +30,6 @@ granite_stylesheet_deps = custom_target( install_dir: get_option('datadir') / 'themes' / 'Granite' / 'gtk-4.0' ) -granite_stylesheet_dark_deps = custom_target( - 'Granite-dark.scss', - input: 'Granite-dark.scss', - output: 'granite-dark.css', - command: [ - sassc, - sassc_opts, - '@INPUT@', - '@OUTPUT@', - ], - install: false, - install_dir: get_option('datadir') / 'themes' / 'Granite' / 'gtk-4.0' -) - stylesheet_resource = gnome.compile_resources( 'styles-resource', 'styles.gresource.xml', @@ -67,8 +39,6 @@ stylesheet_resource = gnome.compile_resources( ], dependencies: [ gtk_stylesheet_deps, - gtk_stylesheet_dark_deps, granite_stylesheet_deps, - granite_stylesheet_dark_deps ] ) diff --git a/lib/Styles/styles.gresource.xml b/lib/Styles/styles.gresource.xml index 0b2fbb684..31262aa0c 100644 --- a/lib/Styles/styles.gresource.xml +++ b/lib/Styles/styles.gresource.xml @@ -1,9 +1,7 @@ - granite-dark.css granite.css - gtk-dark.css gtk.css