Implement dark mode using color-scheme CSS property
This commit is contained in:
parent
0ab9f5a72d
commit
2ef32d2d2d
5 changed files with 28 additions and 6 deletions
|
|
@ -3,12 +3,22 @@
|
|||
* Copyright 2017 Michael Gratton <mike@vee.net>
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Adjust default controls and system colors for light and dark mode.
|
||||
See https://www.w3.org/TR/css-color-adjust-1/#color-scheme-effect */
|
||||
color-scheme: light dark;
|
||||
|
||||
/* Apply canvas background to the root element, so body can darken
|
||||
it using alpha. */
|
||||
background-color: canvas;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: rgb(50% 50% 50% / .05);
|
||||
|
||||
margin: 0 !important;
|
||||
border: 0 !important;
|
||||
padding: 0 !important;
|
||||
color: black;
|
||||
background-color: #f9f9f9;
|
||||
font-size: medium !important;
|
||||
}
|
||||
|
||||
|
|
@ -40,7 +50,7 @@ body > div#geary-quote {
|
|||
}
|
||||
|
||||
body > div:focus-within {
|
||||
background-color: white;
|
||||
background-color: canvas;
|
||||
}
|
||||
|
||||
body > div#geary-signature:focus-within,
|
||||
|
|
|
|||
|
|
@ -13,9 +13,10 @@
|
|||
transition: height 0.25s !important;
|
||||
}
|
||||
|
||||
html {
|
||||
color: black;
|
||||
background-color: white;
|
||||
:root {
|
||||
/* Adjust default controls and system colors for light and dark mode.
|
||||
See https://www.w3.org/TR/css-color-adjust-1/#color-scheme-effect */
|
||||
color-scheme: light dark;
|
||||
|
||||
/* Width must always be defined by the viewport so content doesn't
|
||||
overflow inside the WebView, height must always be defined by the
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@
|
|||
<file compressed="true" preprocess="xml-stripblanks">gtk/help-overlay.ui</file>
|
||||
<file compressed="true" preprocess="xml-stripblanks">password-dialog.glade</file>
|
||||
<file compressed="true" preprocess="xml-stripblanks">problem-details-dialog.ui</file>
|
||||
<file compressed="true">signature-web-view.css</file>
|
||||
<file compressed="true">signature-web-view.js</file>
|
||||
<file compressed="true">geary.css</file>
|
||||
<file compressed="true">single-key-shortcuts.css</file>
|
||||
|
|
|
|||
5
ui/signature-web-view.css
Normal file
5
ui/signature-web-view.css
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
:root {
|
||||
/* Adjust default controls and system colors for light and dark mode.
|
||||
See https://www.w3.org/TR/css-color-adjust-1/#color-scheme-effect */
|
||||
color-scheme: light dark;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue