Adding a browser default theme option. Fixes #35

src/server/index.tsx

@@ -107,7 +107,7 @@ server.get('/*', async (req, res) => {
              </noscript>
             
              <div id='root'>${root}</div>
-             <script src='/static/js/client.js'></script>
+             <script defer src='/static/js/client.js'></script>
            </body>
          </html>
 `);

src/shared/components/user.tsx

@@ -535,6 +535,7 @@ export class User extends Component<any, UserState> {
                   class="ml-2 custom-select w-auto"
                 >
                   <option disabled>{i18n.t('theme')}</option>
+                  <option value="browser">{i18n.t('browser_default')}</option>
                   {themes.map(theme => (
                     <option value={theme}>{theme}</option>
                   ))}
@@ -1050,7 +1051,7 @@ export class User extends Component<any, UserState> {
         UserService.Instance.user.show_nsfw;
       this.state.userSettingsForm.theme = UserService.Instance.user.theme
         ? UserService.Instance.user.theme
-        : 'darkly';
+        : 'browser';
       this.state.userSettingsForm.default_sort_type =
         UserService.Instance.user.default_sort_type;
       this.state.userSettingsForm.default_listing_type =

src/shared/utils.ts

@@ -437,7 +437,12 @@ export function getMomentLanguage(): string {
 }
 
 export function setTheme(theme: string, forceReload: boolean = false) {
-  if (isBrowser() && (theme !== 'darkly' || forceReload)) {
+  if (isBrowser() && (theme !== 'browser' || forceReload)) {
+    // This is only run on a force reload
+    if (theme == 'browser') {
+      theme = 'darkly';
+    }
+
     // Unload all the other themes
     for (var i = 0; i < themes.length; i++) {
       let styleSheet = document.getElementById(themes[i]);
@@ -452,6 +457,7 @@ export function setTheme(theme: string, forceReload: boolean = false) {
     document
       .getElementById('default-dark')
       .setAttribute('disabled', 'disabled');
+
     // Load the theme dynamically
     let cssLoc = `/static/assets/css/themes/${theme}.min.css`;
     loadCss(theme, cssLoc);