Add theme option for compact that respects browser default (#1870)

src/shared/components/app/theme.tsx

@@ -21,7 +21,10 @@ export class Theme extends Component<Props> {
           />
         </Helmet>
       );
-    } else if (this.props.defaultTheme != "browser") {
+    } else if (
+      this.props.defaultTheme != "browser" &&
+      this.props.defaultTheme != "browser-compact"
+    ) {
       return (
         <Helmet>
           <link
@@ -31,6 +34,25 @@ export class Theme extends Component<Props> {
           />
         </Helmet>
       );
+    } else if (this.props.defaultTheme == "browser-compact") {
+      return (
+        <Helmet>
+          <link
+            rel="stylesheet"
+            type="text/css"
+            href="/css/themes/litely-compact.css"
+            id="default-light"
+            media="(prefers-color-scheme: light)"
+          />
+          <link
+            rel="stylesheet"
+            type="text/css"
+            href="/css/themes/darkly-compact.css"
+            id="default-dark"
+            media="(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)"
+          />
+        </Helmet>
+      );
     } else {
       return (
         <Helmet>

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

@@ -411,6 +411,9 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
               <option value="browser">
                 {I18NextService.i18n.t("browser_default")}
               </option>
+              <option value="browser-compact">
+                {I18NextService.i18n.t("browser_default_compact")}
+              </option>
               {this.props.themeList?.map(theme => (
                 <option key={theme} value={theme}>
                   {theme}

src/shared/components/person/settings.tsx

@@ -596,6 +596,9 @@ export class Settings extends Component<any, SettingsState> {
                 <option value="browser">
                   {I18NextService.i18n.t("browser_default")}
                 </option>
+                <option value="browser-compact">
+                  {I18NextService.i18n.t("browser_default_compact")}
+                </option>
                 <option disabled aria-hidden="true">
                   ──
                 </option>
@@ -635,6 +638,9 @@ export class Settings extends Component<any, SettingsState> {
                 <option value="browser">
                   {I18NextService.i18n.t("browser_default")}
                 </option>
+                <option value="browser-compact">
+                  {I18NextService.i18n.t("browser_default_compact")}
+                </option>
                 {this.state.themeList.map(theme => (
                   <option key={theme} value={theme}>
                     {theme}