diff --git a/src/app/ui/styles-guide/theme-chooser.js b/src/app/ui/styles-guide/theme-chooser.js
index 9ede538992..671f0e5f8a 100644
--- a/src/app/ui/styles-guide/theme-chooser.js
+++ b/src/app/ui/styles-guide/theme-chooser.js
@@ -10,6 +10,12 @@ const themes = {
   light: 'https://bootstrap.themes.guide/herbie/theme.min.css',
   clean: 'https://bootstrap.themes.guide/signal/theme.min.css'
 }
+// Used for the scroll color
+const themeVariable = {
+  dark: 'dark',
+  light: 'light',
+  clean: 'light'
+}
 module.exports = {
 
   chooser: function () {
@@ -17,16 +23,20 @@ module.exports = {
     if (themeStorage.exists('theme')) {
       if (themeStorage.get('theme') === 'dark') {
         document.getElementById('theme-link').setAttribute('href', themes['dark'])
+        document.documentElement.style.setProperty('--theme', 'dark')
         return styleGuideDark()
       } else if (themeStorage.get('theme') === 'clean') {
         document.getElementById('theme-link').setAttribute('href', themes['clean'])
+        document.documentElement.style.setProperty('--theme', 'light')
         return styleGuideClean()
       } else {
         document.getElementById('theme-link').setAttribute('href', themes['light'])
+        document.documentElement.style.setProperty('--theme', 'light')
         return styleGuideLight()
       }
     } else {
       document.getElementById('theme-link').setAttribute('href', themes['light'])
+      document.documentElement.style.setProperty('--theme', 'light')
       return styleGuideLight()
     }
   },
@@ -36,6 +46,7 @@ module.exports = {
     themeStorage.set('theme', theme)
     if (themes[theme]) {
       document.getElementById('theme-link').setAttribute('href', themes[theme])
+      document.documentElement.style.setProperty('--theme', themeVariable[theme])
     }
     // if (theme === 'dark') {
     //   return styleGuideDark()