feat(theme): dark mode (#147)

* refactor(theme): add types to theme key

* refactor(theme): add types to theme key

* refactor(theme): clean up

* refactor(theme): adjust

* refactor(theme): wip

* refactor(theme): wip

* refactor(theme): wip

* refactor(theme): wip

* refactor(theme): wip

* refactor(theme): enhance useTheme

config/config.json

@@ -1,6 +1,6 @@
 {
   "//--- general configs ---//": "",
-  "DEFAULT_THEME": "github",
+  "DEFAULT_THEME": "day",
   "SENIOR_AMOUNT_THRESHOLD": 51.2,
   "SPONSOR_AMOUNT_THRESHOLD": 3999,
   "PAGE_SIZE": {

src/containers/content/LandingPage/styles/feature_wall/card.ts

@@ -1,8 +1,7 @@
 import styled from 'styled-components'
 
 import type { TColorName } from '@/spec'
-import css, { theme } from '@/css'
-import { camelize } from '@/fmt'
+import css, { theme, baseColorBgTheme } from '@/css'
 
 import Img from '@/Img'
 
@@ -29,8 +28,8 @@ export const Avatar = styled(Img)<{ color: TColorName }>`
   border: 2px solid;
   padding: 2px;
   border-color: gold;
-  border-color: ${({ color }) => theme(`baseColor.${camelize(color)}Bg`)};
-  background-color: ${({ color }) => theme(`baseColor.${camelize(color)}Bg`)};
+  border-color: ${({ color }) => baseColorBgTheme(color)};
+  background-color: ${({ color }) => baseColorBgTheme(color)};
 `
 
 export const User = styled.div``

src/containers/content/LandingPage/styles/feature_wall/user_voice.ts

@@ -1,10 +1,7 @@
 import styled from 'styled-components'
 
 import type { TTestable, TColorName } from '@/spec'
-
-import css, { theme } from '@/css'
-import { camelize } from '@/fmt'
-
+import css, { theme, baseColorTheme, baseColorBgTheme } from '@/css'
 import TreesSVG from '@/icons/Trees'
 
 export const Wrapper = styled.div.attrs<TTestable>(({ testid }) => ({
@@ -47,7 +44,7 @@ export const TreeWrapper = styled.div`
 export const TreesIcon = styled(TreesSVG)`
   height: 240px;
   width: 700px;
-  fill: ${theme('artivle.digest')};
+  fill: ${theme('article.digest')};
 
   ${css.media.mobile`
     width: 100%;
@@ -75,12 +72,9 @@ export const Avatar = styled.div<{ color: TColorName }>`
   ${css.circle(30)};
   ${css.row('align-both')};
   padding: 2px;
-  color: ${({ color }) => theme(`baseColor.${camelize(color)}`)};
+  color: ${({ color }) => baseColorTheme(color)};
   font-size: 12px;
-
-  /* border: 2px solid; */
-  /* border-color: ${({ color }) => theme(`baseColor.${camelize(color)}Bg`)}; */
-  background-color: ${({ color }) => theme(`baseColor.${color.toLowerCase()}Bg`)};
+  background-color: ${({ color }) => baseColorBgTheme(color)};
 
   ${css.media.mobile`
     ${css.circle(20)};

src/containers/content/LandingPage/styles/users_wall/card.ts

@@ -2,9 +2,7 @@ import styled from 'styled-components'
 
 import type { TColorName } from '@/spec'
 
-import css, { theme } from '@/css'
-import { camelize } from '@/fmt'
-
+import css, { theme, baseColorBgTheme } from '@/css'
 import Img from '@/Img'
 
 export const Wrapper = styled.div`
@@ -35,8 +33,8 @@ export const Avatar = styled(Img)<{ color: TColorName }>`
   ${css.circle(30)};
   border: 2px solid;
   padding: 2px;
-  border-color: ${({ color }) => theme(`baseColor.${camelize(color)}Bg`)};
-  background-color: ${({ color }) => theme(`baseColor.${color.toLowerCase()}Bg`)};
+  border-color: ${({ color }) => baseColorBgTheme(color)};
+  background-color: ${({ color }) => baseColorBgTheme(color)};
 
   ${css.media.mobile`
     ${css.circle(25)};

src/containers/content/LandingPage/styles/users_wall/index.ts

@@ -2,7 +2,7 @@ import styled from 'styled-components'
 
 import type { TColorName, TTestable } from '@/spec'
 
-import css, { theme } from '@/css'
+import css, { theme, baseColorBgTheme } from '@/css'
 
 export const Wrapper = styled.div.attrs<TTestable>(({ testid }) => ({
   'data-test-id': testid,
@@ -91,5 +91,5 @@ export const Hightlight = styled.span<{ color: TColorName }>`
   color: ${theme('article.title')};
   font-weight: 500;
   padding: 0 2px;
-  background-color: ${({ color }) => theme(`baseColor.${color.toLowerCase()}Bg`)};
+  background-color: ${({ color }) => baseColorBgTheme(color)};
 `

src/containers/content/UserContent/styles/index.ts

@@ -40,7 +40,7 @@ export const ContentWrapper = styled.div<{ hasContentBg: boolean }>`
   padding: 20px;
   padding-top: 15px;
 
-  background: ${({ hasContentBg }) => (hasContentBg ? theme('thread.bg') : 'transparent')};
+  background: ${({ hasContentBg }) => (hasContentBg ? theme('hoverBg') : 'transparent')};
 
   ${css.media.mobile`
     padding: 0;

src/containers/editor/CommunityEditor/styles/banner/finished.ts

@@ -9,8 +9,6 @@ export const Wrapper = styled.div`
   position: relative;
   ${css.column('align-both')};
   color: ${theme('article.digest')};
-  /* background-image: linear-gradient(#043B49, #022A35); */
-  background-image: ${theme('banner.linearGradient')};
   padding-top: 5%;
   padding-bottom: 5%;
   width: 100%;

src/containers/editor/CommunityEditor/styles/banner/setup_domain.ts

@@ -8,8 +8,6 @@ export const Wrapper = styled.div`
   position: relative;
   ${css.column('align-both')};
   color: ${theme('article.digest')};
-  /* background-image: linear-gradient(#043B49, #022A35); */
-  background-image: ${theme('banner.linearGradient')};
   width: 100%;
   height: 260px;
 `

src/containers/editor/CommunityEditor/styles/banner/setup_extra.ts

@@ -11,7 +11,6 @@ export const Wrapper = styled.div`
   position: relative;
   ${css.column('align-both')};
   color: ${theme('article.digest')};
-  background-image: ${theme('banner.linearGradient')};
   width: 100%;
   padding-top: 3%;
 `

src/containers/editor/CommunityEditor/styles/banner/setup_info.ts

@@ -12,7 +12,6 @@ export const Wrapper = styled.div`
   position: relative;
   ${css.column('align-both')};
   color: ${theme('article.digest')};
-  background-image: ${theme('banner.linearGradient')};
   width: 100%;
   height: 300px;
 `

src/containers/editor/CommunityEditor/styles/content/fake_browser/index.ts

@@ -12,7 +12,7 @@ export const Wrapper = styled.div`
   width: 100%;
   min-height: 500px;
   border-radius: 12px;
-  background: ${theme('alplaBg')};
+  background: ${theme('alphaBg')};
   border: 1px solid;
   border-color: #e5e5e5;
   /* border-color: ${theme('hoverBg')}; */
@@ -29,7 +29,7 @@ export const Header = styled.div`
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   height: 36px;
-  background: ${theme('alplaBg')};
+  background: ${theme('alphaBg')};
 `
 export const Tab = styled.div`
   ${css.row('align-center')};

src/containers/layout/GlobalLayout/Wallpaper.tsx

@@ -2,20 +2,22 @@ import { FC } from 'react'
 import { observer } from 'mobx-react'
 
 import useWallpaper from '@/hooks/useWallpaper'
+import useTheme from '@/hooks/useTheme'
+
 import { parseWallpaper } from '@/wallpaper'
 
 import { Wrapper } from './styles/wallpaper'
 
 const Wallpaper: FC = () => {
-  const theWallpaper = useWallpaper()
+  const { wallpapers, wallpaper, customWallpaper } = useWallpaper()
+  const { curTheme } = useTheme()
 
-  const { wallpapers, wallpaper, customWallpaper } = theWallpaper
   const { background, effect } = parseWallpaper(wallpapers, wallpaper, customWallpaper)
 
   // for custom image/svg
   // for use style object not passing props
   // @link see https://github.com/styled-components/styled-components/issues/3315#issuecomment-885977691
-  return <Wrapper style={{ background }} effect={effect} />
+  return <Wrapper style={{ background }} effect={effect} themeName={curTheme} />
 }
 
 export default observer(Wallpaper)

src/containers/layout/GlobalLayout/index.tsx

@@ -91,7 +91,6 @@ const GlobalLayoutContainer: FC<TProps> = ({ globalLayout: store, children }) =>
           <ScrollWrapper $noMobilePadding={metric === METRIC.HOME}>
             <Wrapper>
               <SEO />
-              {/* TODO: extract */}
               <InnerWrapper
                 metric={metric}
                 hasShadow={hasShadow}

src/containers/layout/GlobalLayout/store.ts

@@ -2,7 +2,7 @@
  * GlobalLayout store
  *
  */
-import type { TRootStore, TGlobalLayout } from '@/spec'
+import type { TRootStore, TGlobalLayout, TThemeName } from '@/spec'
 
 import { T, getParent, markStates, Instance } from '@/mobx'
 
@@ -27,6 +27,11 @@ const GlobalLayout = T.model('GlobalLayoutStore', {
       return root.dashboardThread.globalLayout
     },
 
+    get curTheme(): TThemeName {
+      const root = getParent(self) as TRootStore
+      return root.theme.curTheme
+    },
+
     get showDashboardAlert(): boolean {
       const root = getParent(self) as TRootStore
 

src/containers/layout/GlobalLayout/styles/wallpaper.ts

@@ -1,14 +1,19 @@
 import styled from 'styled-components'
+
+import type { TThemeName } from '@/spec'
+import THEME from '@/constant/theme'
 import { animate } from '@/css'
 
-export const Wrapper = styled.div<{ effect: string }>`
+type TWrapper = { effect: string; themeName: TThemeName }
+export const Wrapper = styled.div<TWrapper>`
   position: fixed;
   top: 0;
   height: 100%;
   width: 100%;
 
   ${({ effect }) => effect || ''};
 
+  filter: ${({ themeName }) => (themeName === THEME.NIGHT ? 'brightness(0.85)' : '')};
   /* adjust s value for speed */
   /* position: fixed; */
   /* see https://www.zhangxinxu.com/wordpress/2015/11/css3-will-change-improve-paint/ */

src/containers/layout/ThemePalette/index.tsx

@@ -3,14 +3,13 @@
  * because mobx's observer mechanism, we should manually watch the theme
  * otherwhise the render will not be triggled
  */
-
 import { FC, Fragment, ReactNode } from 'react'
+import { observer } from 'mobx-react'
 import Head from 'next/head'
 import { ThemeProvider } from 'styled-components'
 
-import type { TThemeMap } from '@/spec'
 import usePrimaryColor from '@/hooks/usePrimaryColor'
-import { bond } from '@/mobx'
+import useThemeData from '@/hooks/useThemeData'
 
 import ThirdPartyOverWrite from './ThirdPartyOverWrite'
 import ScrollBarStyle from './ScrollBarStyle'
@@ -19,15 +18,14 @@ import { CodeSyxHighlight } from './dynamic'
 
 type TProps = {
   children: ReactNode
-  theme?: {
-    themeData: TThemeMap
-  }
 }
 
-const ThemeContainer: FC<TProps> = ({ children, theme: { themeData } }) => {
+const ThemePalette: FC<TProps> = ({ children }) => {
+  const themeData = useThemeData()
   const primaryColor = usePrimaryColor()
   // see https://css-tricks.com/meta-theme-color-and-trickery/
   // theme seems conflict with manifest
+
   return (
     <ThemeProvider theme={themeData}>
       <Head>
@@ -47,7 +45,7 @@ const ThemeContainer: FC<TProps> = ({ children, theme: { themeData } }) => {
   )
 }
 
-export default bond(ThemeContainer, 'theme') as FC<TProps>
+export default observer(ThemePalette)
 
 // about meta theme-color
 // see: https://stackoverflow.com/questions/26960703/how-to-change-the-color-of-header-bar-and-address-bar-in-newest-chrome-version-o

src/containers/thread/DashboardThread/store/Models.ts

@@ -147,7 +147,7 @@ export const settingsModalFields = {
   docFaqLayout: T.opt(T.enum(values(DOC_FAQ_LAYOUT)), DOC_FAQ_LAYOUT.COLLAPSE),
   avatarLayout: T.opt(T.enum(values(AVATAR_LAYOUT)), AVATAR_LAYOUT.SQUARE),
   brandLayout: T.opt(T.enum(values(BRAND_LAYOUT)), BRAND_LAYOUT.BOTH),
-  bannerLayout: T.opt(T.enum(values(BANNER_LAYOUT)), BANNER_LAYOUT.SIDEBAR),
+  bannerLayout: T.opt(T.enum(values(BANNER_LAYOUT)), BANNER_LAYOUT.HEADER),
   topbarLayout: T.opt(T.enum(values(TOPBAR_LAYOUT)), TOPBAR_LAYOUT.NO),
   topbarBg: T.opt(T.enum(keys(COLORS)), COLOR_NAME.ORANGE),
 

src/containers/thread/DashboardThread/styles/header/editors/group_head.ts

@@ -18,7 +18,7 @@ export const Title = styled.div`
   font-size: 14px;
 `
 export const HintTitle = styled(Title)`
-  color: ${theme('article.ditest')};
+  color: ${theme('article.digest')};
   margin-top: 4px;
   font-size: 12px;
   font-style: italic;

src/containers/thread/DashboardThread/styles/layout/avatar_layout.ts

@@ -1,9 +1,8 @@
 import styled from 'styled-components'
 
 import type { TActive } from '@/spec'
-import css, { theme } from '@/css'
+import css, { theme, baseColorTheme, baseColorBgTheme } from '@/css'
 
-import { camelize } from '@/fmt'
 import { LineDivider } from '@/widgets/Common'
 
 import { BaseSection, BlockBase } from '.'
@@ -23,12 +22,12 @@ export const Avatar = styled.div<TAvatar>`
   font-size: 13px;
   font-weight: bold;
   border-radius: ${({ circle }) => (circle ? '100px' : '6px')};
-  color: ${({ color }) => theme(`baseColor.${camelize(color)}`)};
-  background-color: ${({ color }) => theme(`baseColor.${camelize(color)}Bg`)};
+  color: ${({ color }) => baseColorTheme(color)};
+  background-color: ${({ color }) => baseColorBgTheme(color)};
   margin-left: ${({ left }) => left};
   margin-left: 5px;
   border: 1px solid;
-  border-color: ${({ color }) => theme(`baseColor.${camelize(color)}`)};
+  border-color: ${({ color }) => baseColorTheme(color)};
 `
 export const AvatarList = styled.div`
   ${css.row('align-center')};

src/containers/thread/DashboardThread/styles/layout/doc_layout/main_template.ts

@@ -2,8 +2,7 @@ import styled from 'styled-components'
 
 import type { TColorName } from '@/spec'
 
-import css, { theme } from '@/css'
-import { camelize } from '@/fmt'
+import css, { theme, baseColorTheme, baseColorBgTheme } from '@/css'
 
 import ToolSVG from '@/icons/Heart'
 
@@ -53,13 +52,13 @@ export const IconWrapper = styled.div<{ color: TColorName }>`
   ${css.size(15)};
   ${css.row('align-both')};
   border-radius: 2px;
-  background-color: ${({ color }) => theme(`baseColor.${camelize(color)}Bg`)};
+  background-color: ${({ color }) => baseColorBgTheme(color)};
   margin-bottom: 8px;
   margin-right: 20px;
 `
 export const ToolIcon = styled(ToolSVG)<{ color: TColorName }>`
   ${css.size(8)};
-  fill: ${({ color }) => theme(`baseColor.${camelize(color)}`)};
+  fill: ${({ color }) => baseColorTheme(color)};
 `
 
 export const ListContent = styled.div`

src/containers/thread/DashboardThread/styles/layout/kanban_layout/board_layout.ts

@@ -2,8 +2,7 @@ import styled from 'styled-components'
 
 import type { TActive, TColorName } from '@/spec'
 
-import css, { theme } from '@/css'
-import { camelize } from '@/fmt'
+import css, { theme, baseColorTheme, baseColorBgTheme } from '@/css'
 
 import DiceSVG from '@/icons/Dice'
 import ResetSVG from '@/icons/Reset'
@@ -45,7 +44,7 @@ export const Board = styled.div<TBoard>`
 
   width: 33.3%;
   height: 280px;
-  background-color: ${({ color }) => theme(`baseColor.${camelize(color)}Bg`)};
+  background-color: ${({ color }) => baseColorBgTheme(color)};
 
   border-radius: 8px;
   border-bottom-left-radius: 0;
@@ -113,16 +112,16 @@ export const Preset = styled.div<{ setable?: boolean }>`
 
 type TColorBall = { color: TColorName; setable?: boolean }
 export const ColorBall = styled.div<TColorBall>`
-  background-color: ${({ color }) => theme(`baseColor.${camelize(color)}Bg`)};
+  background-color: ${({ color }) => baseColorBgTheme(color)};
 
   border: 1px dashed;
-  border-color: ${({ color }) => theme(`baseColor.${camelize(color)}`)};
+  border-color: ${({ color }) => baseColorTheme(color)};
   ${css.circle(16)};
   padding: 5px;
 
   &:hover {
     border: ${({ setable }) => (setable ? '1px solid' : '1px dashed')};
-    border-color: ${({ color }) => theme(`baseColor.${camelize(color)}`)};
+    border-color: ${({ color }) => baseColorTheme(color)};
   }
 
   transition: all 0.2s;