Dark mode toggle implementation (#683)

* svg for theme toggle

* feat: add dark mode state management and CSS variables

* feat: add ThemeToggle component with moon/sun icons

* feat: integrate ThemeToggle into sidebar with proper positioning

* style: update component styles for dark mode compatibility

* 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

* Fix lint

---------

Co-authored-by: Vesa Laakso <[email protected]>

Author: theEquinoxDev

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/assets/icon-moon.svg

@@ -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/assets/icon-sun.svg

@@ -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/Button.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/Dropdown.css

@@ -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/Icon.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/Icon.jsx

@@ -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/Search.css

@@ -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"