From 89509cde5e6be374e8888cd28fb269a030ff4280 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Fri, 1 Dec 2023 15:16:54 +0800 Subject: [PATCH] style(glow-effect): add darkmode colors --- .../DashboardThread/Layout/AvatarLayout.tsx | 3 +- .../DashboardThread/Layout/BannerLayout.tsx | 3 +- .../DashboardThread/Layout/GlowEffect.tsx | 13 +- .../DashboardThread/Layout/TagLayout.tsx | 3 +- .../thread/DashboardThread/store/Models.ts | 1 - .../styles/layout/glow_effect.ts | 14 +- .../DashboardThread/styles/layout/index.ts | 6 +- src/spec/index.ts | 3 +- src/widgets/GlobalLayout/GlowBackground.tsx | 3 + .../GlobalLayout/styles/glow_background.ts | 10 +- utils/constant/glow_effect.ts | 141 +++++++++++++++++- 11 files changed, 175 insertions(+), 25 deletions(-) diff --git a/src/containers/thread/DashboardThread/Layout/AvatarLayout.tsx b/src/containers/thread/DashboardThread/Layout/AvatarLayout.tsx index 82e2373ea..add302e35 100644 --- a/src/containers/thread/DashboardThread/Layout/AvatarLayout.tsx +++ b/src/containers/thread/DashboardThread/Layout/AvatarLayout.tsx @@ -101,7 +101,8 @@ const AvatarLayout: FC = ({ layout, isTouched, saving }) => { isTouched={isTouched} field={SETTING_FIELD.AVATAR_LAYOUT} loading={saving} - width="80%" + width="580px" + left={-5} top={25} /> diff --git a/src/containers/thread/DashboardThread/Layout/BannerLayout.tsx b/src/containers/thread/DashboardThread/Layout/BannerLayout.tsx index 03f60d118..cface23da 100644 --- a/src/containers/thread/DashboardThread/Layout/BannerLayout.tsx +++ b/src/containers/thread/DashboardThread/Layout/BannerLayout.tsx @@ -237,7 +237,8 @@ const BannerLayout: FC = ({ layout, isTouched, saving }) => { isTouched={isTouched} field={SETTING_FIELD.BANNER_LAYOUT} loading={saving} - width="88%" + width="632px" + left={-5} top={20} /> diff --git a/src/containers/thread/DashboardThread/Layout/GlowEffect.tsx b/src/containers/thread/DashboardThread/Layout/GlowEffect.tsx index eaef4292c..988972bd4 100644 --- a/src/containers/thread/DashboardThread/Layout/GlowEffect.tsx +++ b/src/containers/thread/DashboardThread/Layout/GlowEffect.tsx @@ -1,9 +1,9 @@ import { FC } from 'react' import { observer } from 'mobx-react-lite' -import { keys } from 'ramda' -import GLOW_EFFECTS, { GLOW_OPACITY } from '@/constant/glow_effect' +import { GLOW_OPACITY, GLOW_EFFECTS_KEYS } from '@/constant/glow_effect' import usePrimaryColor from '@/hooks/usePrimaryColor' +import useTheme from '@/hooks/useTheme' import { Br, Row as RowBase } from '@/widgets/Common' import ArrowLinker from '@/widgets/ArrowLinker' @@ -47,7 +47,7 @@ const GlowEffect: FC = ({ saving, }) => { const primaryColor = usePrimaryColor() - const EFFECTS_KEYS = keys(GLOW_EFFECTS) + const { curTheme } = useTheme() return ( @@ -69,14 +69,14 @@ const GlowEffect: FC = ({ - {EFFECTS_KEYS.map((effect) => ( + {GLOW_EFFECTS_KEYS.map((effect) => ( edit(effect, 'glowType')} > - + ))} @@ -85,8 +85,9 @@ const GlowEffect: FC = ({ isTouched={isTouched} field={SETTING_FIELD.GLOW_TYPE} loading={saving} + left={-5} top={35} - width="87%" + width="628px" />
diff --git a/src/containers/thread/DashboardThread/Layout/TagLayout.tsx b/src/containers/thread/DashboardThread/Layout/TagLayout.tsx index 847f79096..c2fe9f0de 100644 --- a/src/containers/thread/DashboardThread/Layout/TagLayout.tsx +++ b/src/containers/thread/DashboardThread/Layout/TagLayout.tsx @@ -82,7 +82,8 @@ const TagLayout: FC = ({ layout, isTouched, saving }) => { isTouched={isTouched} field={SETTING_FIELD.TAG_LAYOUT} loading={saving} - width="80%" + left={-5} + width="580px" top={25} /> diff --git a/src/containers/thread/DashboardThread/store/Models.ts b/src/containers/thread/DashboardThread/store/Models.ts index e3368770b..252c0f72a 100644 --- a/src/containers/thread/DashboardThread/store/Models.ts +++ b/src/containers/thread/DashboardThread/store/Models.ts @@ -169,7 +169,6 @@ export const settingsModalFields = { docCategories: T.opt(T.array(GroupCategory), []), // glow effect - // glowType: T.opt(T.string, keys(GLOW_EFFECTS)[0]), glowType: T.opt(T.string, ''), glowFixed: T.opt(T.bool, true), glowOpacity: T.opt(T.enum(values(GLOW_OPACITY)), GLOW_OPACITY.NORMAL), diff --git a/src/containers/thread/DashboardThread/styles/layout/glow_effect.ts b/src/containers/thread/DashboardThread/styles/layout/glow_effect.ts index 33cfe4c52..42002563f 100644 --- a/src/containers/thread/DashboardThread/styles/layout/glow_effect.ts +++ b/src/containers/thread/DashboardThread/styles/layout/glow_effect.ts @@ -1,7 +1,8 @@ import styled from 'styled-components' import type { TActive, TColor, TGlowEffect } from '@/spec' -import GLOW_EFFECTS from '@/constant/glow_effect' +import { GLOW_EFFECTS_DAY, GLOW_EFFECTS_NIGHT } from '@/constant/glow_effect' +import THEME from '@/constant/theme' import css, { theme, rainbow } from '@/css' @@ -31,7 +32,8 @@ export const Box = styled.div` border: 1px solid; z-index: 1; - border-color: ${({ $active, $color }) => ($active ? rainbow($color) : theme('divider'))}; + border-color: ${({ $active, $color }) => + $active ? rainbow($color, 'article.digest') : theme('divider')}; box-shadow: ${({ $active }) => ($active ? css.cardShadow : 'none')}; background: ${theme('alphaBg')}; @@ -71,12 +73,16 @@ export const SettingsRow = styled.div` export const GrowBackground = styled('div').withConfig({ shouldForwardProp: (props) => props !== 'glowType' && props !== 'glowPosition', })` - background: ${({ glowType }) => ` + background: ${({ glowType, $curTheme }) => { + const GLOW_EFFECTS = $curTheme === THEME.DAY ? GLOW_EFFECTS_DAY : GLOW_EFFECTS_NIGHT + + return ` radial-gradient(circle at ${GLOW_EFFECTS[glowType].LEFT.X} ${GLOW_EFFECTS[glowType].LEFT.Y}, ${GLOW_EFFECTS[glowType].LEFT.COLOR} 0, transparent ${GLOW_EFFECTS[glowType].LEFT.RADIUS}), radial-gradient(circle at ${GLOW_EFFECTS[glowType].RIGHT1.X} ${GLOW_EFFECTS[glowType].RIGHT1.Y}, ${GLOW_EFFECTS[glowType].RIGHT1.COLOR} 0, transparent ${GLOW_EFFECTS[glowType].RIGHT1.RADIUS}), radial-gradient(circle at ${GLOW_EFFECTS[glowType].MAIN.X} ${GLOW_EFFECTS[glowType].MAIN.Y}, ${GLOW_EFFECTS[glowType].MAIN.COLOR} 0, transparent ${GLOW_EFFECTS[glowType].MAIN.RADIUS}), radial-gradient(circle at ${GLOW_EFFECTS[glowType].RIGHT2.X} ${GLOW_EFFECTS[glowType].RIGHT2.Y}, ${GLOW_EFFECTS[glowType].RIGHT2.COLOR} 0, transparent ${GLOW_EFFECTS[glowType].RIGHT1.RADIUS}); - `}; + ` + }}; filter: saturate(1.2); inset: 0; diff --git a/src/containers/thread/DashboardThread/styles/layout/index.ts b/src/containers/thread/DashboardThread/styles/layout/index.ts index f075b82f2..ac93292e2 100644 --- a/src/containers/thread/DashboardThread/styles/layout/index.ts +++ b/src/containers/thread/DashboardThread/styles/layout/index.ts @@ -11,7 +11,6 @@ export const Wrapper = styled.div` padding: 20px; `}; ` - export const Banner = styled.div` height: 70px; width: 100%; @@ -35,10 +34,7 @@ export const TabsWrapper = styled.div` `}; ` export const BaseSection = styled.section` - /* margin: 0 50px; */ padding-bottom: 30px; - /* border-bottom: 1px solid; - border-bottom-color: ${theme('divider')}; */ ` export const TitleBase = styled.div` color: ${theme('article.title')}; @@ -55,7 +51,7 @@ export const BlockBase = styled.div` border: 1px solid; border-radius: 7px; - border-color: ${({ $active, $color }) => ($active ? rainbow($color) : theme('primary'))}; + border-color: ${({ $active, $color }) => ($active ? rainbow($color, 'hint') : theme('primary'))}; padding: 16px 15px; &:hover { diff --git a/src/spec/index.ts b/src/spec/index.ts index a463656b6..e00426b04 100755 --- a/src/spec/index.ts +++ b/src/spec/index.ts @@ -1,9 +1,9 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable import/no-unresolved */ /* eslint-disable import/extensions */ - import type { TRootStore as RootStoreType } from '@/stores/RootStore' +import type { TThemeName } from './theme' import type { TArticle } from './article' import type { TCommunity } from './community' @@ -216,6 +216,7 @@ export type TGlowEffect = { glowPosition?: TGlowPosition glowFixed?: boolean glowOpacity?: string + $curTheme?: TThemeName } interface IWindow extends Window { diff --git a/src/widgets/GlobalLayout/GlowBackground.tsx b/src/widgets/GlobalLayout/GlowBackground.tsx index b240e6047..7853a2dad 100644 --- a/src/widgets/GlobalLayout/GlowBackground.tsx +++ b/src/widgets/GlobalLayout/GlowBackground.tsx @@ -4,6 +4,7 @@ import type { TMetric, TGlowPosition } from '@/spec' import useGlow from '@/hooks/useGlow' import useMetric from '@/hooks/useMetric' +import useTheme from '@/hooks/useTheme' import METRIC from '@/constant/metric' @@ -19,6 +20,7 @@ const getGlowPosition = (metric: TMetric, glowFixed: boolean): TGlowPosition => const GlowBackground: FC = () => { const metric = useMetric() + const { curTheme } = useTheme() const { glowType, glowFixed, glowOpacity } = useGlow() if (!glowType) return null @@ -28,6 +30,7 @@ const GlowBackground: FC = () => { glowType={glowType} glowPosition={getGlowPosition(metric, glowFixed)} glowOpacity={glowOpacity} + $curTheme={curTheme} /> ) } diff --git a/src/widgets/GlobalLayout/styles/glow_background.ts b/src/widgets/GlobalLayout/styles/glow_background.ts index b1967f79f..35b3be22e 100644 --- a/src/widgets/GlobalLayout/styles/glow_background.ts +++ b/src/widgets/GlobalLayout/styles/glow_background.ts @@ -1,18 +1,22 @@ import styled from 'styled-components' import type { TGlowEffect } from '@/spec' -import GLOW_EFFECTS from '@/constant/glow_effect' +import { GLOW_EFFECTS_DAY, GLOW_EFFECTS_NIGHT } from '@/constant/glow_effect' +import THEME from '@/constant/theme' export const Wrapper = styled('div').withConfig({ shouldForwardProp: (props) => props !== 'glowType' && props !== 'glowPosition' && props !== 'glowOpacity', })` - background: ${({ glowType }) => ` + background: ${({ glowType, $curTheme }) => { + const GLOW_EFFECTS = $curTheme === THEME.DAY ? GLOW_EFFECTS_DAY : GLOW_EFFECTS_NIGHT + return ` radial-gradient(circle at ${GLOW_EFFECTS[glowType].LEFT.X} ${GLOW_EFFECTS[glowType].LEFT.Y}, ${GLOW_EFFECTS[glowType].LEFT.COLOR} 0, transparent ${GLOW_EFFECTS[glowType].LEFT.RADIUS}), radial-gradient(circle at ${GLOW_EFFECTS[glowType].RIGHT1.X} ${GLOW_EFFECTS[glowType].RIGHT1.Y}, ${GLOW_EFFECTS[glowType].RIGHT1.COLOR} 0, transparent ${GLOW_EFFECTS[glowType].RIGHT1.RADIUS}), radial-gradient(circle at ${GLOW_EFFECTS[glowType].MAIN.X} ${GLOW_EFFECTS[glowType].MAIN.Y}, ${GLOW_EFFECTS[glowType].MAIN.COLOR} 0, transparent ${GLOW_EFFECTS[glowType].MAIN.RADIUS}), radial-gradient(circle at ${GLOW_EFFECTS[glowType].RIGHT2.X} ${GLOW_EFFECTS[glowType].RIGHT2.Y}, ${GLOW_EFFECTS[glowType].RIGHT2.COLOR} 0, transparent ${GLOW_EFFECTS[glowType].RIGHT1.RADIUS}); - `}; + ` + }}; filter: saturate(1.2); diff --git a/utils/constant/glow_effect.ts b/utils/constant/glow_effect.ts index 9d948a9cd..0fecee7ee 100644 --- a/utils/constant/glow_effect.ts +++ b/utils/constant/glow_effect.ts @@ -1,3 +1,5 @@ +import { keys } from 'ramda' + export const GLOW_OPACITY = { NORMAL: '1', WEEK: '0.68', @@ -11,7 +13,7 @@ export const GLOW_EFFECT_NAME = { PURPLE_BLUE: 'PURPLE_BLUE', } -const GLOW_EFFECTS = { +export const GLOW_EFFECTS_DAY = { ORANGE_PURPLE: { LEFT: { COLOR: '#f39e8d26', @@ -146,4 +148,139 @@ const GLOW_EFFECTS = { }, } -export default GLOW_EFFECTS +export const GLOW_EFFECTS_NIGHT = { + ORANGE_PURPLE: { + LEFT: { + COLOR: '#f39e8d26', + X: '25%', + Y: '-16%', + RADIUS: '30%', + }, + RIGHT1: { + COLOR: '#ffeba824', + X: '100%', + Y: '0', + RADIUS: '40%', + }, + MAIN: { + COLOR: '#4e4bd212', + X: '78%', + Y: '4%', + RADIUS: '40%', + }, + RIGHT2: { + COLOR: '#961fb314', + X: '90%', + Y: '15%', + RADIUS: '30%', + }, + }, + GREY_BROWN: { + LEFT: { + COLOR: '#5f564c8a', + X: '20%', + Y: '-16%', + RADIUS: '30%', + }, + RIGHT1: { + COLOR: '#d4003f03', + X: '100%', + Y: '0', + RADIUS: '40%', + }, + + MAIN: { + COLOR: '#ff980012', + X: '72%', + Y: '4%', + RADIUS: '40%', + }, + RIGHT2: { + COLOR: '#f6c49f1c', + X: '80%', + Y: '18%', + RADIUS: '30%', + }, + }, + YELLOW_RED: { + LEFT: { + COLOR: '#ffc43b2b', + X: '20%', + Y: '-16%', + RADIUS: '30%', + }, + RIGHT1: { + COLOR: '#d4003f03', + X: '100%', + Y: '0', + RADIUS: '40%', + }, + + MAIN: { + COLOR: '#f4433621', + X: '78%', + Y: '4%', + RADIUS: '40%', + }, + RIGHT2: { + COLOR: '#ff98000a', + X: '90%', + Y: '15%', + RADIUS: '30%', + }, + }, + GREY_GREEN: { + LEFT: { + COLOR: '#444b428a', + X: '30%', + Y: '-16%', + RADIUS: '30%', + }, + RIGHT1: { + COLOR: '#30381fa6', + X: '100%', + Y: '0', + RADIUS: '40%', + }, + MAIN: { + COLOR: '#2e3323a6', + X: '78%', + Y: '4%', + RADIUS: '40%', + }, + RIGHT2: { + COLOR: '#363c2978', + X: '90%', + Y: '15%', + RADIUS: '30%', + }, + }, + PURPLE_BLUE: { + LEFT: { + COLOR: '#323d498f', + X: '28%', + Y: '-8%', + RADIUS: '26%', + }, + RIGHT1: { + COLOR: '#2b36489e', + X: '100%', + Y: '0', + RADIUS: '40%', + }, + MAIN: { + COLOR: '#12283c59', + X: '70%', + Y: '4%', + RADIUS: '35%', + }, + RIGHT2: { + COLOR: '#0e2b4670', + X: '85%', + Y: '15%', + RADIUS: '30%', + }, + }, +} + +export const GLOW_EFFECTS_KEYS = keys(GLOW_EFFECTS_DAY)