Merge pull request #14 from jinliming2/dev

style: 适配 Chrome Dark 模式主题🌚
jinliming2 · May 12, 2019 · 782a97a · 782a97a
2 parents c93c3c6 + 5bdfaa5
commit 782a97a
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -40,6 +40,9 @@ Releases from GitHub are downloaded from Google Chrome Web Store, so it also inc
 GitHub Release 中的 crx 文件都是从 Google Chrome Web Store 下载的而不是自己打包的，所以包含了升级信息以及校验元数据，安装后应该不会报警告，同时也会自动到商店检查更新。
 
 ## History
+### v0.5.2(2019/5/12)
+1. 【样式】适配新版 Chrome Dark 模式主题
+
 ### v0.5.1(2019/3/19)
 1. 【修复】由于 v0.5.0 发布时少打包了一个文件，导致 Chrome 商店无法安装、更新
 

diff --git a/c/colour.css b/c/colour.css
@@ -0,0 +1,65 @@
+:root {
+  --google-blue-500-rgb: 66, 133, 244;
+  --google-blue-600-rgb: 26, 115, 232;
+  --google-blue-600: rgb(var(--google-blue-600-rgb));
+  --google-blue-refresh-100: #d2e3fc;
+  --google-blue-refresh-300-rgb: 138, 180, 248;
+  --google-blue-refresh-300: rgb(var(--google-blue-refresh-300-rgb));
+  --google-grey-200: #e8eaed;
+  --google-grey-400: #bdc1c6;
+  --google-grey-600: #80868b;
+  --google-grey-900: #202124;
+  --google-grey-refresh-100: #f1f3f4;
+  --google-grey-refresh-300: #dadce0;
+  --google-grey-refresh-500: #9aa0a6;
+  --google-grey-refresh-700: #5f6368;
+
+  --background-colour: #fff;
+  --background-image: initial;
+  --scroll-bar-colour: var(--google-blue-refresh-300);
+  --scroll-bar-background-colour: var(--google-blue-refresh-100);
+  --text-colour: var(--google-blue-600);
+  --hover-bg-colour: rgba(var(--google-blue-500-rgb), .04);
+  --active-bg: #fff;
+  --paper-button-ink-colour: var(--google-blue-600);
+  --ripple-opacity: .1;
+  --cr-primary-text-colour: var(--google-grey-900);
+  --cr-secondary-text-colour: var(--google-grey-refresh-700);
+  --cr-separator-line: 1px solid rgba(0, 0, 0, .06);
+  --cr-toggle-unchecked-bar-colour: var(--google-grey-400);
+  --cr-toggle-unchecked-button-colour: #fff;
+  --cr-toggle-unchecked-ink-colour: var(--google-grey-600);
+  --cr-toggle-checked-bar-colour: var(--google-blue-600);
+  --cr-toggle-checked-button-colour: var(--google-blue-600);
+  --cr-toggle-checked-ink-colour: var(--google-blue-600);
+  --md-select-bg-colour: var(--google-grey-refresh-100);
+  --md-select-focus-shadow-colour: rgba(var(--google-blue-600-rgb), .4);
+  --md-select-option-bg-colour: #fff;
+  --image-arrow-down: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224px%22%20height%3D%2212px%22%20viewBox%3D%220%200%2024%2012%22%20fill%3D%22%235F6368%22%3E%3Cg%3E%3Cpath%20d%3D%22M%200%200%20L%2024%200%20L%2012%2012%20z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-colour: var(--google-grey-900);
+    --background-image: linear-gradient(rgba(255, 255, 255, .04), rgba(255, 255, 255, .04));
+    --scroll-bar-colour: var(--google-grey-refresh-700);
+    --scroll-bar-background-colour: var(--google-grey-refresh-500);
+    --text-colour: var(--google-blue-refresh-300);
+    --hover-bg-colour: rgba(var(--google-blue-refresh-300-rgb), .08);
+    --active-bg: black linear-gradient(rgba(255, 255, 255, .06), rgba(255, 255, 255, .06));
+    --paper-button-ink-colour: var(--google-blue-refresh-300);
+    --ripple-opacity: .16;
+    --cr-primary-text-colour: var(--google-grey-200);
+    --cr-secondary-text-colour: var(--google-grey-refresh-500);
+    --cr-separator-line: 1px solid rgba(255, 255, 255, .1);
+    --cr-toggle-unchecked-bar-colour: var(--google-grey-refresh-500);
+    --cr-toggle-unchecked-button-colour: var(--google-grey-refresh-300);
+    --cr-toggle-unchecked-ink-colour: var(--google-grey-refresh-300);
+    --cr-toggle-checked-bar-colour: var(--google-blue-refresh-300);
+    --cr-toggle-checked-button-colour: var(--google-blue-refresh-300);
+    --cr-toggle-checked-ink-colour: var(--google-blue-refresh-300);
+    --md-select-bg-colour: rgba(0, 0, 0, .3);
+    --md-select-focus-shadow-colour: rgba(var(--google-blue-refresh-300-rgb), .5);
+    --md-select-option-bg-colour: #28292c;
+    --image-arrow-down: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224px%22%20height%3D%2212px%22%20viewBox%3D%220%200%2024%2012%22%20fill%3D%22%239aa0a6%22%3E%3Cg%3E%3Cpath%20d%3D%22M%200%200%20L%2024%200%20L%2012%2012%20z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+  }
+}
diff --git a/c/option.css b/c/option.css
@@ -1,27 +1,26 @@
-:root {
-  --font-colour: #202124;
-  --google-blue-600: #1a73e8;
-}
 html {
   min-width: 600px;
+  background-color: var(--background-colour);
+  background-image: var(--background-image);
   direction: __MSG_@@bidi_dir__;
 }
 body {
   margin: 0;
-  color: var(--font-colour);
+  color: var(--cr-primary-text-colour);
   font-family: Roboto,'Segoe UI',Arial,'Microsoft Yahei',sans-serif;
   font-size: 81.25%;
+  border-top: var(--cr-separator-line);
 }
 select {
   align-items: center;
   display: inline-flex;
   -webkit-appearance: none;
-  background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224px%22%20height%3D%2212px%22%20viewBox%3D%220%200%2024%2012%22%20fill%3D%22%235F6368%22%3E%3Cg%3E%3Cpath%20d%3D%22M%200%200%20L%2024%200%20L%2012%2012%20z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') calc(100% - 8px) center no-repeat;
-  background-color: #f1f3f4;
+  background: var(--image-arrow-down) calc(100% - 8px) center no-repeat;
+  background-color: var(--md-select-bg-colour);
   background-size: 10px;
   border: none;
   border-radius: 4px;
-  color: var(--font-colour);
+  color: var(--cr-primary-text-colour);
   cursor: pointer;
   max-width: 100%;
   outline: none;
@@ -36,7 +35,10 @@ select:active {
   box-shadow: none;
 }
 select:focus {
-  box-shadow: 0 0 0 2px rgba(26, 115, 232, .4);
+  box-shadow: 0 0 0 2px var(--md-select-focus-shadow-colour);
+}
+optgroup, option {
+  background-color: var(--md-select-option-bg-colour);
 }
 input[type=checkbox] {
   display: none;
@@ -47,7 +49,7 @@ input[type=checkbox] {
   position: relative;
 }
 .checkbox-bar {
-  background-color: #bdc1c6;
+  background-color: var(--cr-toggle-unchecked-bar-colour);
   border-radius: 8px;
   height: 12px;
   left: 3px;
@@ -58,11 +60,11 @@ input[type=checkbox] {
   z-index: 0;
 }
 input[type=checkbox]:checked + .checkbox .checkbox-bar {
-  background-color: var(--google-blue-600);
+  background-color: var(--cr-toggle-checked-bar-colour);
   opacity: .5;
 }
 .checkbox-knob {
-  background-color: #fff;
+  background-color: var(--cr-toggle-unchecked-button-colour);
   border-radius: 50%;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .4);
   display: block;
@@ -75,12 +77,12 @@ input[type=checkbox]:checked + .checkbox .checkbox-bar {
   z-index: 1;
 }
 input[type=checkbox]:checked + .checkbox .checkbox-knob {
-  background-color: var(--google-blue-600);
+  background-color: var(--cr-toggle-checked-button-colour);
   -webkit-margin-start: 18px;
   margin-inline-start: 18px;
 }
 .checkbox-knob .ink {
-  color: #80868b;
+  color: var(--cr-toggle-unchecked-ink-colour);
   position: absolute;
   top: -12px;
   left: -12px;
@@ -93,7 +95,7 @@ input[type=checkbox]:checked + .checkbox .checkbox-knob {
   transform: translate(0);
 }
 input[type=checkbox]:checked + .checkbox .checkbox-knob .ink {
-  color: var(--google-blue-600);
+  color: var(--cr-toggle-checked-ink-colour);
 }
 @keyframes zoom-on {
   0% { transform: scale(0) }
@@ -123,7 +125,7 @@ input[type=checkbox]:checked + .checkbox .checkbox-knob .ink .ripple {
   animation-name: zoom-off;
 }
 .line {
-  border-top: 1px solid rgba(0, 0, 0, .06);
+  border-top: var(--cr-separator-line);
   display: flex;
   align-items: center;
   min-height: 48px;
@@ -149,5 +151,5 @@ input[type=checkbox]:checked + .checkbox .checkbox-knob .ink .ripple {
 }
 .toggle label > div:first-child > :not(:first-child),
 .select label > :not(:first-child) {
-  color: rgb(95, 99, 104);
+  color: var(--cr-secondary-text-colour);
 }
diff --git a/c/popup.css b/c/popup.css
@@ -1,24 +1,21 @@
-:root {
-  --font-colour: #202124;
-  --border: 1px solid #d2e3fc;
-  --google-blue-600: #1a73e8;
-}
 html {
   min-width: fit-content;
+  background-color: var(--background-colour);
+  background-image: var(--background-image);
   direction: __MSG_@@bidi_dir__;
 }
 body {
   margin: 0;
-  color: var(--font-colour);
+  color: var(--cr-primary-text-colour);
   font-family: Roboto,'Segoe UI',Arial,'Microsoft Yahei',sans-serif;
   font-size: 81.25%;
 }
 button {
   border: none;
-  border-top: var(--border);
+  border-top: var(--cr-separator-line);
   background: transparent;
   cursor: pointer;
-  color: var(--google-blue-600);
+  color: var(--text-colour);
   font-weight: 500;
   padding: 8px 16px;
   width: 100%;
@@ -33,10 +30,10 @@ button {
   box-sizing: border-box;
 }
 button:hover {
-  background-color: rgba(66, 133, 244, .04);
+  background-color: var(--hover-bg-colour);
 }
 button:active {
-  background: #fff;
+  background: var(--active-bg);
 }
 button .ink {
   overflow: hidden;
@@ -49,18 +46,20 @@ button .ink {
 }
 button .ink .ripple {
   border-radius: 50%;
-  background-color: var(--google-blue-600);
+  background-color: var(--paper-button-ink-colour);
   position: absolute;
-  opacity: .1;
+  top: 0;
+  left: 0;
+  opacity: var(--ripple-opacity);
   pointer-events: none;
   will-change: height, transform, width;
 }
 hr {
   margin: 0;
-  border: var(--border);
+  border: var(--cr-separator-line);
 }
 .line {
-  border-top: 1px solid rgba(0, 0, 0, .06);
+  border-top: var(--cr-separator-line);
   display: flex;
   align-items: center;
   min-height: 48px;
@@ -74,7 +73,7 @@ hr {
 }
 .line.tip {
   min-height: 0;
-  background-color: #f1f3f4;
+  background-color: var(--md-select-bg-colour);
   cursor: help;
 }
 .line > :not(:first-child) {
@@ -86,8 +85,8 @@ hr {
   height: 8px;
 }
 ::-webkit-scrollbar-thumb {
-    background-color: #8db9f4;
+  background-color: var(--scroll-bar-colour);
 }
 ::-webkit-scrollbar-track-piece {
-    background-color: #d2e3fc;
+  background-color: var(--scroll-bar-background-colour);
 }
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "__MSG_appName__",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "default_locale": "en",
   "description": "__MSG_appDescription__",
   "icons": {

diff --git a/option.html b/option.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
   <meta name="author" content="金黎明,Liming Jin,[email protected],Tianjin China">
+  <link rel="stylesheet" href="./c/colour.css">
   <link rel="stylesheet" href="./c/option.css">
   <script src="./j/encoding.js" defer></script>
   <script src="./j/option.js" defer></script>

diff --git a/popup.html b/popup.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
   <meta name="author" content="金黎明,Liming Jin,[email protected],Tianjin China">
+  <link rel="stylesheet" href="./c/colour.css">
   <link rel="stylesheet" href="./c/popup.css">
   <script src="./j/encoding.js" defer></script>
   <script src="./j/popup.js" defer></script>