Dark mode toggle implementation

CHANGELOG.md

@@ -16,6 +16,10 @@ _Note: Gaps between patch versions are faulty, broken or test releases._
   * Prevent `TypeError` when `assets` or `modules` are undefined in `analyzer.js`
     ([#679](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/679) by [@Srushti-33](https://github.com/Srushti-33))
 
+* **New Feature**
+  * Add optional dark/light mode toggle ([#683](https://github.com/webpack/webpack-bundle-analyzer/pull/683) by [@theEquinoxDev](https://github.com/theEquinoxDev))
+
+
 ## 5.0.1
 
 * **Bug Fix**

client/components/Button.css

@@ -1,19 +1,20 @@
 .button {
-  background: #fff;
-  border: 1px solid #aaa;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
   border-radius: 4px;
   cursor: pointer;
   display: inline-block;
   font: var(--main-font);
   outline: none;
   padding: 5px 7px;
-  transition: background .3s ease;
+  transition: background .3s ease, border-color .3s ease, color .3s ease;
   white-space: nowrap;
+  color: var(--text-primary);
 }
 
 .button:focus,
 .button:hover {
-  background: #ffefd7;
+  background: var(--hover-bg);
 }
 
 .button.active {

client/components/Dropdown.css

@@ -10,12 +10,14 @@
 }
 
 .input {
-  border: 1px solid #aaa;
+  border: 1px solid var(--border-color);
   border-radius: 4px;
   display: block;
   width: 100%;
-  color: #7f7f7f;
+  color: var(--text-secondary);
   height: 27px;
+  background: var(--bg-primary);
+  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
 }
 
 .option {

client/components/Icon.css

@@ -1,4 +1,9 @@
 .icon {
   background: no-repeat center/contain;
   display: inline-block;
+  filter: invert(0);
+}
+
+[data-theme="dark"] .icon {
+  filter: invert(1);
 }

client/components/Icon.jsx

@@ -4,6 +4,8 @@ import PureComponent from '../lib/PureComponent';
 
 import iconArrowRight from '../assets/icon-arrow-right.svg';
 import iconPin from '../assets/icon-pin.svg';
+import iconMoon from '../assets/icon-moon.svg';
+import iconSun from '../assets/icon-sun.svg';
 
 const ICONS = {
   'arrow-right': {
@@ -13,6 +15,14 @@ const ICONS = {
   'pin': {
     src: iconPin,
     size: [12, 18]
+  },
+  'moon': {
+    src: iconMoon,
+    size: [24, 24]
+  },
+  'sun': {
+    src: iconSun,
+    size: [24, 24]
   }
 };
 

client/components/Search.css

@@ -13,11 +13,19 @@
 }
 
 .input {
-  border: 1px solid #aaa;
+  border: 1px solid var(--border-color);
   border-radius: 4px;
   display: block;
   flex: 1;
   padding: 5px;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}
+
+.input:focus {
+  outline: none;
+  border-color: var(--text-secondary);
 }
 
 .clear {

client/components/Sidebar.css

@@ -1,13 +1,14 @@
 @value toggleTime: 200ms;
 
 .container {
-  background: #fff;
+  background: var(--bg-primary);
   border: none;
-  border-right: 1px solid #aaa;
+  border-right: 1px solid var(--border-color);
   box-sizing: border-box;
   max-width: calc(50% - 10px);
   opacity: 0.95;
   z-index: 1;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
 }
 
 .container:not(.hidden) {
@@ -45,6 +46,16 @@
   padding: 0;
 }
 
+.container :global(.themeToggle) {
+  position: absolute;
+  top: 10px;
+  left: 15px;
+  z-index: 10;
+  height: 26px;
+  width: 27px;
+  padding: 0;
+}
+
 .pinButton,
 .toggleButton {
   cursor: pointer;

client/components/Sidebar.jsx

@@ -4,6 +4,7 @@ import cls from 'classnames';
 import s from './Sidebar.css';
 import Button from './Button';
 import Icon from './Icon';
+import ThemeToggle from './ThemeToggle';
 
 const toggleTime = parseInt(s.toggleTime);
 
@@ -48,6 +49,7 @@ export default class Sidebar extends Component {
         className={className}
         onClick={this.handleClick}
         onMouseLeave={this.handleMouseLeave}>
+        <ThemeToggle/>
         {visible &&
           <Button type="button"
             title="Pin"

client/components/ThemeToggle.css

@@ -0,0 +1,19 @@
+.themeToggle {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+}
+
+.themeToggle:hover {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+[data-theme="dark"] .themeToggle:hover {
+  background: rgba(255, 255, 255, 0.1);
+}

client/components/ThemeToggle.jsx

@@ -0,0 +1,28 @@
+import {Component} from 'preact';
+import {observer} from 'mobx-react';
+
+import s from './ThemeToggle.css';
+import Button from './Button';
+import Icon from './Icon';
+import {store} from '../store';
+
+@observer
+export default class ThemeToggle extends Component {
+  render() {
+    const {darkMode} = store;
+
+    return (
+      <Button
+        type="button"
+        title={darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
+        className={s.themeToggle}
+        onClick={this.handleToggle}>
+        <Icon name={darkMode ? 'sun' : 'moon'} size={16}/>
+      </Button>
+    );
+  }
+
+  handleToggle = () => {
+    store.toggleDarkMode();
+  }
+}

client/store.js

@@ -12,6 +12,17 @@
   @observable defaultSize;
   @observable selectedSize;
   @observable showConcatenatedModulesContent = (localStorage.getItem('showConcatenatedModulesContent') === true);
+  @observable darkMode = (() => {
+    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+    try {
+      const saved = localStorage.getItem('darkMode');
+      if (saved !== null) return saved === 'true';
+    } catch (e) {}
+
+    return systemPrefersDark;
+  })();
+
 
   setModules(modules) {
     walkModules(modules, module => {
@@ -179,6 +190,23 @@
       return filteredModules;
     }, []);
   }
+
+  toggleDarkMode() {
+    this.darkMode = !this.darkMode;
+    try {
+      localStorage.setItem('darkMode', this.darkMode);
+    } catch (e) {
+    }
+    this.updateTheme();
+  }
+
+  updateTheme() {
+    if (this.darkMode) {
+      document.documentElement.setAttribute('data-theme', 'dark');
+    } else {
+      document.documentElement.removeAttribute('data-theme');
+    }
+  }
 }
 
 export const store = new Store();

client/viewer.css

@@ -1,5 +1,24 @@
 :root {
   --main-font: normal 11px Verdana, sans-serif;
+  --bg-primary: #fff;
+  --bg-secondary: #f5f5f5;
+  --text-primary: #000;
+  --text-secondary: #666;
+  --border-color: #aaa;
+  --border-light: #ddd;
+  --shadow: rgba(0, 0, 0, 0.1);
+  --hover-bg: rgba(0, 0, 0, 0.05);
+}
+
+[data-theme="dark"] {
+  --bg-primary: #1e1e1e;
+  --bg-secondary: #252525;
+  --text-primary: #e0e0e0;
+  --text-secondary: #a0a0a0;
+  --border-color: #404040;
+  --border-light: #333;
+  --shadow: rgba(0, 0, 0, 0.3);
+  --hover-bg: rgba(255, 255, 255, 0.05);
 }
 
 :global html,
@@ -10,6 +29,9 @@
   overflow: hidden;
   padding: 0;
   width: 100%;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 :global body.resizing {

client/viewer.jsx

@@ -21,6 +21,7 @@ window.addEventListener('load', () => {
   store.defaultSize = `${window.defaultSizes}Size`;
   store.setModules(window.chartData);
   store.setEntrypoints(window.entrypoints);
+  store.updateTheme();
   render(
     <ModulesTreemap/>,
     document.getElementById('app')