From c394ddcbad476b84540f690fd759fc39ae8ceeac Mon Sep 17 00:00:00 2001
From: Felix Ableitner <me@nutomic.com>
Date: Tue, 1 Mar 2022 14:47:52 +0100
Subject: [PATCH] address review comments

---
 src/shared/components/app/app.tsx        |  5 ++-
 src/shared/components/app/theme.tsx      | 46 ++++++++++++++++++------
 src/shared/components/home/site-form.tsx |  2 +-
 3 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/src/shared/components/app/app.tsx b/src/shared/components/app/app.tsx
index 52e47a1d..67816f6c 100644
--- a/src/shared/components/app/app.tsx
+++ b/src/shared/components/app/app.tsx
@@ -26,7 +26,10 @@ export class App extends Component<AppProps, any> {
       <>
         <Provider i18next={i18n}>
           <div>
-            <Theme myUserInfo={siteRes.my_user} site={siteRes.site_view.site} />
+            <Theme
+              myUserInfo={siteRes.my_user}
+              defaultTheme={siteRes.site_view.site.default_theme}
+            />
             {siteRes &&
               siteRes.site_view &&
               this.props.siteRes.site_view.site.icon && (
diff --git a/src/shared/components/app/theme.tsx b/src/shared/components/app/theme.tsx
index e048046c..79d65676 100644
--- a/src/shared/components/app/theme.tsx
+++ b/src/shared/components/app/theme.tsx
@@ -1,10 +1,10 @@
 import { Component } from "inferno";
 import { Helmet } from "inferno-helmet";
-import { MyUserInfo, Site } from "lemmy-js-client";
+import { MyUserInfo } from "lemmy-js-client";
 
 interface Props {
   myUserInfo: MyUserInfo | undefined;
-  site: Site;
+  defaultTheme: string;
 }
 
 export class Theme extends Component<Props> {
@@ -12,22 +12,48 @@ export class Theme extends Component<Props> {
     let user = this.props.myUserInfo;
     let hasTheme = user && user.local_user_view.local_user.theme !== "browser";
 
-    return (
-      <Helmet>
-        {hasTheme ? (
+    if (hasTheme) {
+      return (
+        <Helmet>
           <link
             rel="stylesheet"
             type="text/css"
             href={`/static/assets/css/themes/${user.local_user_view.local_user.theme}.min.css`}
           />
-        ) : (
+        </Helmet>
+      );
+    } else if (this.props.defaultTheme != "browser") {
+      return (
+        <Helmet>
           <link
             rel="stylesheet"
             type="text/css"
-            href={`/static/assets/css/themes/${this.props.site.default_theme}.min.css`}
+            href={`/static/assets/css/themes/${this.props.defaultTheme}.min.css`}
           />
-        )}
-      </Helmet>
-    );
+        </Helmet>
+      );
+    } else {
+      return (
+        <Helmet>
+          [
+          <link
+            rel="stylesheet"
+            type="text/css"
+            href="/static/assets/css/themes/litely.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>
+      );
+    }
   }
 }
diff --git a/src/shared/components/home/site-form.tsx b/src/shared/components/home/site-form.tsx
index d37d7129..09bf66ec 100644
--- a/src/shared/components/home/site-form.tsx
+++ b/src/shared/components/home/site-form.tsx
@@ -324,7 +324,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
           <div class="form-group row">
             <div class="col-12">
               <label
-                class="form-check-label"
+                class="form-check-label mr-2"
                 htmlFor="create-site-default-theme"
               >
                 {i18n.t("theme")}