diff --git a/src/drivers/webextension/css/styles.css b/src/drivers/webextension/css/styles.css
index 6d8b06fc4..d019afa14 100644
--- a/src/drivers/webextension/css/styles.css
+++ b/src/drivers/webextension/css/styles.css
@@ -2,12 +2,10 @@
   --color-primary: #4608ad;
   --color-primary-darken: #32067c;
   --color-primary-lighten: #f4f1fa;
-  --color-accent: #2196f3;
   --color-secondary: #fafafa;
   --color-secondary-darken: #f5f5f5;
   --color-text: #4a4a4a;
-  --color-text-dark: rgba(255, 255, 255, .8);
-  --color-light-grey: #fafafa;
+  --color-text-dark: var(--color-primary-lighten);
 }
 
 * {
@@ -26,7 +24,7 @@ body {
 }
 
 a, a:focus, a:hover {
-  color: var(--color-accent);
+  color: var(--color-primary);
   outline: none;
   text-decoration: underline;
 }
@@ -58,6 +56,10 @@ a, a:focus, a:hover {
   width: 1.1rem;
 }
 
+.header__icon--hidden {
+  display: none;
+}
+
 .header__switch {
   height: 1.5rem;
   width: 1.5rem;
@@ -159,7 +161,7 @@ a, a:focus, a:hover {
 
 .footer__button-link:hover:before {
   background: var(--color-primary);
-  border-radius: 3px;
+  border-radius: 4px;
   content: '';
   position: absolute;
   top: 0;
@@ -285,6 +287,7 @@ body.dynamic-icon .category__heading:hover .category__pin {
 .technology__link, .technology__link:active, .technology__link:hover {
   align-items: center;
   display: flex;
+  overflow: hidden;
   padding: .1rem 0;
   text-decoration: none;
   width: 200px;
@@ -383,51 +386,59 @@ body.dynamic-icon .category__heading:hover .category__pin {
   margin-top: 1rem;
 }
 
-@media (prefers-color-scheme: dark) {
-  body.theme-mode {
-    background: var(--color-primary-darken);
-    color: var(--color-text-dark);
-  }
-
-  body.theme-mode .category__link, body.theme-mode .category__link:active, body.theme-mode .category__link:hover {
-    color: var(--color-text-dark);
-  }
-
-  body.theme-mode .technology__link {
-    color: var(--color-text-dark);
-  }
-
-  body.theme-mode .technology__icon {
-    background: var(--color-primary);
-  }
-
-  body.theme-mode .technology__version {
-    background: var(--color-primary);
-    color: var(--color-text-dark);
-  }
-
-  body.theme-mode .technology__confidence {
-    background: var(--color-primary);
-    color: var(--color-text-dark);
-  }
-
-  body.theme-mode .footer {
-    background: var(--color-primary);
-    color: var(--color-text-dark);
-  }
-
-  body.theme-mode .footer__button {
-    color: var(--color-text-dark);
-  }
-
-  body.theme-mode .terms__button {
-    background-color: white;
-    color: var(--color-primary);
-  }
-
-  body.theme-mode .terms__button--decline {
-    background-color: var(--color-primary-darken);
-    border: 1px solid white;
-    color: white;
-  }
+/* Dark mode */
+
+.dark {
+  background: var(--color-primary-darken);
+  color: var(--color-text-dark);
+}
+
+.dark .category__link, .dark .category__link:active, .dark .category__link:hover {
+  color: var(--color-text-dark);
+}
+
+.dark .technology__link {
+  color: var(--color-text-dark);
+}
+
+.dark .technology__name {
+  opacity: .8;
+}
+
+.dark .technology__icon {
+}
+
+.dark .technology__version {
+  background: var(--color-primary);
+  color: var(--color-text-dark);
+}
+
+.dark .technology__confidence {
+  background: var(--color-primary);
+  color: var(--color-text-dark);
+}
+
+.dark .footer {
+  background: var(--color-primary);
+  color: var(--color-text-dark);
+}
+
+.dark .footer__button-link, .dark .footer__button-link:active, .dark .footer__button-link:hover {
+  color: var(--color-text-dark);
+}
+
+.dark .footer__button-link:hover:before {
+  background: var(--color-primary-lighten);
+}
+
+
+.dark .terms__button {
+  background-color: white;
+  color: var(--color-primary);
+}
+
+.dark .terms__button--decline {
+  background-color: var(--color-primary-darken);
+  border: 1px solid white;
+  color: white;
 }
diff --git a/src/drivers/webextension/html/options.html b/src/drivers/webextension/html/options.html
index b07b09cab..f7ffb9182 100644
--- a/src/drivers/webextension/html/options.html
+++ b/src/drivers/webextension/html/options.html
@@ -37,12 +37,6 @@
         <span data-i18n="optionTracking">&nbsp;</span>
       </label>
 
-      <label class="options__label">
-        <input class="options__checkbox" type="checkbox">
-
-        <span data-i18n="optionThemeMode">&nbsp;</span>
-      </label>
-
       <button data-i18n="clearCache" class="options__cache">&nbsp;</button>
     </div>
   </body>
diff --git a/src/drivers/webextension/html/popup.html b/src/drivers/webextension/html/popup.html
index 4912b706a..59b2adc87 100644
--- a/src/drivers/webextension/html/popup.html
+++ b/src/drivers/webextension/html/popup.html
@@ -34,6 +34,14 @@
         <title data-i18n="options"></title>
         <path fill="currentColor" d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" />
       </svg>
+
+      <svg class="header__theme header__theme--dark header__icon" viewBox="0 0 24 24">
+        <path fill="currentColor" d="M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z" />
+      </svg>
+
+      <svg class="header__theme header__theme--light header__icon header__icon--hidden" viewBox="0 0 24 24">
+        <path fill="currentColor" d="M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,2L14.39,5.42C13.65,5.15 12.84,5 12,5C11.16,5 10.35,5.15 9.61,5.42L12,2M3.34,7L7.5,6.65C6.9,7.16 6.36,7.78 5.94,8.5C5.5,9.24 5.25,10 5.11,10.79L3.34,7M3.36,17L5.12,13.23C5.26,14 5.53,14.78 5.95,15.5C6.37,16.24 6.91,16.86 7.5,17.37L3.36,17M20.65,7L18.88,10.79C18.74,10 18.47,9.23 18.05,8.5C17.63,7.78 17.1,7.15 16.5,6.64L20.65,7M20.64,17L16.5,17.36C17.09,16.85 17.62,16.22 18.04,15.5C18.46,14.77 18.73,14 18.87,13.21L20.64,17M12,22L9.59,18.56C10.33,18.83 11.14,19 12,19C12.82,19 13.63,18.83 14.37,18.56L12,22Z" />
+      </svg>
     </div>
 
     <div class="empty" data-i18n="noAppsDetected"></div>
@@ -97,7 +105,7 @@
           </svg>
         </div>
         <div class="footer__toggle footer__toggle--open footer__toggle--hidden">
-          <svg class="footer__icon"viewBox="0 0 24 24">
+          <svg class="footer__icon" viewBox="0 0 24 24">
             <path fill="currentColor" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
           </svg>
         </div>
diff --git a/src/drivers/webextension/js/options.js b/src/drivers/webextension/js/options.js
index cfa4c8b48..c43ebcea1 100644
--- a/src/drivers/webextension/js/options.js
+++ b/src/drivers/webextension/js/options.js
@@ -9,13 +9,6 @@ const Options = {
    * Initialise options
    */
   async init() {
-    // Theme mode
-    const themeMode = await getOption('themeMode', false)
-
-    if (themeMode) {
-      document.querySelector('body').classList.add('theme-mode')
-    }
-
     const termsAccepted =
       agent === 'chrome' || (await getOption('termsAccepted', false))
 
@@ -24,7 +17,6 @@ const Options = {
       ['dynamicIcon', false],
       ['badge', true],
       ['tracking', true],
-      ['themeMode', false],
     ].map(async ([option, defaultValue]) => {
       const el = document
         .querySelector(
diff --git a/src/drivers/webextension/js/popup.js b/src/drivers/webextension/js/popup.js
index 04552b8f7..c6a7dff8c 100644
--- a/src/drivers/webextension/js/popup.js
+++ b/src/drivers/webextension/js/popup.js
@@ -85,11 +85,17 @@ const Popup = {
     // Disabled domains
     let disabledDomains = await getOption('disabledDomains', [])
 
-    // Theme mode
-    const themeMode = await getOption('themeMode', false)
+    // Dark mode
+    const theme = await getOption('theme', 'light')
 
-    if (themeMode) {
-      document.querySelector('body').classList.add('theme-mode')
+    if (theme === 'dark') {
+      document.querySelector('body').classList.add('dark')
+      document
+        .querySelector('.header__theme--light')
+        .classList.remove('header__icon--hidden')
+      document
+        .querySelector('.header__theme--dark')
+        .classList.add('header__icon--hidden')
     }
 
     // Terms
@@ -183,6 +189,28 @@ const Popup = {
       .querySelector('.header__settings')
       .addEventListener('click', () => chrome.runtime.openOptionsPage())
 
+    // Theme
+    const body = document.querySelector('body')
+    const dark = document.querySelector('.header__theme--dark')
+    const light = document.querySelector('.header__theme--light')
+
+    document.querySelectorAll('.header__theme').forEach((el) =>
+      el.addEventListener('click', async () => {
+        const theme = await getOption('theme', 'light')
+
+        body.classList[theme === 'dark' ? 'remove' : 'add']('dark')
+        body.classList[theme === 'dark' ? 'add' : 'remove']('light')
+        dark.classList[theme === 'dark' ? 'remove' : 'add'](
+          'header__icon--hidden'
+        )
+        light.classList[theme === 'dark' ? 'add' : 'remove'](
+          'header__icon--hidden'
+        )
+
+        await setOption('theme', theme === 'dark' ? 'light' : 'dark')
+      })
+    )
+
     // Footer
     const item = footers[Math.round(Math.random() * (footers.length - 1))]