Add option to set site default theme (fixes #559)

package.json

@@ -74,7 +74,7 @@
     "eslint-plugin-prettier": "^4.0.0",
     "husky": "^7.0.4",
     "import-sort-style-module": "^6.0.0",
-    "lemmy-js-client": "0.15.1-rc.1",
+    "lemmy-js-client": "0.15.4-rc.2",
     "lint-staged": "^12.1.2",
     "mini-css-extract-plugin": "^2.4.5",
     "node-fetch": "^2.6.1",

src/shared/components/app/app.tsx

@@ -26,7 +26,7 @@ export class App extends Component<AppProps, any> {
       <>
         <Provider i18next={i18n}>
           <div>
-            <Theme myUserInfo={siteRes.my_user} />
+            <Theme myUserInfo={siteRes.my_user} site={siteRes.site_view.site} />
             {siteRes &&
               siteRes.site_view &&
               this.props.siteRes.site_view.site.icon && (

src/shared/components/app/theme.tsx

@@ -1,9 +1,10 @@
 import { Component } from "inferno";
 import { Helmet } from "inferno-helmet";
-import { MyUserInfo } from "lemmy-js-client";
+import { MyUserInfo, Site } from "lemmy-js-client";
 
 interface Props {
   myUserInfo: MyUserInfo | undefined;
+  site: Site;
 }
 
 export class Theme extends Component<Props> {
@@ -20,22 +21,11 @@ export class Theme extends Component<Props> {
             href={`/static/assets/css/themes/${user.local_user_view.local_user.theme}.min.css`}
           />
         ) : (
-          [
           <link
             rel="stylesheet"
             type="text/css"
-              href="/static/assets/css/themes/litely.min.css"
+            href={`/static/assets/css/themes/${this.props.site.default_theme}.min.css`}
-              id="default-light"
+          />
-              media="(prefers-color-scheme: light)"
-            />,
-            <link
-              rel="stylesheet"
-              type="text/css"
-              href="/static/assets/css/themes/darkly.min.css"
-              id="default-dark"
-              media="(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)"
-            />,
-          ]
         )}
       </Helmet>
     );

src/shared/components/home/site-form.tsx

@@ -3,7 +3,12 @@ import { Prompt } from "inferno-router";
 import { CreateSite, EditSite, Site } from "lemmy-js-client";
 import { i18n } from "../../i18next";
 import { WebSocketService } from "../../services";
-import { authField, capitalizeFirstLetter, wsClient } from "../../utils";
+import {
+  authField,
+  capitalizeFirstLetter,
+  themes,
+  wsClient,
+} from "../../utils";
 import { Spinner } from "../common/icon";
 import { ImageUploadForm } from "../common/image-upload-form";
 import { MarkdownTextArea } from "../common/markdown-textarea";
@@ -31,6 +36,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
       require_application: null,
       application_question: null,
       private_instance: null,
+      default_theme: null,
       auth: authField(),
     },
     loading: false,
@@ -66,6 +72,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
         require_application: site.require_application,
         application_question: site.application_question,
         private_instance: site.private_instance,
+        default_theme: site.default_theme,
         auth: authField(),
       };
     }
@@ -314,6 +321,27 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
               </div>
             </div>
           </div>
+          <div class="form-group row">
+            <div class="col-12">
+              <label
+                class="form-check-label"
+                htmlFor="create-site-default-theme"
+              >
+                {i18n.t("theme")}
+              </label>
+              <select
+                id="create-site-default-theme"
+                value={this.state.siteForm.default_theme}
+                onChange={linkEvent(this, this.handleSiteDefaultTheme)}
+                class="custom-select w-auto"
+              >
+                <option value="browser">{i18n.t("browser_default")}</option>
+                {themes.map(theme => (
+                  <option value={theme}>{theme}</option>
+                ))}
+              </select>
+            </div>
+          </div>
           <div class="form-group row">
             <div class="col-12">
               <div class="form-check">
@@ -321,7 +349,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
                   class="form-check-input"
                   id="create-site-private-instance"
                   type="checkbox"
-                  checked={this.state.siteForm.private_instance}
+                  value={this.state.siteForm.default_theme}
                   onChange={linkEvent(this, this.handleSitePrivateInstance)}
                 />
                 <label
@@ -434,6 +462,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
     i.setState(i.state);
   }
 
+  handleSiteDefaultTheme(i: SiteForm, event: any) {
+    i.state.siteForm.default_theme = event.target.value;
+    i.setState(i.state);
+  }
+
   handleCancel(i: SiteForm) {
     i.props.onCancel();
   }

yarn.lock

@@ -4624,10 +4624,10 @@ lcid@^1.0.0:
   dependencies:
     invert-kv "^1.0.0"
 
-lemmy-js-client@0.15.1-rc.1:
+lemmy-js-client@0.15.4-rc.2:
-  version "0.15.1-rc.1"
+  version "0.15.4-rc.2"
-  resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.15.1-rc.1.tgz#9d914098eefc25834f077c4690d4e3e2ab4f2c57"
+  resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.15.4-rc.2.tgz#cee9115cc8ada3a6f480b595d797b474b9d051cc"
-  integrity sha512-rs80HTzwayt2EpjQ+ruQM82bZydjk9kZUUjZidYzwmy1FBkWpG5+OBnW3X6YQ5ebswiobL8HraNfnWMm0zqvjQ==
+  integrity sha512-+plQKqczw0mpnNYSfXRlM3ODH00b7jfH5hpaJAYMmQ0eaXHhKOoWqR8rpl3xXr3alkkhqQQ+lQPnMQO2ghe+WQ==
 
 levn@^0.4.1:
   version "0.4.1"