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

[lemmy-ui.git] / src / shared / components / home / site-form.tsx

diff --git a/src/shared/components/home/site-form.tsx b/src/shared/components/home/site-form.tsx
index ba1ce3800594465cd191b651131efd76c2420d6c..d37d7129e4f7df2bb1917d95a62dddbecb1478e0 100644 (file)
--- a/src/shared/components/home/site-form.tsx
+++ b/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();
   }