-
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
MainWindow: add light/dark headerbar colors
- Loading branch information
1 parent
cd66fe6
commit d3ba2e7
Showing
7 changed files
with
242 additions
and
52 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| @define-color headerbar_bg_color @headerbar_bg_dark; | ||
| @define-color headerbar_fg_color @headerbar_fg_dark; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,8 @@ | ||
| @define-color headerbar_bg_color #03a9f5; | ||
| @define-color headerbar_fg_color #fff; | ||
| @define-color headerbar_border_color #fff; | ||
| @define-color headerbar_backdrop_color mix(@headerbar_bg_color, @window_bg_color, 0.1); | ||
| @define-color ha_color #03a9f5; | ||
| @define-color accent_color @ha_color; | ||
|
|
||
| @define-color headerbar_bg_color @headerbar_bg_light; | ||
| @define-color headerbar_fg_color @headerbar_fg_light; | ||
|
|
||
| @define-color accent_color @headerbar_bg_color; | ||
| @define-color headerbar_border_color @headerbar_fg_color; | ||
| @define-color headerbar_backdrop_color mix(@headerbar_bg_color, @window_bg_color, 0.1); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| /* | ||
| * SPDX-License-Identifier: GPL-3.0-or-later | ||
| * SPDX-FileCopyrightText: 2020–2024 Cassidy James Blaede <[email protected]> | ||
| */ | ||
|
|
||
| namespace Butler { | ||
|
|
||
| private static double contrast_ratio (Gdk.RGBA bg_color, Gdk.RGBA fg_color) { | ||
| // From WCAG 2.0 https://www.w3.org/TR/WCAG20/#contrast-ratiodef | ||
| var bg_luminance = get_luminance (bg_color); | ||
| var fg_luminance = get_luminance (fg_color); | ||
|
|
||
| if (bg_luminance > fg_luminance) { | ||
| return (bg_luminance + 0.05) / (fg_luminance + 0.05); | ||
| } | ||
|
|
||
| return (fg_luminance + 0.05) / (bg_luminance + 0.05); | ||
| } | ||
|
|
||
| private static double get_luminance (Gdk.RGBA color) { | ||
| // Values from WCAG 2.0 https://www.w3.org/TR/WCAG20/#relativeluminancedef | ||
| var red = sanitize_color (color.red) * 0.2126; | ||
| var green = sanitize_color (color.green) * 0.7152; | ||
| var blue = sanitize_color (color.blue) * 0.0722; | ||
|
|
||
| return red + green + blue; | ||
| } | ||
|
|
||
| private static double sanitize_color (double color) { | ||
| // From WCAG 2.0 https://www.w3.org/TR/WCAG20/#relativeluminancedef | ||
| if (color <= 0.03928) { | ||
| return color / 12.92; | ||
| } | ||
|
|
||
| return Math.pow ((color + 0.055) / 1.055, 2.4); | ||
| } | ||
|
|
||
| /** | ||
| * Takes a {@link Gdk.RGBA} background color and returns a suitably-contrasting foreground color, i.e. for determining text color on a colored background. There is a slight bias toward returning white, as white generally looks better on a wider range of colored backgrounds than black. | ||
| * | ||
| * Copied from my implementation in Granite https://github.com/elementary/granite/commit/74b7e4318dc7721a6c09dd6bf67713299d7be8eb | ||
| * | ||
| * @param bg_color any {@link Gdk.RGBA} background color | ||
| * | ||
| * @return a contrasting {@link Gdk.RGBA} foreground color, i.e. white ({ 1.0, 1.0, 1.0, 1.0}) or black ({ 0.0, 0.0, 0.0, 1.0}). | ||
| */ | ||
| public static Gdk.RGBA contrasting_foreground_color (Gdk.RGBA bg_color) { | ||
| Gdk.RGBA gdk_white = { 1.0f, 1.0f, 1.0f, 1.0f }; | ||
| Gdk.RGBA gdk_black = { 0.0f, 0.0f, 0.0f, 1.0f }; | ||
|
|
||
| var contrast_with_white = contrast_ratio ( | ||
| bg_color, | ||
| gdk_white | ||
| ); | ||
| var contrast_with_black = contrast_ratio ( | ||
| bg_color, | ||
| gdk_black | ||
| ); | ||
|
|
||
| // Default to white | ||
| var fg_color = gdk_white; | ||
|
|
||
| // NOTE: We cheat and add 6 to contrast when checking against black, | ||
| // because white generally looks better on a colored background | ||
| if ( contrast_with_black > (contrast_with_white + 6) ) { | ||
| fg_color = gdk_black; | ||
| } | ||
|
|
||
| return fg_color; | ||
| } | ||
| } |
Oops, something went wrong.