address review comments

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 && (

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";
 
+    if (hasTheme) {
       return (
         <Helmet>
-        {hasTheme ? (
           <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>
+      );
+    } 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>
       );
     }
+  }
 }

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")}