Merge pull request #17 from lxieyang/dark-mode-dev

Dark mode implementation complete

Author: lxieyang

CHANGELOG.md

@@ -12,6 +12,12 @@ All notable changes to this project will be documented in this file.
 
 # v1.x (official releases)
 
+### [1.5.0](https://github.com/lxieyang/vertical-tabs-chrome-extension/releases/tag/v1.5.0) (2019-12-26)
+
+- Dark theme support! 🕶️🕶️🕶️
+
+<img src="preview/repo/dark-mode.png" width="300"/>
+
 ### [1.2.1](https://github.com/lxieyang/vertical-tabs-chrome-extension/releases/tag/v1.2.1) (2019-12-01)
 
 - Remove `AutoFocus` feature.
@@ -21,7 +27,7 @@ All notable changes to this project will be documented in this file.
 
 - Prompt users to refresh pages after the extension got updated to a newer version.
 
-![update-notice](preview/repo/update-notice.png)
+<img src="preview/repo/update-notice.png" width="300"/>
 
 ### [1.1.0](https://github.com/lxieyang/vertical-tabs-chrome-extension/releases/tag/v1.1.0) (2019-09-01)
 

README.md

@@ -24,6 +24,12 @@ Chrome web store link: [Vertical Tabs (https://chrome.google.com/webstore/detail
 
 ---
 
+**Dark theme support is here 🕶️🕶️🕶️**
+
+<img src="preview/repo/dark-mode.png" width="300"/>
+
+---
+
 ![preview](/preview/chrome-store/preview-1.png)
 
 Youtube Preview Link: [https://youtu.be/BcpD38IjY6A](https://youtu.be/BcpD38IjY6A)
@@ -36,6 +42,7 @@ Youtube Preview Link: [https://youtu.be/BcpD38IjY6A](https://youtu.be/BcpD38IjY6
 
 ## Features
 
+- Dark theme support.
 - Display tabs vertically in a sidebar on web pages.
 - Tabs are displayed with the same style as Google Chrome.
 - Drag and Drop to reorder tabs.
@@ -48,7 +55,7 @@ Youtube Preview Link: [https://youtu.be/BcpD38IjY6A](https://youtu.be/BcpD38IjY6
 
 ## Planned Features
 
-- Dark theme
+- Tree styled tabs
 
 ## 👉 👉 [Release Notes and Change log](/CHANGELOG.md)
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vertical-tabs-chrome-extension",
-  "version": "1.2.1",
+  "version": "1.5.0",
   "description": "A chrome extension that presents your tabs vertically.",
   "license": "MIT",
   "repository": {
@@ -31,6 +31,7 @@
     "react-icons": "^3.8.0",
     "react-lines-ellipsis": "^0.14.1",
     "react-loader-spinner": "^3.1.5",
+    "react-media": "^1.10.0",
     "react-tiny-popover": "^4.0.0",
     "styled-components": "^4.4.1"
   },

package.json

@@ -92,6 +92,25 @@ const persistdisplayTabInFullStatus = (status) => {
   });
 };
 
+/**
+ * Dark Mode
+ */
+let darkMode = 'auto';
+
+chrome.storage.sync.get(['darkMode'], (result) => {
+  if (result.darkMode !== undefined) {
+    darkMode = result.darkMode;
+  } else {
+    persistDarkMode('auto'); // default to auto
+  }
+});
+
+const persistDarkMode = (status) => {
+  chrome.storage.sync.set({
+    darkMode: status,
+  });
+};
+
 const toggleSidebar = (toStatus = null) => {
   if (toStatus === null || toStatus === undefined) {
     sidebarOpen = !sidebarOpen;
@@ -203,6 +222,23 @@ const updateDisplayTabInFullStatus = (toStatus) => {
   );
 };
 
+const updateDarkModeStatus = (toStatus) => {
+  chrome.tabs.query(
+    {
+      currentWindow: true,
+    },
+    function(tabs) {
+      tabs.forEach((tab) => {
+        chrome.tabs.sendMessage(tab.id, {
+          from: 'background',
+          msg: 'UPDATE_DARK_MODE_STATUS',
+          toStatus,
+        });
+      });
+    }
+  );
+};
+
 // chrome.browserAction.setPopup({
 //   popup: chrome.extension.getURL('sidebar.html'),
 // });
@@ -281,5 +317,13 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     displayTabInFull = toStatus;
     persistdisplayTabInFullStatus(displayTabInFull);
     updateDisplayTabInFullStatus(displayTabInFull);
+  } else if (
+    request.from === 'settings' &&
+    request.msg === 'USER_CHANGE_DARK_MODE'
+  ) {
+    const { toStatus } = request;
+    darkMode = toStatus;
+    persistDarkMode(darkMode);
+    updateDarkModeStatus(darkMode);
   }
 });

preview/repo/dark-mode.png

@@ -70,7 +70,7 @@ export class Frame extends Component {
     isMinimized: true, // default is minimized,
 
     isDragging: false,
-    width: 280,
+    width: 320,
     height: '100%',
   };
 

src/pages/Background/index.js

@@ -1,3 +1,8 @@
 .SidebarContainer {
   background-color: rgb(222, 225, 230);
 }
+
+.SidebarContainer.Dark {
+  color: rgb(167, 167, 167);
+  background-color: rgb(36, 36, 36);
+}

src/pages/Content/modules/frame/frame.jsx

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import update from 'immutability-helper';
+import DarkModeContext from './context/dark-mode-context';
 import { sortBy } from 'lodash';
 
 import Title from './containers/Title/Title';
 import TabsList from './containers/TabsList/TabsList';
-import Tab from './containers//TabsList/Tab/Tab';
 
 import { getFavicon } from '../../shared/utils';
 
@@ -255,17 +255,28 @@ class Sidebar extends Component {
     const { tabOrders, activeTab, tabsDict, displayTabInFull } = this.state;
 
     return (
-      <div className="SidebarContainer">
-        <Title setDisplayTabInFull={this.setDisplayTabInFull} />
-        <TabsList
-          displayTabInFull={displayTabInFull}
-          tabOrders={tabOrders}
-          activeTab={activeTab}
-          tabsDict={tabsDict}
-          moveTab={this.moveTab}
-          setTabAsLoading={this.setTabAsLoading}
-        />
-      </div>
+      <DarkModeContext.Consumer>
+        {(darkModeContext) => {
+          return (
+            <div
+              className={[
+                'SidebarContainer',
+                darkModeContext.isDark ? 'Dark' : null,
+              ].join(' ')}
+            >
+              <Title setDisplayTabInFull={this.setDisplayTabInFull} />
+              <TabsList
+                displayTabInFull={displayTabInFull}
+                tabOrders={tabOrders}
+                activeTab={activeTab}
+                tabsDict={tabsDict}
+                moveTab={this.moveTab}
+                setTabAsLoading={this.setTabAsLoading}
+              />
+            </div>
+          );
+        }}
+      </DarkModeContext.Consumer>
     );
   }
 }

src/pages/Sidebar/Sidebar.css

@@ -33,6 +33,14 @@ input[type='search']::-webkit-search-cancel-button {
   line-height: 1.3;
 
   position: relative;
+
+  transition: 0.1s all ease-in;
+}
+
+.SearchBarInput.Dark {
+  background-color: rgb(51, 51, 51);
+  color: rgb(190, 193, 198);
+  border-color: rgb(32, 33, 36);
 }
 
 .SearchBarInput:focus {
@@ -43,6 +51,11 @@ input[type='search']::-webkit-search-cancel-button {
   background-color: rgb(252, 252, 252);
 }
 
+.SearchBarInput.Dark:hover,
+.SearchBarInput.Dark:hover {
+  background-color: rgb(41, 41, 41);
+}
+
 .SearchResultsCountContainer {
   flex-shrink: 0;
   margin-right: 6px;
@@ -59,7 +72,7 @@ input[type='search']::-webkit-search-cancel-button {
   height: 25px;
   font-size: 0.8rem;
 
-  background-color: #f5f5f5;
+  background-color: #d5d5d5;
   color: #363636;
   border-radius: 50%;