Add flat theme.

Author: rebornix

sass/popup.scss

@@ -1306,3 +1306,60 @@ svg {
     border: 2px solid black !important;
   }
 }
+
+// Flat overrides
+.theme-flat {
+  .header {
+    color: black;
+    background: white;
+    border-bottom: #f5f4f7 1px solid;
+  }
+
+  #codes {
+    background: #fcfbff;
+
+    .entry {
+      border: #f5f4f7 1px solid;
+      border-radius: 8px;
+    }
+  }
+
+  #menu {
+    #menuBody {
+      background: #fcfbff;
+
+      .menuList {
+        margin: 10px;
+        border-radius: 8px;
+        border: #f5f4f7 1px solid;
+        background: white;
+
+        p {
+          color: #727272;
+
+          span svg {
+            fill: #727272;
+          }
+        }
+      }
+    }
+
+    #version {
+      bottom: 0px;
+      position: relative;
+      margin: 10px auto;
+      width: 100%;
+      color: #727272;
+      font-size: 0.9em;
+    }
+
+    #info {
+      border-radius: 8px;
+      border: #f5f4f7 1px solid;
+
+      .control-group {
+        border-bottom: #f5f4f7 1px solid;
+      }
+    }
+  }
+}

src/components/Popup.vue

@@ -6,11 +6,13 @@
         theme !== 'accessibility' &&
         theme !== 'dark' &&
         theme !== 'simple' &&
-        theme !== 'compact',
+        theme !== 'compact' &&
+        theme !== 'flat',
       'theme-accessibility': theme === 'accessibility',
       'theme-dark': theme === 'dark',
       'theme-simple': theme === 'simple',
       'theme-compact': theme === 'compact',
+      'theme-flat': theme === 'flat',
       hideoutline,
     }"
     v-on:mousedown="hideoutline = true"

src/models/storage.ts

@@ -660,22 +660,22 @@ export class ManagedStorage {
   static get<T>(key: string, defaultValue: T): T;
   static get<T>(key: string, defaultValue?: T) {
     return new Promise((resolve: (result: T | undefined) => void) => {
-        if (chrome.storage.managed) {
-            chrome.storage.managed.get((data) => {
-              if (chrome.runtime.lastError) {
-                return resolve(defaultValue);
-              }
-              if (data) {
-                if (data[key]) {
-                  return resolve(data[key]);
-                }
-              }
-              return resolve(defaultValue);
-            });
-        } else {
-            // no available in Safari
-            resolve(defaultValue);
-        }
+      if (chrome.storage.managed) {
+        chrome.storage.managed.get((data) => {
+          if (chrome.runtime.lastError) {
+            return resolve(defaultValue);
+          }
+          if (data) {
+            if (data[key]) {
+              return resolve(data[key]);
+            }
+          }
+          return resolve(defaultValue);
+        });
+      } else {
+        // no available in Safari
+        resolve(defaultValue);
+      }
     });
   }
 }