From 30a0e18a91d2e08e4df223755dfa5ce87cce77df Mon Sep 17 00:00:00 2001 From: Alexander Harding <2166114+aeharding@users.noreply.github.com> Date: Tue, 9 Jul 2024 21:39:10 -0500 Subject: [PATCH] Add sunset theme (#1528) Resolves #1474 --- src/core/globalCssOverrides.ts | 2 +- src/core/theme/AppThemes.ts | 15 ++++ src/core/theme/variables.ts | 74 +++++++++++-------- src/features/comment/CommentHeader.tsx | 2 +- .../comment/compose/reply/ItemReplyingTo.tsx | 2 +- .../appearance/themes/appTheme/AppTheme.tsx | 4 + .../shared/markdown/editing/Editor.tsx | 8 +- src/services/db.ts | 1 + 8 files changed, 71 insertions(+), 37 deletions(-) diff --git a/src/core/globalCssOverrides.ts b/src/core/globalCssOverrides.ts index a4db5d4dca..534bd4cf83 100644 --- 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 index fe41c7f835..28ecc12d2a 100644 --- 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 index 9effe6c269..6351f778e1 100644 --- 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 index 41d5ac883a..b09b1c8905 100644 --- 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 index 19c3a09604..656bd88d1c 100644 --- 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 index e60ee99f30..19c3b41b40 100644 --- 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 index 2b21b4c7f0..c7720ce2ed 100644 --- 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 index 09e9b5e857..b47f3b7abf 100644 --- 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];