theme

extension/background.js

@@ -1,7 +1,9 @@
 let id = 1
-let viewTabUrl = null
+let viewTabUrl
 
 function buildTab(data) {
+  viewTabUrl = chrome.runtime.getURL('index.html?id=' + id++)
+
   chrome.tabs.create({ url: viewTabUrl })
 
   chrome.tabs.onUpdated.addListener(function listener(tabId, changedProps) {
@@ -34,10 +36,6 @@ function sendMessagePromise(tabId, item) {
 }
 
 chrome.browserAction.onClicked.addListener(function () {
-  viewTabUrl = chrome.runtime.getURL('index.html?id=' + id++)
-
-  chrome.tabs.insertCSS({ file: './dist/gather.css' })
-
   chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
     sendMessagePromise(tabs[0].id, {
       message: 'start_gobbling',

extension/index.html

@@ -47,7 +47,12 @@
         <div class="gob__countCont"></div>
       </div>
 
-      <div class="gob__mast"></div>
+      <div class="gob__mast">
+        <div class="gob__theme">
+          <label for="theme">Dark theme</label>
+          <input type="checkbox" class="theme-switch" id="theme"></input>
+        </div>
+      </div>
 
       <div class="gob__container"></div>
 

src/scripts/create-ui.js

@@ -1,5 +1,6 @@
 import createCards from './create-card'
 import download from './download'
+import themeSwitcher from './theme-switcher'
 
 require('./export-image.js')
 require('./modal.js')
@@ -39,6 +40,7 @@ const createUI = data => {
   window.document.querySelector('.gob__mast').appendChild(svgCount)
   countCont.appendChild(gobCount)
 
+  themeSwitcher()
   createCards(data, container)
 }
 

src/scripts/theme-switcher.js

@@ -0,0 +1,15 @@
+function themeSwitcher() {
+  const toggleSwitch = document.querySelector('#theme')
+
+  function switchTheme(e) {
+    if (e.target.checked) {
+      document.documentElement.setAttribute('data-theme', 'dark')
+    } else {
+      document.documentElement.setAttribute('data-theme', 'light')
+    }
+  }
+
+  toggleSwitch.addEventListener('change', switchTheme, false)
+}
+
+export default themeSwitcher

src/styles/colors.scss

@@ -1,9 +1,23 @@
-/* Colors */
 $white: #ffffff;
 $gray5: #333948;
-$gray4: rgba($gray5, 0.7);
 $gray3: rgba($gray5, 0.3);
-$gray2: rgba($gray5, 0.2);
-$gray1: rgba($gray5, 0.1);
+$gray2: #c5c6cb;
+$gray1: #d1d2d8;
 $primary: #fa555d;
 $success: #10d173;
+
+:root {
+  --background: #3339481a;
+  --card-surface: #ffffff;
+  --divider: #c5c6cb;
+  --text: #333948;
+  --text-subdued: #70757f;
+}
+
+[data-theme='dark'] {
+  --background: #1e2025;
+  --card-surface: #333948;
+  --divider: #595f6f;
+  --text: #fff;
+  --text-subdued: #cecece;
+}

src/styles/index.scss

@@ -12,7 +12,7 @@ html {
 body {
   margin: 0;
   @include font-family();
-  background-color: $gray1;
+  background-color: var(--background);
   color: $gray5;
   font-size: 14px;
 }
@@ -46,9 +46,10 @@ a:visited {
 
   &__footer {
     display: flex;
+    color: var(--text);
     flex-direction: column;
     margin: 0 72px 48px;
-    border-top: 1px solid $gray2;
+    border-top: 1px solid var(--divider);
 
     & ul {
       display: flex;
@@ -69,12 +70,20 @@ a:visited {
     }
   }
 
+  &__theme {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    line-height: 14px;
+  }
+
   &__mast {
     margin: 32px 72px 0;
     display: flex;
-    flex-direction: column;
+    flex-direction: row-reverse;
+    justify-content: space-between;
     font-size: 13px;
-    color: $gray5;
+    color: var(--text);
 
     &__count {
       font-size: 19px;
@@ -113,7 +122,7 @@ a:visited {
     display: none;
     flex-direction: column;
     z-index: 1;
-    background: $white;
+    background: var(--card-surface);
     border-radius: 12px;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
     position: relative;
@@ -167,7 +176,7 @@ a:visited {
       margin: 0 20px;
       line-height: 1.4;
       padding: 12px 0 20px;
-      border-top: 1px solid $gray2;
+      border-top: 1px solid var(--divider);
       position: relative;
       display: grid;
       align-items: start;
@@ -183,7 +192,7 @@ a:visited {
       }
 
       & h3 {
-        color: $gray5;
+        color: var(--text);
         font-size: 18px;
         font-weight: 500;
         text-transform: capitalize;
@@ -193,7 +202,7 @@ a:visited {
         text-transform: uppercase;
         letter-spacing: 0.6px;
         font-weight: 600;
-        color: $gray4;
+        color: var(--text-subdued);
         margin: 0 0 2px;
         font-size: 12px;
       }
@@ -214,7 +223,7 @@ a:visited {
     display: grid;
     align-items: center;
     grid-template-columns: 3fr 2fr 40px;
-    background: $white;
+    background: var(--card-surface);
     padding: 0 0 10px;
     grid-gap: 8px;
     position: absolute;
@@ -241,7 +250,7 @@ a:visited {
     align-items: center;
     border-radius: 6px;
     font-weight: 500;
-    padding: 16px 20px;
+    padding: 12px 16px;
     line-height: 1;
     border: 2px solid $primary;