Bux/fix space selector (#92)

* fix: Use browser's default theme for space selector if none is set.

* chore: Set application theme to match users browser preference.

web/utils/layout.py

@@ -56,12 +56,17 @@
 _chat_ui_script = """
 <script>
     parent = window.parent.document || window.document
-
+    const [themeKey, themeKey1] = ['stActiveTheme-/Ask_Shared_Documents-v1', 'stActiveTheme-/-v1']
     const activeTheme = localStorage.getItem('stActiveTheme-/Ask_Shared_Documents-v1') || localStorage.getItem('stActiveTheme-/-v1')
     const theme = JSON.parse(activeTheme)
     const spaceSelector = parent.getElementsByClassName('streamlit-expander')[0]
     const spaceSelectorPresent = spaceSelector && spaceSelector.parentNode && spaceSelector.parentNode.parentNode
 
+    const setTheme = (theme) => {
+        localStorage.setItem(themeKey, JSON.stringify(theme))
+        localStorage.setItem(themeKey1, JSON.stringify(theme))
+    }
+
     /* Space Selector. */
 
     const resizeSelector = (spaceSelector) => {
@@ -81,10 +86,19 @@
             spaceSelector.setAttribute('style', 'background-color: #fff;');
         } else if (theme && theme === 'Dark' && spaceSelector) {
             spaceSelector.setAttribute('style', 'background-color: #1f1f1f;');
+        } else if (spaceSelector) {
+            // Default to browsers theme preference if no theme is set.
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                setTheme({name: 'Dark'})
+                spaceSelector.setAttribute('style', 'background-color: #1f1f1f;');
+            } else {
+                setTheme({name: 'Light'})
+                spaceSelector.setAttribute('style', 'background-color: #fff;');
+            }
         }
     }
 
-    formatSpaceSelector(theme.name)
+    formatSpaceSelector(theme?.name)
 
     /* Gravatar */
     const all = parent.querySelectorAll('[alt="user avatar"]')