address review comments

diff --git a/src/shared/components/app/app.tsx b/src/shared/components/app/app.tsx
index 52e47a1d53e413c95510a23d4aa3ef0e6cc3519d..67816f6c8928ded8b046cd0837e27798e9fd18f3 100644 (file)
--- 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 e048046c63473847d27cdcec7d5adcc883c9633d..79d65676a1bb0751b341cf58d9118d3fb5a8c11d 100644 (file)
--- 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 d37d7129e4f7df2bb1917d95a62dddbecb1478e0..09bf66ec59629939d9b8a21d964a0596ab4ef663 100644 (file)
--- 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")}