Adding a browser default theme option. Fixes #35

diff --git a/src/server/index.tsx b/src/server/index.tsx
index e7278d6b98c649d19846a4b395a27ec3c415b8f6..ef6ce08dad564b51e40a53185b853790b5cc3455 100644 (file)
--- a/src/server/index.tsx
+++ b/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>
 `);

diff --git a/src/shared/components/user.tsx b/src/shared/components/user.tsx
index 665b035ceb60af8482974671ef7eee242c888748..109e71c9802bf0376cbdbc172435658af0d64ebe 100644 (file)
--- a/src/shared/components/user.tsx
+++ b/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 =

diff --git a/src/shared/utils.ts b/src/shared/utils.ts
index 775be287c26839567c8ca14df6f9a96e625adca3..b5d7dd0ac1446c6c1739753bf3e6a1812b98085b 100644 (file)
--- a/src/shared/utils.ts
+++ b/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);