#187 #76 respect browser theme setting (dark mode)

ken107 · May 18, 2021 · 315f1e1 · 315f1e1
1 parent 60561af
commit 315f1e1
Show file tree

Hide file tree

Showing 11 changed files with 115 additions and 25 deletions.
diff --git a/css/common.css b/css/common.css
@@ -9,7 +9,6 @@ body {
   font-weight: 400;
   src: url(MaterialIcons-Regular.woff) format('woff');
 }
-
 .material-icons {
   font-family: 'Material Icons';
   font-weight: normal;
@@ -24,3 +23,22 @@ body {
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 }
+
+.dark-mode {
+  background-color: #252525;
+  color: #d0d0d0;
+}
+.dark-mode .text-muted {
+  color: #999 !important;
+}
+.dark-mode .surface {
+  background-color: #323232;
+}
+.dark-mode .primary {
+  background-color: #bb86fc;
+  color: black;
+}
+.dark-mode .secondary {
+  background-color: #03dac6;
+  color: black;
+}
diff --git a/css/options.css b/css/options.css
@@ -40,6 +40,9 @@ button.close {
   text-decoration: none;
   opacity: .75;
 }
+.dark-mode .close {
+  color: white;
+}
 
 h2 {
   margin-top: 1rem;
@@ -136,6 +139,14 @@ input[type=checkbox], input[type=radio] {
   background-color: #e2e6ea;
   border-color: #dae0e5;
 }
+.dark-mode .btn-light {
+  background-color: #3e3e3e;
+  border-color: transparent;
+  color: #ddd;
+}
+.dark-mode .btn-light.active {
+  background-color: #4e4e4e;
+}
 
 .btn-info {
   color: white;
@@ -200,6 +211,14 @@ input[type=checkbox], input[type=radio] {
   background-color: #d1ecf1;
   border-color: #bee5eb;
 }
+.dark-mode .alert-info {
+  background-color: #3e3e3e;
+  border-color: transparent;
+  color: #ccc;
+}
+.dark-mode .alert-info a {
+  color: #9b9bff;
+}
 
 .green-check {
   float: right;
@@ -233,6 +252,9 @@ input[type=checkbox], input[type=radio] {
   cursor: pointer;
   text-decoration: underline;
 }
+.dark-mode #hotkeys-link {
+  color: #999;
+}
 
 .spinner {
   display: inline-block;

diff --git a/css/popup.css b/css/popup.css
@@ -7,6 +7,10 @@ body {
   text-align: center;
 }
 
+#imgLoading {
+  height: 32px;
+}
+
 #buttons {
   min-width: 85px;
   text-align: center;
@@ -53,7 +57,15 @@ body {
   box-sizing: border-box;
 }
 #highlight span.active {
-  background: yellow;
+  background-color: yellow;
+}
+.dark-mode #highlight {
+  background-color: #333;
+  border: none;
+  color: #d0d0d0;
+}
+.dark-mode #highlight span.active {
+  background-color: #0c4e00;
 }
 
 #toolbar {
@@ -77,6 +89,7 @@ body {
   position: relative;
   flex: 0 1 auto;
   display: flex;
+  align-items: center;
   padding: .25rem .5rem;
   font-size: .875rem;
   line-height: 1.5;
@@ -95,6 +108,10 @@ body {
 #toolbar .material-icons {
   font-size: 1em;
 }
+.dark-mode #toolbar .btn {
+  background-color: #3e3e3e;
+  color: #ddd;
+}
 
 #footer {
   text-align: center;
@@ -114,6 +131,9 @@ body {
   text-align: center;
   display: none;
 }
+.dark-mode #status {
+  color: #f88;
+}
 
 #attribution {
   margin-top: 10px;

diff --git a/custom-voices.html b/custom-voices.html
@@ -13,6 +13,15 @@
   .card-body {
     padding-bottom: .25rem;
   }
+  .container {
+    min-width: 500px;
+  }
+  .dark-mode .card {
+    background-color: #363636;
+  }
+  .dark-mode .card-header {
+    background-color: #444;
+  }
   </style>
 
   <script src="js/jquery-3.1.1.min.js"></script>
@@ -31,13 +40,13 @@ <h3 class="mt-3">Enable Custom Voices</h3>
       <div class="card-body">
         <form>
           <div class="form-group">
-            <input type="text" class="form-control" id="aws-access-key-id" placeholder="Access key ID" />
-          </div>
-          <div class="form-group">
-            <input type="text" class="form-control" id="aws-secret-access-key" placeholder="Secret access key" />
-          </div>
-          <div class="form-group">
-            <button type="button" class="btn btn-primary" id="aws-save-button">Save</button>
+            <div class="input-group">
+              <input type="text" class="form-control" id="aws-access-key-id" placeholder="Access key ID" />
+              <input type="text" class="form-control" id="aws-secret-access-key" placeholder="Secret access key" />
+              <div class="input-group-append">
+                <button type="button" class="btn btn-primary" id="aws-save-button">Save</button>
+              </div>
+            </div>
           </div>
           <div class="form-group">
             <img id="aws-progress" class="status progress" src="img/loading.gif" />
@@ -55,10 +64,12 @@ <h3 class="mt-3">Enable Custom Voices</h3>
       <div class="card-body">
         <form>
           <div class="form-group">
-            <input type="text" class="form-control" id="gcp-api-key" placeholder="API key" />
-          </div>
-          <div class="form-group">
-            <button type="button" class="btn btn-primary" id="gcp-save-button">Save</button>
+            <div class="input-group">
+              <input type="text" class="form-control" id="gcp-api-key" placeholder="API key" />
+              <div class="input-group-append">
+                <button type="button" class="btn btn-primary" id="gcp-save-button">Save</button>
+              </div>
+            </div>
           </div>
           <div class="form-group">
             <img id="gcp-progress" class="status progress" src="img/loading.gif" />
@@ -76,13 +87,13 @@ <h3 class="mt-3">Enable Custom Voices</h3>
       <div class="card-body">
         <form>
           <div class="form-group">
-            <input type="text" class="form-control" id="ibm-api-key" placeholder="API key" />
-          </div>
-          <div class="form-group">
-            <input type="text" class="form-control" id="ibm-url" placeholder="URL" />
-          </div>
-          <div class="form-group">
-            <button type="button" class="btn btn-primary" id="ibm-save-button">Save</button>
+            <div class="input-group">
+              <input type="text" class="form-control" id="ibm-api-key" placeholder="API key" />
+              <input type="text" class="form-control" id="ibm-url" placeholder="URL" />
+              <div class="input-group-append">
+                <button type="button" class="btn btn-primary" id="ibm-save-button">Save</button>
+              </div>
+            </div>
           </div>
           <div class="form-group">
             <img id="ibm-progress" class="status progress" src="img/loading.gif" />

diff --git a/img/loading.gif b/img/loading.gif
diff --git a/js/content/google-doc.js b/js/content/google-doc.js
@@ -29,8 +29,8 @@ var readAloudDoc = new function() {
   function getTexts() {
     return $(".kix-paragraphrenderer", this).get()
       .map(getInnerText)
-      .filter(isNotEmpty)
       .map(removeDumbChars)
+      .filter(isNotEmpty)
   }
 
   function getSelectedText() {
@@ -40,7 +40,7 @@ var readAloudDoc = new function() {
   }
 
   function removeDumbChars(text) {
-    return text && text.replace(/\u200c/g, '');
+    return text && text.replace(/[\n\u200c]+/g, '');
   }
 
   function hack() {

diff --git a/js/defaults.js b/js/defaults.js
@@ -37,6 +37,12 @@ var defaults = {
   highlightWindowSize: 2,
 };
 
+if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+  document.addEventListener("DOMContentLoaded", function() {
+    document.body.classList.add("dark-mode")
+  })
+}
+
 
 /**
  * HELPERS

diff --git a/languages.html b/languages.html
@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Select Languages</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
+  <link rel="stylesheet" type="text/css" href="css/common.css">
   <style>
   h2 {
     margin-top: 15px;
@@ -15,8 +16,8 @@
   }
   .voice-list {
     display: inline-block;
-    margin: 0 0 0 2em;
-    padding: 1em;
+    margin: .2em 0 .8em 1em;
+    padding: .5em 1em;
     background-color: #f6f6f6;
     color: #454545;
     border: 1px solid #c5c5c5;
@@ -26,6 +27,12 @@
   .voice-list input[type=radio] {
     margin-right: .4em;
   }
+  .dark-mode .voice-list {
+    background-color: #333;
+    border: none;
+    box-shadow: 1px 1px black;
+    color: #ddd;
+  }
   </style>
 
   <script src="js/jquery-3.1.1.min.js"></script>

diff --git a/manifest.json b/manifest.json
@@ -4,7 +4,7 @@
   "name": "__MSG_extension_name__",
   "short_name": "__MSG_extension_short_name__",
   "description": "__MSG_extension_description__",
-  "version": "1.41.0",
+  "version": "1.42.0",
   "default_locale": "en",
 
   "browser_action": {

diff --git a/report.html b/report.html
@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Report Issues</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
+  <link rel="stylesheet" type="text/css" href="css/common.css">
   <style>
   h2 {
     margin-top: 15px;
@@ -20,6 +21,9 @@
     float: right;
     display: none;
   }
+  .dark-mode .close {
+    color: white;
+  }
   </style>
 
   <script src="js/jquery-3.1.1.min.js"></script>

diff --git a/shortcuts.html b/shortcuts.html
@@ -5,12 +5,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Shortcut Keys</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
+  <link rel="stylesheet" type="text/css" href="css/common.css">
   <style>
   h2 {
     margin-top: 30px;
     margin-bottom: 20px;
   }
   </style>
+  <script src="js/defaults.js"></script>
 </head>
 <body>
   <div class="container">