[cordova-app-hello-world] branch master updated: feature: dark mode (#43)

[er...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

erisu pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/cordova-app-hello-world.git


The following commit(s) were added to refs/heads/master by this push:
     new 2a382ff  feature: dark mode (#43)
2a382ff is described below

commit 2a382ff01641ca922a649c173955d6a3ec08999f
Author: Darryl Pogue <da...@dpogue.ca>
AuthorDate: Tue Mar 3 22:18:50 2020 -0800

    feature: dark mode (#43)
    
    * GH-41: Add support for dark mode to the template
    * Minor misc CSS cleanups
---
 template_src/www/css/index.css | 18 +++++++++---------
 template_src/www/index.html    |  3 ++-
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/template_src/www/css/index.css b/template_src/www/css/index.css
index 3bad903..ecea7e8 100644
--- a/template_src/www/css/index.css
+++ b/template_src/www/css/index.css
@@ -25,7 +25,7 @@ body {
     -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
     -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
     background-color:#E4E4E4;
-    background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
+    background-image:linear-gradient(to bottom, #A7A7A7 0%, #E4E4E4 51%);
     font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
     font-size:12px;
     height:100vh;
@@ -72,7 +72,6 @@ h1 {
 
 .event {
     border-radius:4px;
-    -webkit-border-radius:4px;
     color:#FFFFFF;
     font-size:12px;
     margin:0px 30px;
@@ -97,14 +96,15 @@ h1 {
     50% { opacity: 0.4; }
     to { opacity: 1.0; }
 }
- 
-@-webkit-keyframes fade {
-    from { opacity: 1.0; }
-    50% { opacity: 0.4; }
-    to { opacity: 1.0; }
-}
- 
+
 .blink {
     animation:fade 3000ms infinite;
     -webkit-animation:fade 3000ms infinite;
 }
+
+
+@media screen and (prefers-color-scheme: dark) {
+    body {
+        background-image:linear-gradient(to bottom, #585858 0%, #1B1B1B 51%);
+    }
+}
diff --git a/template_src/www/index.html b/template_src/www/index.html
index 82dbdb4..c465987 100644
--- a/template_src/www/index.html
+++ b/template_src/www/index.html
@@ -32,7 +32,8 @@
         <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
         <meta name="format-detection" content="telephone=no">
         <meta name="msapplication-tap-highlight" content="no">
-        <meta name="viewport" content="user-scalable=no, initial-scale=1, width=device-width, viewport-fit=cover">
+        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
+        <meta name="color-scheme" content="light dark">
         <link rel="stylesheet" href="css/index.css">
         <title>Hello World</title>
     </head>


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@cordova.apache.org
For additional commands, e-mail: commits-help@cordova.apache.org