Add sunset theme (#1528)

Resolves #1474
aeharding · Jul 10, 2024 · 30a0e18 · 30a0e18
1 parent a6a2e86
commit 30a0e18
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 37 deletions.
diff --git a/src/core/globalCssOverrides.ts b/src/core/globalCssOverrides.ts
@@ -41,7 +41,7 @@ export default css`
       }
     }
 
-    ion-list.list-inset ion-item {
+    ion-router-outlet ion-list.list-inset ion-item {
       --background: var(
         --ion-tab-bar-background,
         var(--ion-background-color-step-50, #fff)

diff --git a/src/core/theme/AppThemes.ts b/src/core/theme/AppThemes.ts
@@ -89,6 +89,21 @@ export function getTheme(appTheme: AppThemeType): Theme {
           primary: "#FF4500",
         },
       };
+    case "sunset":
+      return {
+        light: {
+          primary: "#FE6C09",
+          background: "#FFE2D0",
+          insetItemBackground: "#F1D8C7",
+          tabBarBackground: "#F1D8C7",
+        },
+        dark: {
+          primary: "#FE7C00",
+          background: "#000E29",
+          insetItemBackground: "#11213C",
+          tabBarBackground: "#000A1F",
+        },
+      };
   }
 }
 

diff --git a/src/core/theme/variables.ts b/src/core/theme/variables.ts
@@ -79,7 +79,7 @@ export const baseVariables = css`
 
       --ion-color-medium2: var(--ion-color-medium);
 
-      --lightroom-bg: #f2f3f7;
+      --lightroom-bg: rgba(0, 0, 0, 0.047);
 
       --thick-separator-color: var(--ion-background-color-step-50, #f2f2f7);
 
@@ -95,6 +95,31 @@ export const baseVariables = css`
       --share-img-drop-shadow: none;
 
       --ion-color-reddit-upvote: #ff5c01;
+
+      &.theme-has-custom-background {
+        &.ios body,
+        &.md body {
+          --ion-background-color: var(--app-background) !important;
+          --ion-item-background: var(--app-background);
+          --ion-background-color-step-50: var(--app-inset-item-background);
+          --ion-background-color-step-100: var(--app-tab-bar-background);
+          --ion-tab-bar-background: var(--app-tab-bar-background);
+          --ion-toolbar-background: var(--app-tab-bar-background);
+          --thick-separator-color: var(--app-inset-item-background);
+        }
+
+        ion-router-outlet ion-list.list-inset ion-item {
+          --background: var(--app-inset-item-background);
+        }
+
+        &.ios ion-modal:not(.transparent-scroll) {
+          --ion-background-color: var(--app-background);
+          --ion-toolbar-background: var(--app-tab-bar-background);
+          --ion-toolbar-border-color: var(--ion-background-color-step-150);
+
+          --ion-item-background: var(--ion-background-color);
+        }
+      }
     }
 
     .ios body {
@@ -103,7 +128,7 @@ export const baseVariables = css`
 
     .ios ion-modal {
       --ion-background-color: var(--ion-background-color-step-50, #f2f2f7);
-      --ion-item-background: #fff;
+      --ion-item-background: var(--app-background, #fff);
     }
 
     .ion-color-primary-fixed {
@@ -143,6 +168,12 @@ export const lightVariables = css`
             background: #fff;
           }
         }
+
+        &.theme-has-custom-background {
+          ion-router-outlet .grey-bg ion-list.list-inset ion-item {
+            --background: var(--app-background);
+          }
+        }
       }
     }
   }
@@ -265,7 +296,7 @@ export const darkVariables = css`
 
       // TODO test other themes
       ion-modal.transparent-scroll.dark {
-        --ion-background-color: black;
+        --ion-background-color: inherit;
       }
     }
   }
@@ -318,6 +349,16 @@ export const darkBlackModifierVariables = css`
           }
         }
 
+        &:not(.theme-has-custom-background) {
+          &.md {
+            body {
+              --ion-item-background: black;
+              --ion-toolbar-background: #121212;
+              --ion-tab-bar-background: #121212;
+            }
+          }
+        }
+
         &.md {
           body {
             --ion-background-color: black;
@@ -328,37 +369,10 @@ export const darkBlackModifierVariables = css`
 
             --ion-border-color: #222222;
 
-            --ion-item-background: black;
-
-            --ion-toolbar-background: #1f1f1f;
-
-            --ion-tab-bar-background: #1f1f1f;
-
             --ion-card-background: black;
-
-            --ion-toolbar-background: #121212;
-            --ion-tab-bar-background: #121212;
           }
         }
       }
-
-      &.theme-has-custom-background {
-        &.ios body,
-        &.md body {
-          --ion-background-color: var(--app-background);
-          --ion-item-background: var(--app-background);
-          --ion-background-color-step-50: var(--app-inset-item-background);
-          --ion-background-color-step-100: var(--app-tab-bar-background);
-          --ion-tab-bar-background: var(--app-tab-bar-background);
-          --ion-toolbar-background: var(--app-tab-bar-background);
-        }
-
-        &.ios ion-modal:not(.small, .transparent-scroll) {
-          --ion-background-color: var(--app-background);
-          --ion-toolbar-background: var(--app-tab-bar-background);
-          --ion-toolbar-border-color: var(--ion-background-color-step-150);
-        }
-      }
     }
   }
 `;
diff --git a/src/features/comment/CommentHeader.tsx b/src/features/comment/CommentHeader.tsx
@@ -52,7 +52,7 @@ const AmountCollapsed = styled.div`
   margin: -4px 0;
   border-radius: 16px;
   color: var(--ion-color-medium);
-  background: var(--ion-color-light);
+  background: var(--lightroom-bg);
 `;
 
 const DeletedLabel = styled.div`

diff --git a/src/features/comment/compose/reply/ItemReplyingTo.tsx b/src/features/comment/compose/reply/ItemReplyingTo.tsx
@@ -11,7 +11,7 @@ import { preventModalSwipeOnTextSelection } from "../../../../helpers/ionic";
 
 const Container = styled.div`
   padding: 16px;
-  background: var(--ion-color-light);
+  background: var(--lightroom-bg);
   font-size: 0.875em;
 
   a {

diff --git a/src/features/settings/appearance/themes/appTheme/AppTheme.tsx b/src/features/settings/appearance/themes/appTheme/AppTheme.tsx
@@ -91,6 +91,8 @@ function getThemeName(appTheme: AppThemeType): string {
       return "Dracula";
     case "tangerine":
       return "Tangerine";
+    case "sunset":
+      return "Sunset";
   }
 }
 
@@ -112,5 +114,7 @@ function getThemeDescription(appTheme: AppThemeType): string {
       return "Your Phone, Now Undeadly Cool";
     case "tangerine":
       return "Like oranges, but better!";
+    case "sunset":
+      return "Golden hour every hour";
   }
 }
diff --git a/src/features/shared/markdown/editing/Editor.tsx b/src/features/shared/markdown/editing/Editor.tsx
@@ -32,6 +32,10 @@ export const Container = styled.div<{ keyboardOpen: boolean }>`
 
   padding-bottom: ${TOOLBAR_HEIGHT};
 
+  html.ios:not(.ion-palette-dark) & {
+    background: var(--ion-item-background);
+  }
+
   @media screen and (max-width: 767px) {
     padding-bottom: ${({ keyboardOpen }) =>
       keyboardOpen
@@ -50,10 +54,6 @@ export const Textarea = styled(TextareaAutosizedForOnScreenKeyboard)`
   min-height: 200px;
 
   flex: 1 0 auto;
-
-  html.ios:not(.ion-palette-dark) & {
-    background: var(--ion-item-background);
-  }
 `;
 
 export interface EditorProps {

diff --git a/src/services/db.ts b/src/services/db.ts
@@ -28,6 +28,7 @@ export const OAppThemeType = {
   Mint: "mint",
   Dracula: "dracula",
   Tangerine: "tangerine",
+  Sunset: "sunset",
 } as const;
 
 export type AppThemeType = (typeof OAppThemeType)[keyof typeof OAppThemeType];