From 892b64a28ea8a857d81587635777be980aa3cc04 Mon Sep 17 00:00:00 2001
From: Aditya <adityasuri11ss@gmail.com>
Date: Tue, 9 Dec 2025 10:15:51 +0530
Subject: [PATCH 01/12] svg for theme toggle

---
 client/assets/icon-moon.svg | 3 +++
 client/assets/icon-sun.svg  | 4 ++++
 2 files changed, 7 insertions(+)
 create mode 100644 client/assets/icon-moon.svg
 create mode 100644 client/assets/icon-sun.svg

diff --git a/client/assets/icon-moon.svg b/client/assets/icon-moon.svg
new file mode 100644
index 00000000..6d6762cc
--- /dev/null
+++ b/client/assets/icon-moon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+  <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+</svg>
diff --git a/client/assets/icon-sun.svg b/client/assets/icon-sun.svg
new file mode 100644
index 00000000..c41a0594
--- /dev/null
+++ b/client/assets/icon-sun.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+  <circle cx="12" cy="12" r="5"/>
+  <path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
+</svg>

From 6f374280188cd77f4a708b43e0451b1b5371acfc Mon Sep 17 00:00:00 2001
From: Aditya <adityasuri11ss@gmail.com>
Date: Tue, 9 Dec 2025 10:17:38 +0530
Subject: [PATCH 02/12] feat: add dark mode state management and CSS variables

---
 client/store.js   | 15 +++++++++++++++
 client/viewer.css | 22 ++++++++++++++++++++++
 client/viewer.jsx |  1 +
 3 files changed, 38 insertions(+)

diff --git a/client/store.js b/client/store.js
index 1695db11..cf3e417e 100644
--- a/client/store.js
+++ b/client/store.js
@@ -12,6 +12,7 @@ export class Store {
   @observable defaultSize;
   @observable selectedSize;
   @observable showConcatenatedModulesContent = (localStorage.getItem('showConcatenatedModulesContent') === true);
+  @observable darkMode = (localStorage.getItem('darkMode') === true);
 
   setModules(modules) {
     walkModules(modules, module => {
@@ -179,6 +180,20 @@ export class Store {
       return filteredModules;
     }, []);
   }
+
+  toggleDarkMode() {
+    this.darkMode = !this.darkMode;
+    localStorage.setItem('darkMode', this.darkMode);
+    this.updateTheme();
+  }
+
+  updateTheme() {
+    if (this.darkMode) {
+      document.documentElement.setAttribute('data-theme', 'dark');
+    } else {
+      document.documentElement.removeAttribute('data-theme');
+    }
+  }
 }
 
 export const store = new Store();
diff --git a/client/viewer.css b/client/viewer.css
index f10404d8..7f9876a2 100644
--- a/client/viewer.css
+++ b/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 {
diff --git a/client/viewer.jsx b/client/viewer.jsx
index 19f32c4e..5fa8ea95 100644
--- a/client/viewer.jsx
+++ b/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')

From fb031aee2b1f5df4553e533986a2898750f8fef2 Mon Sep 17 00:00:00 2001
From: Aditya <adityasuri11ss@gmail.com>
Date: Tue, 9 Dec 2025 10:17:55 +0530
Subject: [PATCH 03/12] feat: add ThemeToggle component with moon/sun icons

---
 client/components/ThemeToggle.css | 19 +++++++++++++++++++
 client/components/ThemeToggle.jsx | 28 ++++++++++++++++++++++++++++
 2 files changed, 47 insertions(+)
 create mode 100644 client/components/ThemeToggle.css
 create mode 100644 client/components/ThemeToggle.jsx

diff --git a/client/components/ThemeToggle.css b/client/components/ThemeToggle.css
new file mode 100644
index 00000000..bd63493e
--- /dev/null
+++ b/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);
+}
diff --git a/client/components/ThemeToggle.jsx b/client/components/ThemeToggle.jsx
new file mode 100644
index 00000000..520f2eeb
--- /dev/null
+++ b/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();
+  }
+}

From e653185df29f9a06e5c3829ef22eecce62b0ccc7 Mon Sep 17 00:00:00 2001
From: Aditya <adityasuri11ss@gmail.com>
Date: Tue, 9 Dec 2025 10:18:23 +0530
Subject: [PATCH 04/12] feat: integrate ThemeToggle into sidebar with proper
 positioning

---
 client/components/Sidebar.css | 15 +++++++++++++--
 client/components/Sidebar.jsx |  2 ++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/client/components/Sidebar.css b/client/components/Sidebar.css
index 54241e06..956460a6 100644
--- a/client/components/Sidebar.css
+++ b/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;
diff --git a/client/components/Sidebar.jsx b/client/components/Sidebar.jsx
index 66ac044b..82ffd70a 100644
--- a/client/components/Sidebar.jsx
+++ b/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"

From d9821e824ed59246ae006ae89523ed09bb061c4e Mon Sep 17 00:00:00 2001
From: Aditya <adityasuri11ss@gmail.com>
Date: Tue, 9 Dec 2025 10:18:44 +0530
Subject: [PATCH 05/12] style: update component styles for dark mode
 compatibility

---
 client/components/Button.css   |  9 +++++----
 client/components/Dropdown.css |  6 ++++--
 client/components/Icon.css     |  5 +++++
 client/components/Icon.jsx     | 10 ++++++++++
 client/components/Search.css   | 10 +++++++++-
 5 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/client/components/Button.css b/client/components/Button.css
index 56e40af6..618baa60 100644
--- a/client/components/Button.css
+++ b/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 {
diff --git a/client/components/Dropdown.css b/client/components/Dropdown.css
index f3b78e8a..fe683ace 100644
--- a/client/components/Dropdown.css
+++ b/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 {
diff --git a/client/components/Icon.css b/client/components/Icon.css
index 729f5580..480d6e8f 100644
--- a/client/components/Icon.css
+++ b/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);
 }
diff --git a/client/components/Icon.jsx b/client/components/Icon.jsx
index 5a2371d4..5cb6415a 100644
--- a/client/components/Icon.jsx
+++ b/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]
   }
 };
 
diff --git a/client/components/Search.css b/client/components/Search.css
index c85f6409..8551aa42 100644
--- a/client/components/Search.css
+++ b/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 {

From 01a01ce86a01415da8d55cada557e37bd3b4f935 Mon Sep 17 00:00:00 2001
From: Aditya <adityasuri11ss@gmail.com>
Date: Tue, 9 Dec 2025 14:43:08 +0530
Subject: [PATCH 06/12] docs: update changelog with correct repository link

- Fix PR link to point to webpack/webpack-bundle-analyzer
- Add proper GitHub profile attribution @theEquinoxDev
- Follow established changelog format consistency
---
 CHANGELOG.md    |  4 ++++
 client/store.js | 17 +++++++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 47d8d6f8..9dc02e79 100644
--- a/CHANGELOG.md
+++ b/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**
diff --git a/client/store.js b/client/store.js
index cf3e417e..ba9bc7f1 100644
--- a/client/store.js
+++ b/client/store.js
@@ -12,7 +12,17 @@ export class Store {
   @observable defaultSize;
   @observable selectedSize;
   @observable showConcatenatedModulesContent = (localStorage.getItem('showConcatenatedModulesContent') === true);
-  @observable darkMode = (localStorage.getItem('darkMode') === 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 => {
@@ -183,7 +193,10 @@ export class Store {
 
   toggleDarkMode() {
     this.darkMode = !this.darkMode;
-    localStorage.setItem('darkMode', this.darkMode);
+    try {
+      localStorage.setItem('darkMode', this.darkMode);
+    } catch (e) {
+    }
     this.updateTheme();
   }
 

From 2070913cf7166ae61f1e8402a2f29059d8142e61 Mon Sep 17 00:00:00 2001
From: Aditya <adityasuri11ss@gmail.com>
Date: Wed, 7 Jan 2026 14:55:38 +0530
Subject: [PATCH 07/12] fix: apply dark mode styles to tooltip using CSS
 Modules global selector

---
 client/components/Tooltip.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/client/components/Tooltip.css b/client/components/Tooltip.css
index 5c72c1b9..57c6cc15 100644
--- a/client/components/Tooltip.css
+++ b/client/components/Tooltip.css
@@ -15,3 +15,9 @@
   opacity: 0;
   visibility: hidden;
 }
+
+:global(html[data-theme='dark']) .container { 
+  background: #1f2937; 
+  color: #fff; 
+  border: 1px solid #374151; 
+}

From b85d476352a0e49b638eb5dc88097084dc248b3b Mon Sep 17 00:00:00 2001
From: Aditya <adityasuri11ss@gmail.com>
Date: Wed, 7 Jan 2026 22:23:16 +0530
Subject: [PATCH 08/12] docs: add changelog entry for tooltip dark mode fix

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 566e53aa..e50bdd7c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,9 @@ _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))
 
+ * Fix tooltip styling in dark mode when using CSS Modules
+    ([#688](https://github.com/webpack/webpack-bundle-analyzer/pull/688) by [@theEquinoxDev](https://github.com/theEquinoxDev))
+
 * **New Feature**
   * Add optional dark/light mode toggle ([#683](https://github.com/webpack/webpack-bundle-analyzer/pull/683) by [@theEquinoxDev](https://github.com/theEquinoxDev))
 

From e699fb99745d379ae12e962908aec6d10feb7421 Mon Sep 17 00:00:00 2001
From: Aditya <adityasuri11ss@gmail.com>
Date: Wed, 7 Jan 2026 23:37:07 +0530
Subject: [PATCH 09/12] style: use theme color variables for tooltip dark mode

---
 client/components/Tooltip.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/components/Tooltip.css b/client/components/Tooltip.css
index 57c6cc15..374a3103 100644
--- a/client/components/Tooltip.css
+++ b/client/components/Tooltip.css
@@ -16,8 +16,8 @@
   visibility: hidden;
 }
 
-:global(html[data-theme='dark']) .container { 
-  background: #1f2937; 
-  color: #fff; 
-  border: 1px solid #374151; 
+:global(html[data-theme='dark']) .container {
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
 }

From 6fcb2e8e99d4edd8a44a7e8beb556738f5dffbd7 Mon Sep 17 00:00:00 2001
From: Vesa Laakso <482561+valscion@users.noreply.github.com>
Date: Wed, 7 Jan 2026 20:29:59 +0200
Subject: [PATCH 10/12] Fix changelog entry position

---
 CHANGELOG.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e50bdd7c..1e866146 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,15 +12,16 @@ _Note: Gaps between patch versions are faulty, broken or test releases._
 
 ## UNRELEASED
 
+* **Bug Fix**
+  * Fix tooltip styling in dark mode when using CSS Modules ([#688](https://github.com/webpack/webpack-bundle-analyzer/pull/688) by [@theEquinoxDev](https://github.com/theEquinoxDev))
+
+
 ## 5.1.0
 
 * **Bug Fix**
   * 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))
 
- * Fix tooltip styling in dark mode when using CSS Modules
-    ([#688](https://github.com/webpack/webpack-bundle-analyzer/pull/688) by [@theEquinoxDev](https://github.com/theEquinoxDev))
-
 * **New Feature**
   * Add optional dark/light mode toggle ([#683](https://github.com/webpack/webpack-bundle-analyzer/pull/683) by [@theEquinoxDev](https://github.com/theEquinoxDev))
 

From 2edf185ff40f616ca82532101defc5940b1dd084 Mon Sep 17 00:00:00 2001
From: Aditya <adityasuri11ss@gmail.com>
Date: Mon, 12 Jan 2026 22:38:19 +0530
Subject: [PATCH 11/12] Improve context menu theming - use CSS variables for
 colors

---
 client/components/ContextMenu.css     | 4 ++--
 client/components/ContextMenuItem.css | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/components/ContextMenu.css b/client/components/ContextMenu.css
index b8441dfe..07b35ca2 100644
--- a/client/components/ContextMenu.css
+++ b/client/components/ContextMenu.css
@@ -3,8 +3,8 @@
   position: absolute;
   padding: 0;
   border-radius: 4px;
-  background: #fff;
-  border: 1px solid #aaa;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
   list-style: none;
   opacity: 1;
   white-space: nowrap;
diff --git a/client/components/ContextMenuItem.css b/client/components/ContextMenuItem.css
index a33bc962..027f205e 100644
--- a/client/components/ContextMenuItem.css
+++ b/client/components/ContextMenuItem.css
@@ -11,7 +11,7 @@
 
 .disabled {
   cursor: default;
-  color: gray;
+  color: var(--text-secondary);
 }
 
 .item.disabled:hover {

From 06324209db4f0b5c90d047250938e3478db9ede2 Mon Sep 17 00:00:00 2001
From: Aditya <adityasuri11ss@gmail.com>
Date: Tue, 13 Jan 2026 13:02:48 +0530
Subject: [PATCH 12/12] style: make disabled context menu items more visually
 distinct

---
 client/components/ContextMenuItem.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/components/ContextMenuItem.css b/client/components/ContextMenuItem.css
index 027f205e..84c17dae 100644
--- a/client/components/ContextMenuItem.css
+++ b/client/components/ContextMenuItem.css
@@ -12,6 +12,7 @@
 .disabled {
   cursor: default;
   color: var(--text-secondary);
+  opacity: 0.40;
 }
 
 .item.disabled:hover {