From: Dessalines <tyhou13@gmx.com>
Date: Thu, 24 Sep 2020 22:03:03 +0000 (-0500)
Subject: Adding a browser default theme option. Fixes #35
X-Git-Url: http://these/git/%7B%60%24%7BwebArchiveUrl%7D/%22%7B%7D/readmes/%7B%7D/%7Bthis.props.src%7D?a=commitdiff_plain;h=4ef7b10116d5165e3b4568d8185bc608f900aeb5;p=lemmy-ui.git

Adding a browser default theme option. Fixes #35
---

diff --git a/src/server/index.tsx b/src/server/index.tsx
index e7278d6..ef6ce08 100644
--- 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 665b035..109e71c 100644
--- 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 775be28..b5d7dd0 100644
--- 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);