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

diff --git a/src/shared/components/app/theme.tsx b/src/shared/components/app/theme.tsx
index 941eea2c137e4bbe2919a7f4239fe090291f9069..93f6aed34dffe4d545920318d5560ccfff4a1c91 100644 (file)
--- a/src/shared/components/app/theme.tsx
+++ b/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>

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

diff --git a/src/shared/components/person/settings.tsx b/src/shared/components/person/settings.tsx
index 4caef458bbe84600baa0906672b36867bb92ca09..905469aefc7bd9e95e1c2ab076fc70ebf7b9179f 100644 (file)
--- a/src/shared/components/person/settings.tsx
+++ b/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}