diff --git a/src/containers/content/CommunityContent/DocContent.tsx b/src/containers/content/CommunityContent/DocContent.tsx
index a504f37e4..d85586f5e 100644
--- a/src/containers/content/CommunityContent/DocContent.tsx
+++ b/src/containers/content/CommunityContent/DocContent.tsx
@@ -5,9 +5,6 @@
 import { FC } from 'react'
 import useMobileDetect from '@groupher/use-mobile-detect-hook'
 
-import type { TMetric } from '@/spec'
-import METRIC from '@/constant/metric'
-
 import { bond } from '@/mobx'
 import { BANNER_LAYOUT } from '@/constant/layout'
 import { THREAD } from '@/constant/thread'
@@ -20,20 +17,18 @@ import type { TStore } from './store'
 import { useInit } from './logic'
 
 import { Wrapper, InnerWrapper, SidebarWrapper, ContentWrapper, MobileCardsWrapper } from './styles'
+import useMetric from '@/hooks/useMetric'
 
 type TProps = {
   communityContent?: TStore
-  metric?: TMetric
 }
 
 /**
  * only for AboutThread, but link to the common communityContent store
  */
-const CommunityContentContainer: FC<TProps> = ({
-  communityContent: store,
-  metric = METRIC.COMMUNITY,
-}) => {
+const CommunityContentContainer: FC<TProps> = ({ communityContent: store }) => {
   useInit(store)
+  const metric = useMetric()
 
   const { globalLayout } = store
   const { isMobile } = useMobileDetect()
diff --git a/src/containers/digest/CommunityDigest/SimpleLayout/ThreadTab.tsx b/src/containers/digest/CommunityDigest/SimpleLayout/ThreadTab.tsx
index a4fc86dbe..d3d281bea 100755
--- a/src/containers/digest/CommunityDigest/SimpleLayout/ThreadTab.tsx
+++ b/src/containers/digest/CommunityDigest/SimpleLayout/ThreadTab.tsx
@@ -12,6 +12,7 @@ import usePublicThreads from '@/hooks/usePublicThreads'
 import useHeaderLinks from '@/hooks/useHeaderLinks'
 import useAccount from '@/hooks/useAccount'
 import useViewingThread from '@/hooks/useViewingThread'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 
 import ExtraLinks from '@/widgets/ExtraLinks/SimpleLayout'
 
@@ -24,6 +25,7 @@ const ThreadTab: FC<TProps> = ({ ...restProps }) => {
   const { links: extraLinks, layout: headerLayout } = useHeaderLinks()
   const threads = usePublicThreads()
   const activeThread = useViewingThread()
+  const primaryColor = usePrimaryColor()
 
   const { isModerator } = useAccount()
 
@@ -64,7 +66,7 @@ const ThreadTab: FC<TProps> = ({ ...restProps }) => {
           href={`/${curCommunity.slug}/${item.slug}`}
           key={item.slug}
           $active={activeThread === item.slug}
-          prefetch={false}
+          primaryColor={primaryColor}
         >
           {item.title}
         </Title>
diff --git a/src/containers/digest/CommunityDigest/styles/simple_layout/thread_tab.ts b/src/containers/digest/CommunityDigest/styles/simple_layout/thread_tab.ts
index eb771e85c..ae81373e7 100755
--- a/src/containers/digest/CommunityDigest/styles/simple_layout/thread_tab.ts
+++ b/src/containers/digest/CommunityDigest/styles/simple_layout/thread_tab.ts
@@ -1,8 +1,8 @@
 import Link from 'next/link'
 import styled from 'styled-components'
 
-import type { TActive, TSpace } from '@/spec'
-import css, { theme } from '@/css'
+import type { TActive, TPrimaryColor, TSpace } from '@/spec'
+import css, { theme, primaryTheme } from '@/css'
 
 export const NormalWrapper = styled.div<TSpace>`
   ${css.row('align-center')};
@@ -26,8 +26,10 @@ export const FloatWrapper = styled(NormalWrapper)`
   margin-left: -100px;
 `
 
-export const Title = styled(Link)<TActive>`
-  color: ${({ $active }) => ($active ? theme('article.title') : theme('article.digest'))};
+type TTitle = TActive & TPrimaryColor
+export const Title = styled(Link)<TTitle>`
+  color: ${({ $active, primaryColor }) =>
+    $active ? primaryTheme(primaryColor) : theme('article.digest')};
   font-size: 14px;
   opacity: ${({ $active }) => ($active ? 1 : 0.9)};
   font-weight: ${({ $active }) => ($active ? 500 : 400)};
@@ -36,7 +38,7 @@ export const Title = styled(Link)<TActive>`
   border-radius: 5px;
 
   &:hover {
-    color: ${theme('article.title')};
+    color: ${({ primaryColor }) => primaryTheme(primaryColor)};
     opacity: 1;
     cursor: pointer;
     background: ${theme('hoverBg')};
diff --git a/src/containers/editor/TagSettingEditor/logic.ts b/src/containers/editor/TagSettingEditor/logic.ts
index d390e267d..f2fe13434 100644
--- a/src/containers/editor/TagSettingEditor/logic.ts
+++ b/src/containers/editor/TagSettingEditor/logic.ts
@@ -61,7 +61,6 @@ export const onCreate = (): void => {
     thread: curThread,
   }
 
-  console.log('## create tag: ', tag)
   sr71$.mutate(S.createArticleTag, tag)
 }
 
diff --git a/src/containers/editor/WallpaperEditor/BuildIn/AnglePanel.tsx b/src/containers/editor/WallpaperEditor/BuildIn/AnglePanel.tsx
index 8aac3e2a2..59f97eb19 100755
--- a/src/containers/editor/WallpaperEditor/BuildIn/AnglePanel.tsx
+++ b/src/containers/editor/WallpaperEditor/BuildIn/AnglePanel.tsx
@@ -1,7 +1,9 @@
 import { FC, memo } from 'react'
+import { observer } from 'mobx-react'
 
 import type { TWallpaperGradientDir } from '@/spec'
 import { GRADIENT_DIRECTION } from '@/constant/wallpaper'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 
 import {
   Wrapper,
@@ -24,39 +26,70 @@ type TProps = {
 }
 
 const AnglePanel: FC<TProps> = ({ direction }) => {
+  const primaryColor = usePrimaryColor()
+
   const { TOP, TOP_LEFT, TOP_RIGHT, LEFT, RIGHT, BOTTOM, BOTTOM_LEFT, BOTTOM_RIGHT } =
     GRADIENT_DIRECTION
 
   return (
     <Wrapper>
-      <Top $active={direction === TOP} onClick={() => changeDirection(TOP)}>
+      <Top
+        $active={direction === TOP}
+        primaryColor={primaryColor}
+        onClick={() => changeDirection(TOP)}
+      >
         <ArrowIcon deg="-90deg" $active={direction === TOP} />
       </Top>
-      <TopLeft $active={direction === TOP_LEFT} onClick={() => changeDirection(TOP_LEFT)}>
+      <TopLeft
+        $active={direction === TOP_LEFT}
+        primaryColor={primaryColor}
+        onClick={() => changeDirection(TOP_LEFT)}
+      >
         <ArrowIcon deg="-135deg" $active={direction === TOP_LEFT} />
       </TopLeft>
-      <TopRight $active={direction === TOP_RIGHT} onClick={() => changeDirection(TOP_RIGHT)}>
+      <TopRight
+        $active={direction === TOP_RIGHT}
+        primaryColor={primaryColor}
+        onClick={() => changeDirection(TOP_RIGHT)}
+      >
         <ArrowIcon deg="-45deg" $active={direction === TOP_RIGHT} />
       </TopRight>
-      <Bottom $active={direction === BOTTOM} onClick={() => changeDirection(BOTTOM)}>
+      <Bottom
+        $active={direction === BOTTOM}
+        primaryColor={primaryColor}
+        onClick={() => changeDirection(BOTTOM)}
+      >
         <ArrowIcon deg="90deg" $active={direction === BOTTOM} />
       </Bottom>
 
-      <BottomLeft $active={direction === BOTTOM_LEFT} onClick={() => changeDirection(BOTTOM_LEFT)}>
+      <BottomLeft
+        $active={direction === BOTTOM_LEFT}
+        primaryColor={primaryColor}
+        onClick={() => changeDirection(BOTTOM_LEFT)}
+      >
         <ArrowIcon deg="135deg" $active={direction === BOTTOM_LEFT} />
       </BottomLeft>
 
       <BottomRight
         $active={direction === BOTTOM_RIGHT}
         onClick={() => changeDirection(BOTTOM_RIGHT)}
+        primaryColor={primaryColor}
       >
         <ArrowIcon deg="42deg" $active={direction === BOTTOM_RIGHT} />
       </BottomRight>
 
-      <Left $active={direction === LEFT} onClick={() => changeDirection(LEFT)}>
+      <Left
+        $active={direction === LEFT}
+        primaryColor={primaryColor}
+        onClick={() => changeDirection(LEFT)}
+      >
         <ArrowIcon deg="-180deg" $active={direction === LEFT} />
       </Left>
-      <Right $active={direction === RIGHT} onClick={() => changeDirection(RIGHT)}>
+      <Right
+        $active={direction === RIGHT}
+        primaryColor={primaryColor}
+        onClick={() => changeDirection(RIGHT)}
+      >
         <ArrowIcon deg="0" $active={direction === RIGHT} />
       </Right>
       <NeedleDot />
@@ -65,4 +98,4 @@ const AnglePanel: FC<TProps> = ({ direction }) => {
   )
 }
 
-export default memo(AnglePanel)
+export default observer(AnglePanel)
diff --git a/src/containers/editor/WallpaperEditor/schema.ts b/src/containers/editor/WallpaperEditor/schema.ts
index 8e023e09f..df7d123d5 100755
--- a/src/containers/editor/WallpaperEditor/schema.ts
+++ b/src/containers/editor/WallpaperEditor/schema.ts
@@ -1,4 +1,5 @@
 import { gql } from 'urql/core'
+import { F } from '@/schemas'
 
 const updateDashboardWallpaper = gql`
   mutation (
@@ -28,15 +29,7 @@ const updateDashboardWallpaper = gql`
       slug
       dashboard {
         wallpaper {
-          wallpaperType
-          wallpaper
-          direction
-          customColorValue
-          bgSize
-          uploadBgImage
-          hasPattern
-          hasBlur
-          hasShadow
+          ${F.wallpaper}
         }
       }
     }
diff --git a/src/containers/editor/WallpaperEditor/styles/build_in/angle_panel.ts b/src/containers/editor/WallpaperEditor/styles/build_in/angle_panel.ts
index 203fb46ff..750f4f5b1 100755
--- a/src/containers/editor/WallpaperEditor/styles/build_in/angle_panel.ts
+++ b/src/containers/editor/WallpaperEditor/styles/build_in/angle_panel.ts
@@ -1,9 +1,9 @@
 import styled from 'styled-components'
 
-import type { TActive } from '@/spec'
+import type { TActive, TPrimaryColor } from '@/spec'
 import { GRADIENT_DIRECTION } from '@/constant/wallpaper'
 
-import css, { theme } from '@/css'
+import css, { theme, primaryTheme } from '@/css'
 import ArrowSVG from '@/icons/ArrowSolid'
 
 const metric = {
@@ -39,12 +39,6 @@ export const Wrapper = styled.div`
   border-color: ${theme('divider')};
   position: relative;
   margin-top: 26px;
-
-  &:hover {
-    background: ${theme('hoverBg')};
-  }
-
-  transition: all 0.2s;
 `
 export const NeedleDot = styled.div`
   ${css.circle(4)};
@@ -65,7 +59,8 @@ export const Needle = styled.div<{ direction: string }>`
   transform: ${({ direction }) => `rotate(${metric[direction].rotate}) `};
   transform-origin: right;
 `
-const Point = styled.div<TActive>`
+type TPoint = TActive & TPrimaryColor
+const Point = styled.div<TPoint>`
   position: absolute;
   font-size: 8px;
   ${css.circle(16)};
@@ -73,12 +68,14 @@ const Point = styled.div<TActive>`
   z-index: 2;
 
   font-weight: ${({ $active }) => ($active ? 600 : 'bormal')};
-  background: ${({ $active }) => ($active ? theme('article.title') : theme('divider'))};
+  background: ${({ $active, primaryColor }) =>
+    $active ? primaryTheme(primaryColor) : theme('divider')};
   color: ${({ $active }) => (!$active ? theme('article.title') : 'white')};
   border: 1px solid transparent;
 
   &:hover {
     border-color: ${theme('article.digest')};
+    border-color: ${({ primaryColor }) => primaryTheme(primaryColor)};
     font-weight: 600;
     cursor: pointer;
     color: white;
diff --git a/src/containers/layout/ThemePalette/GlobalStyle.ts b/src/containers/layout/ThemePalette/GlobalStyle.ts
index fcf106af9..7374963d3 100755
--- a/src/containers/layout/ThemePalette/GlobalStyle.ts
+++ b/src/containers/layout/ThemePalette/GlobalStyle.ts
@@ -1,10 +1,11 @@
 import { createGlobalStyle } from 'styled-components'
 
-// import { media } from '@/utils/css/media'
-import css, { theme } from '@/css'
+import type { TPrimaryColor } from '@/spec'
+import css, { theme, primaryTheme, primaryLightTheme } from '@/css'
+
 import normalize from './normalize'
 
-const GlobalStyle = createGlobalStyle`
+const GlobalStyle = createGlobalStyle<TPrimaryColor>`
   ${normalize};
   html {
     background-color: ${theme('htmlBg')};
@@ -20,12 +21,15 @@ const GlobalStyle = createGlobalStyle`
   }
 
   *::-moz-selection {
-    background-color: ${theme('selectionBg')} !important;
+    background-color: ${({ primaryColor }) => primaryLightTheme(primaryColor)} !important;
+    color: ${({ primaryColor }) => primaryTheme(primaryColor)} !important;
   }
 
   *::selection {
-    background-color: ${theme('selectionBg')} !important;
+    background-color: ${({ primaryColor }) => primaryLightTheme(primaryColor)} !important;
+    color: ${({ primaryColor }) => primaryTheme(primaryColor)} !important;
   }
+
   a:hover {
     color: ${theme('a.hover')};
   }
diff --git a/src/containers/layout/ThemePalette/index.tsx b/src/containers/layout/ThemePalette/index.tsx
index 75a16850d..5361696a2 100755
--- a/src/containers/layout/ThemePalette/index.tsx
+++ b/src/containers/layout/ThemePalette/index.tsx
@@ -9,6 +9,7 @@ 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 ThirdPartyOverWrite from './ThirdPartyOverWrite'
@@ -24,6 +25,7 @@ type TProps = {
 }
 
 const ThemeContainer: FC<TProps> = ({ children, theme: { themeData } }) => {
+  const primaryColor = usePrimaryColor()
   // see https://css-tricks.com/meta-theme-color-and-trickery/
   // theme seems conflict with manifest
   return (
@@ -36,7 +38,7 @@ const ThemeContainer: FC<TProps> = ({ children, theme: { themeData } }) => {
         />
       </Head>
 
-      <GlobalStyle />
+      <GlobalStyle primaryColor={primaryColor} />
       <Fragment>{children}</Fragment>
       <ThirdPartyOverWrite />
       <CodeSyxHighlight />
diff --git a/src/containers/thread/DashboardThread/BasicInfo/OtherInfo/index.tsx b/src/containers/thread/DashboardThread/BasicInfo/OtherInfo/index.tsx
index b18b6691a..8d36d5209 100644
--- a/src/containers/thread/DashboardThread/BasicInfo/OtherInfo/index.tsx
+++ b/src/containers/thread/DashboardThread/BasicInfo/OtherInfo/index.tsx
@@ -23,8 +23,6 @@ type TProps = {
 const OtherInfo: FC<TProps> = ({ testid = 'basic-info', settings, touched }) => {
   const { city, techstack } = settings
 
-  console.log('## city: ', city)
-
   return (
     <Wrapper>
       <Label left={-6}>（团队）所在城市</Label>
diff --git a/src/containers/thread/DashboardThread/CMS/Docs/Tree/index.tsx b/src/containers/thread/DashboardThread/CMS/Docs/Tree/index.tsx
index d5e29347e..347246910 100644
--- a/src/containers/thread/DashboardThread/CMS/Docs/Tree/index.tsx
+++ b/src/containers/thread/DashboardThread/CMS/Docs/Tree/index.tsx
@@ -33,7 +33,6 @@ const TreeView: FC<TProps> = ({ pagedDocs }) => {
 
   useEffect(() => {
     const tree = treeRef.current
-    console.log('## tree: ', tree)
     /* See the Tree API reference for all you can do with it. */
   }, [])
 
@@ -43,7 +42,7 @@ const TreeView: FC<TProps> = ({ pagedDocs }) => {
         // treeRef.current.createLeaf()
         // treeRef.current.createInternal()
         // console.log('## tree: ', treeRef.current)
-        console.log('## get Data: ', treeRef.current)
+        // console.log('## get Data: ', treeRef.current)
         // treeRef.current.unselectAll()
       }}
     >
diff --git a/src/containers/thread/DashboardThread/Layout/AvatarLayout.tsx b/src/containers/thread/DashboardThread/Layout/AvatarLayout.tsx
index 20a1e4411..06f1df03e 100644
--- a/src/containers/thread/DashboardThread/Layout/AvatarLayout.tsx
+++ b/src/containers/thread/DashboardThread/Layout/AvatarLayout.tsx
@@ -1,9 +1,11 @@
-import { FC, memo } from 'react'
+import { FC } from 'react'
+import { observer } from 'mobx-react'
 
 import type { TAvatarLayout } from '@/spec'
 
 import { AVATAR_LAYOUT } from '@/constant/layout'
 import { COLOR_NAME } from '@/constant/colors'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 
 import CheckLabel from '@/widgets/CheckLabel'
 
@@ -20,6 +22,7 @@ import {
   Divider,
   Avatar,
   AvatarList,
+  SavingWrapper,
 } from '../styles/layout/avatar_layout'
 import { edit } from '../logic'
 
@@ -30,12 +33,14 @@ type TProps = {
 }
 
 const AvatarLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
+  const primaryColor = usePrimaryColor()
+
   return (
     <Wrapper>
       <SectionLabel title="头像样式" desc={<>用户/用户列表头像展示样式。</>} />
       <SelectWrapper>
         <Layout onClick={() => edit(AVATAR_LAYOUT.SQUARE, 'avatarLayout')}>
-          <Block $active={layout === AVATAR_LAYOUT.SQUARE}>
+          <Block $active={layout === AVATAR_LAYOUT.SQUARE} primaryColor={primaryColor}>
             <Avatar color={COLOR_NAME.BLUE}>YM</Avatar>
             <Divider />
             <AvatarList>
@@ -62,7 +67,7 @@ const AvatarLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
           </LayoutTitle>
         </Layout>
         <Layout onClick={() => edit(AVATAR_LAYOUT.CIRCLE, 'avatarLayout')}>
-          <Block $active={layout === AVATAR_LAYOUT.CIRCLE}>
+          <Block $active={layout === AVATAR_LAYOUT.CIRCLE} primaryColor={primaryColor}>
             <Avatar color={COLOR_NAME.BLUE} circle>
               YM
             </Avatar>
@@ -93,14 +98,16 @@ const AvatarLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
           </LayoutTitle>
         </Layout>
       </SelectWrapper>
-      <SavingBar
-        isTouched={isTouched}
-        field={SETTING_FIELD.AVATAR_LAYOUT}
-        loading={saving}
-        top={20}
-      />
+      <SavingWrapper>
+        <SavingBar
+          isTouched={isTouched}
+          field={SETTING_FIELD.AVATAR_LAYOUT}
+          loading={saving}
+          top={20}
+        />
+      </SavingWrapper>
     </Wrapper>
   )
 }
 
-export default memo(AvatarLayout)
+export default observer(AvatarLayout)
diff --git a/src/containers/thread/DashboardThread/Layout/BannerLayout.tsx b/src/containers/thread/DashboardThread/Layout/BannerLayout.tsx
index da0f3b1c1..2469dbde2 100644
--- a/src/containers/thread/DashboardThread/Layout/BannerLayout.tsx
+++ b/src/containers/thread/DashboardThread/Layout/BannerLayout.tsx
@@ -1,9 +1,12 @@
-import { FC, memo } from 'react'
+import { FC } from 'react'
+import { observer } from 'mobx-react'
 
 import type { TBannerLayout } from '@/spec'
 
 import { BANNER_LAYOUT, DASHBOARD_DESC_LAYOUT } from '@/constant/layout'
 import { callDashboardDesc } from '@/signal'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
+import useViewingCommunity from '@/hooks/useViewingCommunity'
 
 import { Row, Br, Space, SpaceGrow } from '@/widgets/Common'
 import CheckLabel from '@/widgets/CheckLabel'
@@ -15,6 +18,7 @@ import SavingBar from '../SavingBar'
 
 import {
   Wrapper,
+  CommunityTitle,
   SelectWrapper,
   Layout,
   LayoutTitle,
@@ -36,6 +40,9 @@ type TProps = {
 }
 
 const BannerLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
+  const primaryColor = usePrimaryColor()
+  const { title } = useViewingCommunity()
+
   return (
     <Wrapper>
       <SectionLabel
@@ -51,9 +58,9 @@ const BannerLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
       />
       <SelectWrapper>
         <Layout onClick={() => edit(BANNER_LAYOUT.HEADER, 'bannerLayout')}>
-          <Block $active={layout === BANNER_LAYOUT.HEADER}>
+          <Block $active={layout === BANNER_LAYOUT.HEADER} primaryColor={primaryColor}>
             <Row>
-              <Bar thin long={16} />
+              <CommunityTitle>{title}</CommunityTitle>
               <Space right={42} />
               <Bar thin long={40} />
               <Space right={45} />
@@ -81,7 +88,7 @@ const BannerLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
                 <Bar long={55} thin />
               </ListsWrapper>
               <TagsWrapper>
-                <Bar long={100} />
+                <Bar long={100} primaryColor={primaryColor} />
                 <Br bottom={15} />
                 <Bar long={60} thin />
                 <Br bottom={6} />
@@ -105,9 +112,9 @@ const BannerLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
           </LayoutTitle>
         </Layout>
         <Layout onClick={() => edit(BANNER_LAYOUT.TABBER, 'bannerLayout')}>
-          <Block $active={layout === BANNER_LAYOUT.TABBER}>
+          <Block $active={layout === BANNER_LAYOUT.TABBER} primaryColor={primaryColor}>
             <Row>
-              <Bar long={16} />
+              <CommunityTitle>{title}</CommunityTitle>
               <SpaceGrow />
               <Bar thin long={6} />
               <Space right={5} />
@@ -141,7 +148,7 @@ const BannerLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
                 <Bar long={50} thin />
               </ListsWrapper>
               <TagsWrapper>
-                <Bar long={100} />
+                <Bar long={100} primaryColor={primaryColor} />
                 <Br bottom={15} />
                 <Bar long={60} thin />
                 <Br bottom={6} />
@@ -165,17 +172,17 @@ const BannerLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
           </LayoutTitle>
         </Layout>
         <Layout onClick={() => edit(BANNER_LAYOUT.SIDEBAR, 'bannerLayout')}>
-          <Block $active={layout === BANNER_LAYOUT.SIDEBAR}>
+          <Block $active={layout === BANNER_LAYOUT.SIDEBAR} primaryColor={primaryColor}>
             <Row>
               <Space right={110} />
               <Bar thin long={10} />
               <SpaceGrow />
               <Space right={5} />
-              <Circle radius={6} />
+              <Bar long={10} primaryColor={primaryColor} />
             </Row>
             <Main>
               <SidebarWrapper>
-                <Bar long={100} />
+                <CommunityTitle>{title}</CommunityTitle>
                 <Br bottom={15} />
                 <Bar long={60} thin />
                 <Br bottom={6} />
@@ -236,4 +243,4 @@ const BannerLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
   )
 }
 
-export default memo(BannerLayout)
+export default observer(BannerLayout)
diff --git a/src/containers/thread/DashboardThread/Layout/BrandLayout.tsx b/src/containers/thread/DashboardThread/Layout/BrandLayout.tsx
index 263c07afe..82e2b9deb 100644
--- a/src/containers/thread/DashboardThread/Layout/BrandLayout.tsx
+++ b/src/containers/thread/DashboardThread/Layout/BrandLayout.tsx
@@ -1,8 +1,10 @@
-import { FC, memo } from 'react'
+import { FC } from 'react'
+import { observer } from 'mobx-react'
 
 import type { TBrandLayout } from '@/spec'
 
 import { BRAND_LAYOUT, DASHBOARD_DESC_LAYOUT } from '@/constant/layout'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 import { callDashboardDesc } from '@/signal'
 
 import { Space, Divider, Inline } from '@/widgets/Common'
@@ -32,6 +34,8 @@ type TProps = {
 }
 
 const LogoLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
+  const primaryColor = usePrimaryColor()
+
   return (
     <Wrapper>
       <SectionLabel
@@ -52,7 +56,7 @@ const LogoLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
       />
       <SelectWrapper>
         <Layout onClick={() => edit(BRAND_LAYOUT.BOTH, 'brandLayout')}>
-          <Block $active={layout === BRAND_LAYOUT.BOTH}>
+          <Block $active={layout === BRAND_LAYOUT.BOTH} primaryColor={primaryColor}>
             <Brand>
               <BrandIcon />
               <Space right={7} />
@@ -70,7 +74,7 @@ const LogoLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
           </LayoutTitle>
         </Layout>
         <Layout onClick={() => edit(BRAND_LAYOUT.LOGO, 'brandLayout')}>
-          <Block $active={layout === BRAND_LAYOUT.LOGO}>
+          <Block $active={layout === BRAND_LAYOUT.LOGO} primaryColor={primaryColor}>
             <Brand>
               <BrandIcon />
             </Brand>
@@ -86,7 +90,7 @@ const LogoLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
           </LayoutTitle>
         </Layout>
         <Layout onClick={() => edit(BRAND_LAYOUT.TEXT, 'brandLayout')}>
-          <Block $active={layout === BRAND_LAYOUT.TEXT}>
+          <Block $active={layout === BRAND_LAYOUT.TEXT} primaryColor={primaryColor}>
             <Brand>
               <BrandTitle>Groupher</BrandTitle>
             </Brand>
@@ -107,4 +111,4 @@ const LogoLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
   )
 }
 
-export default memo(LogoLayout)
+export default observer(LogoLayout)
diff --git a/src/containers/thread/DashboardThread/Layout/ChangelogLayout.tsx b/src/containers/thread/DashboardThread/Layout/ChangelogLayout.tsx
index 305a92a9e..123ae23f2 100644
--- a/src/containers/thread/DashboardThread/Layout/ChangelogLayout.tsx
+++ b/src/containers/thread/DashboardThread/Layout/ChangelogLayout.tsx
@@ -1,8 +1,10 @@
-import { FC, memo } from 'react'
+import { FC } from 'react'
+import { observer } from 'mobx-react'
 
 import type { TChangelogLayout } from '@/spec'
 
 import { CHANGELOG_LAYOUT, DASHBOARD_DESC_LAYOUT } from '@/constant/layout'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 import { callDashboardDesc } from '@/signal'
 
 import { Row, Br, Space, SpaceGrow, Divider, Inline } from '@/widgets/Common'
@@ -37,6 +39,8 @@ type TProps = {
 }
 
 const ChangelogLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
+  const primaryColor = usePrimaryColor()
+
   return (
     <Wrapper>
       <SectionLabel
@@ -57,7 +61,7 @@ const ChangelogLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
       />
       <SelectWrapper>
         <Layout onClick={() => edit(CHANGELOG_LAYOUT.CLASSIC, 'changelogLayout')}>
-          <Block $active={layout === CHANGELOG_LAYOUT.CLASSIC}>
+          <Block $active={layout === CHANGELOG_LAYOUT.CLASSIC} primaryColor={primaryColor}>
             <Column>
               <Picture />
               <Br top={14} />
@@ -108,7 +112,7 @@ const ChangelogLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
           </LayoutTitle>
         </Layout>
         <Layout onClick={() => edit(CHANGELOG_LAYOUT.SIMPLE, 'changelogLayout')}>
-          <Block $active={layout === CHANGELOG_LAYOUT.SIMPLE}>
+          <Block $active={layout === CHANGELOG_LAYOUT.SIMPLE} primaryColor={primaryColor}>
             <MiniItem>
               <MiniBar long={10} thin />
               <MiniIntro>
@@ -215,4 +219,4 @@ const ChangelogLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
   )
 }
 
-export default memo(ChangelogLayout)
+export default observer(ChangelogLayout)
diff --git a/src/containers/thread/DashboardThread/Layout/DocLayout/index.tsx b/src/containers/thread/DashboardThread/Layout/DocLayout/index.tsx
index 5914fc404..1ef5c7eaf 100644
--- a/src/containers/thread/DashboardThread/Layout/DocLayout/index.tsx
+++ b/src/containers/thread/DashboardThread/Layout/DocLayout/index.tsx
@@ -1,8 +1,10 @@
-import { FC, memo } from 'react'
+import { FC } from 'react'
+import { observer } from 'mobx-react'
 
 import type { TDocFAQLayout, TDocLayout } from '@/spec'
 
 import { DOC_LAYOUT, DOC_FAQ_LAYOUT, DASHBOARD_DESC_LAYOUT } from '@/constant/layout'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 import { callDashboardDesc } from '@/signal'
 
 import { Br, Divider } from '@/widgets/Common'
@@ -35,6 +37,8 @@ type TProps = {
 }
 
 const DocLayout: FC<TProps> = ({ layout, faqLayout, isTouched, isFaqTouched, saving }) => {
+  const primaryColor = usePrimaryColor()
+
   return (
     <Wrapper>
       <SectionLabel
@@ -53,7 +57,7 @@ const DocLayout: FC<TProps> = ({ layout, faqLayout, isTouched, isFaqTouched, sav
       />
       <SelectWrapper>
         <Layout onClick={() => edit(DOC_LAYOUT.BLOCKS, 'docLayout')}>
-          <Block $active={layout === DOC_LAYOUT.BLOCKS}>
+          <Block $active={layout === DOC_LAYOUT.BLOCKS} primaryColor={primaryColor}>
             <Br bottom={14} />
             <Main>
               <MainTemplate layout={DOC_LAYOUT.BLOCKS} />
@@ -70,7 +74,7 @@ const DocLayout: FC<TProps> = ({ layout, faqLayout, isTouched, isFaqTouched, sav
         </Layout>
 
         <Layout onClick={() => edit(DOC_LAYOUT.LISTS, 'docLayout')}>
-          <Block $active={layout === DOC_LAYOUT.LISTS}>
+          <Block $active={layout === DOC_LAYOUT.LISTS} primaryColor={primaryColor}>
             <Br bottom={14} />
             <Main>
               <MainTemplate layout={DOC_LAYOUT.LISTS} />
@@ -87,7 +91,7 @@ const DocLayout: FC<TProps> = ({ layout, faqLayout, isTouched, isFaqTouched, sav
         </Layout>
 
         <Layout onClick={() => edit(DOC_LAYOUT.CARDS, 'docLayout')}>
-          <Block $active={layout === DOC_LAYOUT.CARDS}>
+          <Block $active={layout === DOC_LAYOUT.CARDS} primaryColor={primaryColor}>
             <Br bottom={14} />
             <Main>
               <MainTemplate layout={DOC_LAYOUT.CARDS} />
@@ -129,7 +133,7 @@ const DocLayout: FC<TProps> = ({ layout, faqLayout, isTouched, isFaqTouched, sav
       />
       <SelectWrapper>
         <Layout onClick={() => edit(DOC_FAQ_LAYOUT.COLLAPSE, 'docFaqLayout')}>
-          <Block $active={faqLayout === DOC_FAQ_LAYOUT.COLLAPSE}>
+          <Block $active={faqLayout === DOC_FAQ_LAYOUT.COLLAPSE} primaryColor={primaryColor}>
             <Br bottom={14} />
             <Main>
               <FaqTemplate layout={DOC_FAQ_LAYOUT.COLLAPSE} />
@@ -145,7 +149,7 @@ const DocLayout: FC<TProps> = ({ layout, faqLayout, isTouched, isFaqTouched, sav
           </LayoutTitle>
         </Layout>
         <Layout onClick={() => edit(DOC_FAQ_LAYOUT.FLAT, 'docFaqLayout')}>
-          <Block $active={faqLayout === DOC_FAQ_LAYOUT.FLAT}>
+          <Block $active={faqLayout === DOC_FAQ_LAYOUT.FLAT} primaryColor={primaryColor}>
             <Br bottom={14} />
             <Main>
               <FaqTemplate layout={DOC_FAQ_LAYOUT.FLAT} />
@@ -172,4 +176,4 @@ const DocLayout: FC<TProps> = ({ layout, faqLayout, isTouched, isFaqTouched, sav
   )
 }
 
-export default memo(DocLayout)
+export default observer(DocLayout)
diff --git a/src/containers/thread/DashboardThread/Layout/GlowEffect.tsx b/src/containers/thread/DashboardThread/Layout/GlowEffect.tsx
index d760977b9..4b5bf4da3 100644
--- a/src/containers/thread/DashboardThread/Layout/GlowEffect.tsx
+++ b/src/containers/thread/DashboardThread/Layout/GlowEffect.tsx
@@ -1,7 +1,9 @@
-import { FC, memo } from 'react'
+import { FC } from 'react'
+import { observer } from 'mobx-react'
 import { keys } from 'ramda'
 
 import GLOW_EFFECTS, { GLOW_OPACITY } from '@/constant/glow_effect'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 
 import { Br, Row as RowBase } from '@/widgets/Common'
 import ArrowLinker from '@/widgets/ArrowLinker'
@@ -44,6 +46,7 @@ const GlowEffect: FC<TProps> = ({
   isGrowOpacityTouched,
   saving,
 }) => {
+  const primaryColor = usePrimaryColor()
   const EFFECTS_KEYS = keys(GLOW_EFFECTS)
 
   return (
@@ -61,13 +64,22 @@ const GlowEffect: FC<TProps> = ({
       />
 
       <Row>
-        <NoBox $active={glowType === ''} onClick={() => edit('', 'glowType')}>
+        <NoBox
+          $active={glowType === ''}
+          onClick={() => edit('', 'glowType')}
+          primaryColor={primaryColor}
+        >
           <ForbidIcon />
           <CloseIcon />
         </NoBox>
 
         {EFFECTS_KEYS.map((effect) => (
-          <Box key={effect} $active={effect === glowType} onClick={() => edit(effect, 'glowType')}>
+          <Box
+            key={effect}
+            $active={effect === glowType}
+            primaryColor={primaryColor}
+            onClick={() => edit(effect, 'glowType')}
+          >
             <GrowBackground glowPosition="absolute" glowType={effect} />
           </Box>
         ))}
@@ -77,7 +89,13 @@ const GlowEffect: FC<TProps> = ({
 
       <Br bottom={40} />
 
-      <SavingBar isTouched={isGrowFixedTouched} field={SETTING_FIELD.GLOW_FIXED} loading={saving}>
+      <SavingBar
+        isTouched={isGrowFixedTouched}
+        field={SETTING_FIELD.GLOW_FIXED}
+        loading={saving}
+        left={-10}
+        top={-8}
+      >
         <SettingsRow>
           <SettingTitle>滑动跟随:</SettingTitle>
           <Radio
@@ -105,6 +123,8 @@ const GlowEffect: FC<TProps> = ({
           isTouched={isGrowOpacityTouched}
           field={SETTING_FIELD.GLOW_OPACITY}
           loading={saving}
+          left={-10}
+          top={-8}
         >
           <SettingsRow>
             <SettingTitle>辉光强度:</SettingTitle>
@@ -130,4 +150,4 @@ const GlowEffect: FC<TProps> = ({
   )
 }
 
-export default memo(GlowEffect)
+export default observer(GlowEffect)
diff --git a/src/containers/thread/DashboardThread/Layout/KanbanLayout/ItemLayout.tsx b/src/containers/thread/DashboardThread/Layout/KanbanLayout/ItemLayout.tsx
index 4aa6d7375..43457c05a 100644
--- a/src/containers/thread/DashboardThread/Layout/KanbanLayout/ItemLayout.tsx
+++ b/src/containers/thread/DashboardThread/Layout/KanbanLayout/ItemLayout.tsx
@@ -1,6 +1,8 @@
-import { FC, memo } from 'react'
+import { FC } from 'react'
+import { observer } from 'mobx-react'
 
 import { KANBAN_LAYOUT, DASHBOARD_DESC_LAYOUT } from '@/constant/layout'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 import { callDashboardDesc } from '@/signal'
 
 import { Row, Br, Space, SpaceGrow, Inline } from '@/widgets/Common'
@@ -26,6 +28,8 @@ import { edit } from '../../logic'
 type TProps = Omit<TPropsBase, 'kanbanBgColors' | 'isBgColorsTouched'>
 
 const KanbanItemLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
+  const primaryColor = usePrimaryColor()
+
   return (
     <>
       <SectionLabel
@@ -46,7 +50,7 @@ const KanbanItemLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
       />
       <SelectWrapper>
         <Layout onClick={() => edit(KANBAN_LAYOUT.SIMPLE, 'kanbanLayout')}>
-          <Block $active={layout === KANBAN_LAYOUT.SIMPLE}>
+          <Block $active={layout === KANBAN_LAYOUT.SIMPLE} primaryColor={primaryColor}>
             <Bar thin long={15} />
             <Br bottom={15} />
             <Row>
@@ -72,7 +76,7 @@ const KanbanItemLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
           </LayoutTitle>
         </Layout>
         <Layout onClick={() => edit(KANBAN_LAYOUT.FULL, 'kanbanLayout')}>
-          <Block $active={layout === KANBAN_LAYOUT.FULL}>
+          <Block $active={layout === KANBAN_LAYOUT.FULL} primaryColor={primaryColor}>
             <Bar thin long={15} />
             <Br bottom={10} />
             <Row>
@@ -114,4 +118,4 @@ const KanbanItemLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
   )
 }
 
-export default memo(KanbanItemLayout)
+export default observer(KanbanItemLayout)
diff --git a/src/containers/thread/DashboardThread/Layout/PostLayout.tsx b/src/containers/thread/DashboardThread/Layout/PostLayout.tsx
index 28454f51c..09efffc5e 100644
--- a/src/containers/thread/DashboardThread/Layout/PostLayout.tsx
+++ b/src/containers/thread/DashboardThread/Layout/PostLayout.tsx
@@ -1,8 +1,10 @@
-import { FC, memo } from 'react'
+import { FC } from 'react'
+import { observer } from 'mobx-react'
 
 import type { TPostLayout } from '@/spec'
 
 import { POST_LAYOUT, DASHBOARD_DESC_LAYOUT } from '@/constant/layout'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 import { callDashboardDesc } from '@/signal'
 
 import { Row, Br, Space, SpaceGrow, Inline } from '@/widgets/Common'
@@ -37,6 +39,8 @@ type TProps = {
 }
 
 const PostListLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
+  const primaryColor = usePrimaryColor()
+
   return (
     <Wrapper>
       <SectionLabel
@@ -57,7 +61,7 @@ const PostListLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
       />
       <SelectWrapper>
         <Layout onClick={() => edit(POST_LAYOUT.QUORA, 'postLayout')}>
-          <Block $active={layout === POST_LAYOUT.QUORA}>
+          <Block $active={layout === POST_LAYOUT.QUORA} primaryColor={primaryColor}>
             <Bar thin long={30} />
             <Br bottom={7} />
             <Row>
@@ -89,7 +93,7 @@ const PostListLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
           </LayoutTitle>
         </Layout>
         <Layout onClick={() => edit(POST_LAYOUT.PH, 'postLayout')}>
-          <Block $active={layout === POST_LAYOUT.PH}>
+          <Block $active={layout === POST_LAYOUT.PH} primaryColor={primaryColor}>
             <Row>
               <Column center>
                 <Circle />
@@ -128,7 +132,7 @@ const PostListLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
         </Layout>
 
         <Layout onClick={() => edit(POST_LAYOUT.MASONRY, 'postLayout')}>
-          <Block $active={layout === POST_LAYOUT.MASONRY}>
+          <Block $active={layout === POST_LAYOUT.MASONRY} primaryColor={primaryColor}>
             <Row>
               <Column grow>
                 <Box />
@@ -152,7 +156,7 @@ const PostListLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
         </Layout>
 
         <Layout onClick={() => edit(POST_LAYOUT.MINIMAL, 'postLayout')}>
-          <Block $active={layout === POST_LAYOUT.MINIMAL}>
+          <Block $active={layout === POST_LAYOUT.MINIMAL} primaryColor={primaryColor}>
             <Row>
               <Space right={5} />
               <Column center>
@@ -188,7 +192,7 @@ const PostListLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
         </Layout>
 
         <Layout onClick={() => edit(POST_LAYOUT.COVER, 'postLayout')}>
-          <Block $active={layout === POST_LAYOUT.COVER}>
+          <Block $active={layout === POST_LAYOUT.COVER} primaryColor={primaryColor}>
             <Row>
               <Cover />
               <Space right={17} />
@@ -221,4 +225,4 @@ const PostListLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
   )
 }
 
-export default memo(PostListLayout)
+export default observer(PostListLayout)
diff --git a/src/containers/thread/DashboardThread/Layout/PrimaryColor.tsx b/src/containers/thread/DashboardThread/Layout/PrimaryColor.tsx
index 1606b7a04..0030a4118 100644
--- a/src/containers/thread/DashboardThread/Layout/PrimaryColor.tsx
+++ b/src/containers/thread/DashboardThread/Layout/PrimaryColor.tsx
@@ -31,7 +31,12 @@ const PrimaryColor: FC<TProps> = ({ primaryColor, isTouched, saving }) => {
           </Row>
         }
       />
-      <SavingBar isTouched={isTouched} field={SETTING_FIELD.PRIMARY_COLOR} loading={saving}>
+      <SavingBar
+        isTouched={isTouched}
+        field={SETTING_FIELD.PRIMARY_COLOR}
+        loading={saving}
+        left={-8}
+      >
         <Label color={primaryColor}>
           <ColorSelector
             activeColor={primaryColor}
diff --git a/src/containers/thread/DashboardThread/Layout/TopbarLayout.tsx b/src/containers/thread/DashboardThread/Layout/TopbarLayout.tsx
index a54ede96e..75538d2a5 100644
--- a/src/containers/thread/DashboardThread/Layout/TopbarLayout.tsx
+++ b/src/containers/thread/DashboardThread/Layout/TopbarLayout.tsx
@@ -1,8 +1,10 @@
-import { FC, memo } from 'react'
+import { FC } from 'react'
+import { observer } from 'mobx-react'
 
 import type { TTopbarLayout, TColorName } from '@/spec'
 
 import { TOPBAR_LAYOUT, DASHBOARD_DESC_LAYOUT } from '@/constant/layout'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 import { callDashboardDesc } from '@/signal'
 
 import { Br, Inline } from '@/widgets/Common'
@@ -40,6 +42,8 @@ type TProps = {
 }
 
 const TopbarLayout: FC<TProps> = ({ layout, isLayoutTouched, isBgTouched, saving, bg }) => {
+  const primaryColor = usePrimaryColor()
+
   return (
     <Wrapper>
       <SectionLabel
@@ -60,7 +64,7 @@ const TopbarLayout: FC<TProps> = ({ layout, isLayoutTouched, isBgTouched, saving
       />
       <SelectWrapper>
         <Layout onClick={() => edit(TOPBAR_LAYOUT.YES, 'topbarLayout')}>
-          <Block $active={layout === TOPBAR_LAYOUT.YES}>
+          <Block $active={layout === TOPBAR_LAYOUT.YES} primaryColor={primaryColor}>
             <TopBar bg={bg}>--</TopBar>
 
             <Main>
@@ -95,7 +99,7 @@ const TopbarLayout: FC<TProps> = ({ layout, isLayoutTouched, isBgTouched, saving
           </LayoutTitle>
         </Layout>
         <Layout onClick={() => edit(TOPBAR_LAYOUT.NO, 'topbarLayout')}>
-          <Block $active={layout === TOPBAR_LAYOUT.NO}>
+          <Block $active={layout === TOPBAR_LAYOUT.NO} primaryColor={primaryColor}>
             <Main>
               <ListsWrapper>
                 <Bar long={60} thin />
@@ -138,7 +142,13 @@ const TopbarLayout: FC<TProps> = ({ layout, isLayoutTouched, isBgTouched, saving
       {layout === TOPBAR_LAYOUT.YES && (
         <>
           <Br top={30} />
-          <SavingBar isTouched={isBgTouched} field={SETTING_FIELD.TOPBAR_BG} loading={saving}>
+          <SavingBar
+            isTouched={isBgTouched}
+            field={SETTING_FIELD.TOPBAR_BG}
+            loading={saving}
+            left={-10}
+            top={-8}
+          >
             <BgWrapper>
               <div>颜色:</div>
               <BgLabel bg={bg}>
@@ -159,4 +169,4 @@ const TopbarLayout: FC<TProps> = ({ layout, isLayoutTouched, isBgTouched, saving
   )
 }
 
-export default memo(TopbarLayout)
+export default observer(TopbarLayout)
diff --git a/src/containers/thread/DashboardThread/SideMenu/Group.tsx b/src/containers/thread/DashboardThread/SideMenu/Group.tsx
index f55d47807..ca287b755 100755
--- a/src/containers/thread/DashboardThread/SideMenu/Group.tsx
+++ b/src/containers/thread/DashboardThread/SideMenu/Group.tsx
@@ -1,7 +1,9 @@
 import { FC, memo, useState } from 'react'
+import { observer } from 'mobx-react'
 
 import type { TCommunity, TDashboardPath } from '@/spec'
 import { DASHBOARD_ROUTE } from '@/constant/route'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 
 import type { TMenuGroup, TTouched } from '../spec'
 
@@ -24,6 +26,7 @@ type TProps = {
 }
 
 const Group: FC<TProps> = ({ group, curTab, touched, community }) => {
+  const primaryColor = usePrimaryColor()
   const [fold, setFold] = useState(group.initFold)
 
   return (
@@ -41,9 +44,10 @@ const Group: FC<TProps> = ({ group, curTab, touched, community }) => {
 
             return (
               <Item
-                $active={item.slug === curTab}
                 key={item.slug}
+                $active={item.slug === curTab}
                 href={`/${community.slug}/${DASHBOARD_ROUTE.DASHBOARD}/${subPath}`}
+                primaryColor={primaryColor}
               >
                 {item.title}
                 {touched && (touched[item.slug] || touched[item.alias]) && <TouchedDot />}
@@ -56,4 +60,4 @@ const Group: FC<TProps> = ({ group, curTab, touched, community }) => {
   )
 }
 
-export default memo(Group)
+export default observer(Group)
diff --git a/src/containers/thread/DashboardThread/logic/index.ts b/src/containers/thread/DashboardThread/logic/index.ts
index c8ffe24f8..09accb586 100644
--- a/src/containers/thread/DashboardThread/logic/index.ts
+++ b/src/containers/thread/DashboardThread/logic/index.ts
@@ -72,7 +72,6 @@ export const enableThread = (key: string, toggle: boolean): void => {
 
 export const toggleSEO = (seoEnable: boolean): void => {
   const { curCommunity } = store
-  console.log('## toggleSEO seoEnable: ', seoEnable)
 
   sr71$.mutate(S.updateDashboardSeo, { community: curCommunity.slug, seoEnable })
 }
@@ -420,8 +419,6 @@ export const mediaReportOnChange = (index: number, url: string): void => {
   const { baseInfoSettings } = store
   const { mediaReports } = baseInfoSettings
 
-  console.log('## onChange index: ', index)
-
   const restReports = reject((item: TMediaReport) => item.index === index, mediaReports)
   const report = find((item: TMediaReport) => item.index === index, mediaReports)
 
diff --git a/src/containers/thread/DashboardThread/schema.ts b/src/containers/thread/DashboardThread/schema.ts
index b3d9697e7..086f0249c 100755
--- a/src/containers/thread/DashboardThread/schema.ts
+++ b/src/containers/thread/DashboardThread/schema.ts
@@ -154,10 +154,13 @@ const updateDashboardEnable = gql`
 const updateDashboardLayout = gql`
   mutation (
     $community: Stirng!
+    $primaryColor: String
     $postLayout: String
     $kanbanLayout: String
     $footerLayout: String
     $headerLayout: String
+    $topbarLayout: String
+    $topbarBg: String
     $avatarLayout: String
     $broadcastEnable: Boolean
     $kanbanBgColors: [String]
@@ -167,10 +170,13 @@ const updateDashboardLayout = gql`
   ) {
     updateDashboardLayout(
       community: $community
+      primaryColor: $primaryColor
       postLayout: $postLayout
       kanbanLayout: $kanbanLayout
       footerLayout: $footerLayout
       headerLayout: $headerLayout
+      topbarLayout: $topbarLayout
+      topbarBg: $topbarBg
       avatarLayout: $avatarLayout
       broadcastEnable: $broadcastEnable
       kanbanBgColors: $kanbanBgColors
diff --git a/src/containers/thread/DashboardThread/store/index.ts b/src/containers/thread/DashboardThread/store/index.ts
index ae46a3a74..b6bf4c683 100644
--- a/src/containers/thread/DashboardThread/store/index.ts
+++ b/src/containers/thread/DashboardThread/store/index.ts
@@ -53,9 +53,9 @@ import { CHANGE_MODE } from '@/constant/mode'
 import { THREAD } from '@/constant/thread'
 
 import BStore from '@/utils/bstore'
-import { buildLog } from '@/utils/logger'
-import { T, getParent, markStates, Instance, toJS } from '@/utils/mobx'
-import { washThreads, sortByIndex } from '@/utils/helper'
+import { buildLog } from '@/logger'
+import { T, getParent, markStates, Instance, toJS } from '@/mobx'
+import { washThreads, sortByIndex } from '@/helper'
 
 import {
   PagedCommunities,
diff --git a/src/containers/thread/DashboardThread/styles/layout/avatar_layout.ts b/src/containers/thread/DashboardThread/styles/layout/avatar_layout.ts
index 544bb891f..7c07c8e03 100644
--- a/src/containers/thread/DashboardThread/styles/layout/avatar_layout.ts
+++ b/src/containers/thread/DashboardThread/styles/layout/avatar_layout.ts
@@ -56,3 +56,6 @@ export const LayoutTitle = styled.div<TActive>`
   }
   transition: all 0.2s;
 `
+export const SavingWrapper = styled.div`
+  width: 91%;
+`
diff --git a/src/containers/thread/DashboardThread/styles/layout/banner_layout.ts b/src/containers/thread/DashboardThread/styles/layout/banner_layout.ts
index fe8b7381b..ae9b4698b 100644
--- a/src/containers/thread/DashboardThread/styles/layout/banner_layout.ts
+++ b/src/containers/thread/DashboardThread/styles/layout/banner_layout.ts
@@ -10,6 +10,12 @@ import { BaseSection, BlockBase } from '.'
 export { Bar, Circle } from '.'
 
 export const Wrapper = styled(BaseSection)``
+export const CommunityTitle = styled.div`
+  font-weight: 600;
+  color: ${theme('article.title')};
+  font-size: 12px;
+  ${css.cutRest('50px')};
+`
 export const SelectWrapper = styled.div`
   ${css.rowWrap('align-center')};
   gap: 30px;
@@ -38,6 +44,7 @@ export const SidebarWrapper = styled.div`
   border-right: 1px solid;
   border-right-color: ${theme('divider')};
   z-index: 2;
+  margin-top: -6px;
 `
 export const ExampleBtn = styled.div`
   display: inline-block;
diff --git a/src/containers/thread/DashboardThread/styles/layout/glow_effect.ts b/src/containers/thread/DashboardThread/styles/layout/glow_effect.ts
index 18348ce4e..fc72326f6 100644
--- a/src/containers/thread/DashboardThread/styles/layout/glow_effect.ts
+++ b/src/containers/thread/DashboardThread/styles/layout/glow_effect.ts
@@ -1,9 +1,9 @@
 import styled from 'styled-components'
 
-import type { TActive, TGlowEffect } from '@/spec'
+import type { TActive, TGlowEffect, TPrimaryColor } from '@/spec'
 import GLOW_EFFECTS from '@/constant/glow_effect'
 
-import css, { theme } from '@/css'
+import css, { theme, primaryTheme } from '@/css'
 
 import DLightSVG from '@/icons/DLight'
 import ClossSVG from '@/icons/CloseLight'
@@ -22,7 +22,8 @@ export const Row = styled.div`
     width: 100%;
   `}
 `
-export const Box = styled.div<TActive>`
+type TBox = TActive & TPrimaryColor
+export const Box = styled.div<TBox>`
   position: relative;
   width: 300px;
   height: 180px;
@@ -30,7 +31,9 @@ export const Box = styled.div<TActive>`
   border: 1px solid;
   z-index: 1;
 
-  border-color: ${({ $active }) => ($active ? theme('article.digest') : theme('divider'))};
+  border-color: ${({ $active, primaryColor }) =>
+    $active ? primaryTheme(primaryColor) : theme('divider')};
+
   box-shadow: ${({ $active }) => ($active ? css.cardShadow : 'none')};
   background: ${theme('alphaBg')};
 
diff --git a/src/containers/thread/DashboardThread/styles/layout/index.ts b/src/containers/thread/DashboardThread/styles/layout/index.ts
index 3de4d24b2..8403f48c5 100644
--- a/src/containers/thread/DashboardThread/styles/layout/index.ts
+++ b/src/containers/thread/DashboardThread/styles/layout/index.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
-import type { TActive } from '@/spec'
-import css, { theme } from '@/css'
+import type { TActive, TColorName, TPrimaryColor } from '@/spec'
+import css, { theme, primaryTheme } from '@/css'
 
 export const Wrapper = styled.div`
   ${css.column()};
@@ -12,6 +12,7 @@ export const Wrapper = styled.div`
     padding: 20px;
   `};
 `
+
 export const Banner = styled.div`
   height: 70px;
   width: 100%;
@@ -46,15 +47,18 @@ export const TitleBase = styled.div`
   margin-bottom: 12px;
 `
 
-export const BlockBase = styled.div<TActive>`
+type TBlockBase = TActive & TPrimaryColor
+export const BlockBase = styled.div<TBlockBase>`
   opacity: ${({ $active }) => ($active ? 0.7 : 0.2)};
-  box-shadow: ${({ $active }) => ($active ? 'rgb(0 0 0 / 7%) 0px 0px 24px' : '')};
+  box-shadow: ${({ $active }) => ($active ? css.cardShadow : '')};
 
   background-color: ${({ $active }) => ($active ? theme('alphaBg') : 'transparent')};
 
   border: 1px solid;
   border-radius: 7px;
-  border-color: ${theme('article.title')};
+  /* border-color: ${theme('primary')}; */
+  border-color: ${({ $active, primaryColor }) =>
+    $active ? primaryTheme(primaryColor) : theme('primary')};
   padding: 16px 15px;
 
   &:hover {
@@ -66,14 +70,16 @@ export const BlockBase = styled.div<TActive>`
 `
 
 // base shapes
-type TBar = { long: number; thin?: boolean; bold?: boolean }
+type TBar = { long: number; thin?: boolean; bold?: boolean; primaryColor?: TColorName }
 export const Bar = styled.div<TBar>`
   width: ${({ long }) => `${long || 10}%`};
   height: ${({ thin }) => (thin ? '4px' : '10px;')};
-  background: ${({ thin, bold }) => {
+  background: ${({ thin, bold, primaryColor }) => {
+    if (primaryColor) return primaryTheme(primaryColor)
+
     if (bold) return theme('article.title')
 
-    return thin ? theme('article.digest') : theme('article.title')
+    return thin ? theme('article.digest') : theme('primary')
   }};
   z-index: 3;
   border-radius: 5px;
diff --git a/src/containers/thread/DashboardThread/styles/layout/post_layout.ts b/src/containers/thread/DashboardThread/styles/layout/post_layout.ts
index a4dcdc921..bdeec79b1 100644
--- a/src/containers/thread/DashboardThread/styles/layout/post_layout.ts
+++ b/src/containers/thread/DashboardThread/styles/layout/post_layout.ts
@@ -24,7 +24,6 @@ export const Box = styled.div`
   background: ${theme('article.digest')};
   margin-bottom: 8px;
 `
-
 export const Cover = styled.div`
   width: 90px;
   height: 62px;
diff --git a/src/containers/thread/DashboardThread/styles/layout/primary_color.ts b/src/containers/thread/DashboardThread/styles/layout/primary_color.ts
index 53509fd8b..789ff2647 100644
--- a/src/containers/thread/DashboardThread/styles/layout/primary_color.ts
+++ b/src/containers/thread/DashboardThread/styles/layout/primary_color.ts
@@ -10,16 +10,14 @@ export const Wrapper = styled(BaseSection)``
 
 export const Label = styled.div<{ color: TColorName }>`
   ${css.row('align-both')};
-  width: 100px;
-  height: 30px;
+  ${css.circle(42)};
   border: 1px solid;
-  border-radius: 8px;
   border-color: ${({ color }) => COLORS[color]};
   cursor: pointer;
 `
 export const TheColor = styled.div<{ color: TColorName }>`
-  width: 92px;
-  height: 22px;
-  border-radius: 6px;
+  ${css.circle(34)};
   background-color: ${({ color }) => COLORS[color]};
+  margin-top: 3px;
+  margin-left: 3px;
 `
diff --git a/src/containers/thread/DashboardThread/styles/layout/topbar_layout.ts b/src/containers/thread/DashboardThread/styles/layout/topbar_layout.ts
index 9c73700bb..af258a8bb 100644
--- a/src/containers/thread/DashboardThread/styles/layout/topbar_layout.ts
+++ b/src/containers/thread/DashboardThread/styles/layout/topbar_layout.ts
@@ -67,8 +67,6 @@ export const LayoutTitle = styled.div<TActive>`
   transition: all 0.2s;
 `
 export const Block = styled(BlockBase)`
-  border: 1px solid;
-  border-color: ${theme('article.digest')};
   width: 300px;
   height: 200px;
   padding: 0px;
@@ -82,18 +80,14 @@ export const BgWrapper = styled.div`
   font-size: 12px;
 `
 export const BgLabel = styled.div<{ bg: TColorName }>`
-  width: 44px;
-  height: 24px;
+  ${css.circle(32)};
   ${css.row('align-both')};
   border: 1px solid;
   border-color: ${({ bg }) => COLORS[bg]};
-  border-radius: 6px;
   cursor: pointer;
   margin-left: 15px;
 `
 export const TheColor = styled.div<{ color: TColorName }>`
-  width: 38px;
-  height: 18px;
-  border-radius: 6px;
+  ${css.circle(26)};
   background-color: ${({ color }) => COLORS[color]};
 `
diff --git a/src/containers/thread/DashboardThread/styles/side_menu/group.ts b/src/containers/thread/DashboardThread/styles/side_menu/group.ts
index 0ed9edc58..f222b1a0d 100755
--- a/src/containers/thread/DashboardThread/styles/side_menu/group.ts
+++ b/src/containers/thread/DashboardThread/styles/side_menu/group.ts
@@ -1,8 +1,8 @@
 import styled from 'styled-components'
 import Link from 'next/link'
 
-import type { TActive } from '@/spec'
-import css, { theme } from '@/css'
+import type { TActive, TPrimaryColor } from '@/spec'
+import css, { theme, primaryTheme } from '@/css'
 
 import ArrowSVG from '@/icons/ArrowSimple'
 
@@ -58,23 +58,30 @@ export const MenuWrapper = styled.div`
 
   border-image-slice: 1;
 `
-export const Item = styled(Link)<TActive>`
+type TItem = TActive & TPrimaryColor
+
+export const Item = styled(Link)<TItem>`
   text-decoration: none;
   position: relative;
   display: block;
-  color: ${({ $active }) => ($active ? theme('article.title') : theme('article.digest'))};
+  color: ${({ $active, primaryColor }) =>
+    $active ? primaryTheme(primaryColor) : theme('article.digest')};
   background: ${({ $active }) => ($active ? theme('activeLinear') : 'transparent')};
+  font-weight: ${({ $active }) => ($active ? 500 : 400)};
 
   width: 160px;
   padding: 3px 5px;
-  margin-top: 5px;
+  /* margin-top: 5px; */
+  margin-top: ${({ $active }) => ($active ? '7px' : '5px')};
+  margin-bottom: ${({ $active }) => ($active ? '7px' : 0)};
+
   padding-left: 20px;
   border-radius: 10px;
   font-size: 13.5px;
 
   &:hover {
     cursor: pointer;
-    color: ${theme('article.title')};
+    color: ${({ primaryColor }) => primaryTheme(primaryColor)};
     background: ${theme('activeLinear')};
   }
 
@@ -85,9 +92,9 @@ export const Item = styled(Link)<TActive>`
     top: 8px;
     left: -3px;
     width: 4px;
-    height: 13px;
+    height: 12px;
     border-radius: 8px;
-    background: ${theme('article.digest')};
+    background: ${({ primaryColor }) => primaryTheme(primaryColor)};
   }
 
   transition: all 0.2s;
diff --git a/src/containers/thread/KanbanThread/store.ts b/src/containers/thread/KanbanThread/store.ts
index 0b0a80f9a..f45ff6759 100755
--- a/src/containers/thread/KanbanThread/store.ts
+++ b/src/containers/thread/KanbanThread/store.ts
@@ -32,7 +32,7 @@ const KanbanThread = T.model('KanbanThread', {
     get kanbanBgColors(): TColorName[] {
       const root = getParent(self) as TRootStore
 
-      return root.dashboardThread.kanbanBgColors as TColorName[]
+      return toJS(root.dashboardThread.kanbanBgColors) as TColorName[]
     },
     get todoPosts(): TPagedArticles {
       return toJS(self.todo)
diff --git a/src/containers/thread/ThreadSidebar/styles/classic_layout.ts b/src/containers/thread/ThreadSidebar/styles/classic_layout.ts
index 6dca2791b..d00467abe 100755
--- a/src/containers/thread/ThreadSidebar/styles/classic_layout.ts
+++ b/src/containers/thread/ThreadSidebar/styles/classic_layout.ts
@@ -60,8 +60,7 @@ export const CommunityNoteWrapper = styled.div`
 `
 export const PublishWrapper = styled.div<TActive>`
   display: ${({ show }) => (show ? 'block' : 'none')};
-  width: 185px;
-  max-width: 185px;
+  width: 100%;
 `
 export const NoteWrapper = styled.div`
   color: ${theme('hint')};
diff --git a/src/containers/unit/TagsBar/DesktopView/GobackTag.tsx b/src/containers/unit/TagsBar/DesktopView/GobackTag.tsx
index 657e9e847..e7eb8a624 100755
--- a/src/containers/unit/TagsBar/DesktopView/GobackTag.tsx
+++ b/src/containers/unit/TagsBar/DesktopView/GobackTag.tsx
@@ -1,9 +1,8 @@
 import { FC } from 'react'
 
 import type { TTag } from '@/spec'
-import { ICON } from '@/config'
 import { emptyTag } from '@/model'
-import { Wrapper, TagIcon, TagTitle } from '../styles/desktop_view/goback_tag'
+import { Wrapper, BackIcon, TagTitle } from '../styles/desktop_view/goback_tag'
 
 type TProps = {
   onSelect?: (tag?: TTag) => void
@@ -12,7 +11,7 @@ type TProps = {
 const GobackTag: FC<TProps> = ({ onSelect }) => {
   return (
     <Wrapper onClick={() => onSelect(emptyTag)}>
-      <TagIcon src={`${ICON}/shape/reset.svg`} />
+      <BackIcon />
       <TagTitle>全部标签</TagTitle>
     </Wrapper>
   )
diff --git a/src/containers/unit/TagsBar/DesktopView/TagItem.tsx b/src/containers/unit/TagsBar/DesktopView/TagItem.tsx
index dc2f6c178..a66be6d90 100755
--- a/src/containers/unit/TagsBar/DesktopView/TagItem.tsx
+++ b/src/containers/unit/TagsBar/DesktopView/TagItem.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 
-import type { TTag } from '@/spec'
+import type { TColorName, TTag } from '@/spec'
 import { cutRest } from '@/fmt'
 import { Trans } from '@/i18n'
 
@@ -17,13 +17,18 @@ type TProps = {
 
 const TagItem: FC<TProps> = ({ tag, active, onSelect }) => {
   return (
-    <Wrapper $active={active}>
+    <Wrapper $active={active} primaryColor={tag.color as TColorName}>
       {tag.color && (
         <DotWrapper>
           <DotSign color={tag.color} $active={active} />
         </DotWrapper>
       )}
-      <Tag $active={active} color={tag.color} onClick={() => onSelect(tag)}>
+      <Tag
+        $active={active}
+        primaryColor={tag.color as TColorName}
+        color={tag.color}
+        onClick={() => onSelect(tag)}
+      >
         <Title>{cutRest(Trans(tag.title), 10)}</Title>
         {/* <RawWrapper $active={active}>
           <DotDivider radius={2} space={6} />
diff --git a/src/containers/unit/TagsBar/styles/desktop_view/folder.ts b/src/containers/unit/TagsBar/styles/desktop_view/folder.ts
index b1e5d0be9..5421407f2 100755
--- a/src/containers/unit/TagsBar/styles/desktop_view/folder.ts
+++ b/src/containers/unit/TagsBar/styles/desktop_view/folder.ts
@@ -11,7 +11,7 @@ export const Header = styled.div<TActive>`
   ${css.row('align-center')};
   display: ${({ show }) => (show ? 'flex' : 'none')};
   margin-bottom: 8px;
-  margin-left: 2px;
+  margin-left: 3px;
   &:hover {
     cursor: pointer;
   }
diff --git a/src/containers/unit/TagsBar/styles/desktop_view/goback_tag.ts b/src/containers/unit/TagsBar/styles/desktop_view/goback_tag.ts
index c5fe809bd..eabf07d71 100755
--- a/src/containers/unit/TagsBar/styles/desktop_view/goback_tag.ts
+++ b/src/containers/unit/TagsBar/styles/desktop_view/goback_tag.ts
@@ -1,27 +1,32 @@
 import styled from 'styled-components'
 
 import css, { theme } from '@/css'
-import Img from '@/Img'
+
+import ArrowSVG from '@/icons/Arrow'
 
 export const Wrapper = styled.div`
   ${css.row('align-center')};
-  margin-bottom: 8px;
+  margin-bottom: 10px;
   max-width: 180px;
   padding: 5px 2px;
 `
-export const TagIcon = styled(Img)`
-  fill: ${theme('banner.desc')};
+export const BackIcon = styled(ArrowSVG)`
+  ${css.size(12)};
+  fill: ${theme('lightText')};
   margin-right: 6px;
-  ${css.size(14)};
+  margin-left: 4px;
+
+  ${Wrapper}:hover & {
+    cursor: pointer;
+    fill: ${theme('article.title')};
+  }
 `
 export const TagTitle = styled.div`
   color: ${theme('tags.text')};
-  font-size: 14px;
-  letter-spacing: 1px;
+  font-size: 13px;
 
-  &:hover {
+  ${Wrapper}:hover & {
     cursor: pointer;
-    font-weight: bold;
+    color: ${theme('article.title')};
   }
-  transition: all 0.2s;
 `
diff --git a/src/containers/unit/TagsBar/styles/desktop_view/tag_item.ts b/src/containers/unit/TagsBar/styles/desktop_view/tag_item.ts
index 4e7bb7dc2..7d678f98e 100755
--- a/src/containers/unit/TagsBar/styles/desktop_view/tag_item.ts
+++ b/src/containers/unit/TagsBar/styles/desktop_view/tag_item.ts
@@ -1,15 +1,15 @@
 import styled from 'styled-components'
 
-import type { TActive } from '@/spec'
+import type { TActive, TPrimaryColor } from '@/spec'
 
-import css, { theme } from '@/css'
+import css, { theme, primaryLightTheme } from '@/css'
 import { camelize } from '@/fmt'
 
 import Img from '@/Img'
 
 import { TagsWrapper } from '.'
 
-type TTag = TActive & { color?: string }
+type TTag = TActive & { color?: string } & TPrimaryColor
 
 export const Wrapper = styled.div<TTag>`
   ${css.row('align-center')};
@@ -18,10 +18,11 @@ export const Wrapper = styled.div<TTag>`
   max-width: 180px;
   border-radius: 8px;
 
-  background: ${({ $active }) => (!$active ? 'transparent' : theme('hoverBg'))};
+  background: ${({ $active, primaryColor }) =>
+    $active ? primaryLightTheme(primaryColor) : 'transparent'};
 
   &:hover {
-    background: ${theme('hoverBg')};
+    background: ${({ primaryColor }) => primaryLightTheme(primaryColor)};
     cursor: pointer;
   }
 `
@@ -33,6 +34,7 @@ export const AllTagIcon = styled(Img)`
 `
 export const DotWrapper = styled.div`
   ${css.size(15)};
+  ${css.row('align-both')};
   margin-right: 6px;
   margin-left: 2px;
 `
@@ -40,8 +42,6 @@ type THashSign = TActive & { color?: string }
 export const DotSign = styled.div<THashSign>`
   ${css.circle(8)};
   background: ${({ color }) => (color ? theme(`baseColor.${camelize(color)}`) : 'none')};
-  margin-top: 3px;
-  margin-left: 2px;
   opacity: ${({ $active }) => ($active ? 1 : theme('tags.dotOpacity'))};
 
   ${Wrapper}:hover & {
diff --git a/src/hooks/usePrimaryColor.ts b/src/hooks/usePrimaryColor.ts
new file mode 100644
index 000000000..938e1af69
--- /dev/null
+++ b/src/hooks/usePrimaryColor.ts
@@ -0,0 +1,19 @@
+import { useContext } from 'react'
+import { MobXProviderContext } from 'mobx-react'
+
+import type { TColorName } from '@/spec'
+
+/**
+ * NOTE: should use observer to wrap the component who use this hook
+ */
+const usePrimaryColor = (): TColorName => {
+  const { store } = useContext(MobXProviderContext)
+
+  if (store === null) {
+    throw new Error('Store cannot be null, please add a context provider')
+  }
+
+  return store.dashboardThread.primaryColor
+}
+
+export default usePrimaryColor
diff --git a/src/pages/[community]/doc.tsx b/src/pages/[community]/doc.tsx
index da6aec2fe..e4cfbdbf8 100644
--- a/src/pages/[community]/doc.tsx
+++ b/src/pages/[community]/doc.tsx
@@ -4,6 +4,7 @@ import { Provider } from 'mobx-react'
 
 import { HCN } from '@/constant/name'
 import { THREAD } from '@/constant/thread'
+import METRIC from '@/constant/metric'
 import { useStore } from '@/stores/init'
 
 import {
@@ -79,6 +80,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
   const initProps = merge(
     {
       ...ssrBaseStates(resp),
+      metric: METRIC.DOC,
       route: {
         communityPath: community.slug,
         mainPath: community.slug === HCN ? '' : community.slug,
diff --git a/src/pages/[community]/kanban.tsx b/src/pages/[community]/kanban.tsx
index 6d70b2762..618b790f9 100755
--- a/src/pages/[community]/kanban.tsx
+++ b/src/pages/[community]/kanban.tsx
@@ -6,7 +6,15 @@ import { HCN } from '@/constant/name'
 import { THREAD } from '@/constant/thread'
 import { useStore } from '@/stores/init'
 
-import { ssrBaseStates, ssrFetchPrepare, ssrError, ssrRescue, log } from '@/utils'
+import {
+  ssrBaseStates,
+  ssrFetchPrepare,
+  ssrError,
+  ssrParseDashboard,
+  ssrParseWallpaper,
+  ssrRescue,
+  log,
+} from '@/utils'
 
 import GlobalLayout from '@/containers/layout/GlobalLayout'
 import KanbanContent from '@/containers/content/CommunityContent/KanbanContent'
@@ -57,6 +65,8 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
   }
 
   const { community, groupedKanbanPosts } = resp
+  const dashboard = ssrParseDashboard(community)
+  const wallpaper = ssrParseWallpaper(community)
 
   const initProps = merge(
     {
@@ -73,6 +83,12 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
         community,
         activeThread: thread,
       },
+      wallpaperEditor: {
+        ...wallpaper,
+      },
+      dashboardThread: {
+        ...dashboard,
+      },
     },
     {
       articleThread: thread,
diff --git a/src/spec/color.d.ts b/src/spec/color.d.ts
index 8bc396bad..f4b3533d8 100755
--- a/src/spec/color.d.ts
+++ b/src/spec/color.d.ts
@@ -11,3 +11,5 @@ export type TColorName =
   | 'CYAN_LIGHT'
   | 'BLUE'
   | 'PURPLE'
+
+export type TPrimaryColor = { primaryColor: TColorName }
diff --git a/src/spec/index.ts b/src/spec/index.ts
index a70dade9e..b55ac268a 100755
--- a/src/spec/index.ts
+++ b/src/spec/index.ts
@@ -168,7 +168,7 @@ export type {
   TWallpaperInfo,
 } from './wallpaper'
 
-export type { TColorName } from './color'
+export type { TColorName, TPrimaryColor } from './color'
 
 export type {
   TPath,
diff --git a/src/spec/metric.d.ts b/src/spec/metric.d.ts
index a2a5943ed..b93faec24 100755
--- a/src/spec/metric.d.ts
+++ b/src/spec/metric.d.ts
@@ -1,6 +1,7 @@
 export type TMetric =
   | 'HOME'
   | 'COMMUNITY'
+  | 'DOC'
   | 'USER'
   // articles
   | 'ARTICLE'
diff --git a/src/widgets/ArrowLinker/index.tsx b/src/widgets/ArrowLinker/index.tsx
index ecccdff77..917faa5c9 100644
--- a/src/widgets/ArrowLinker/index.tsx
+++ b/src/widgets/ArrowLinker/index.tsx
@@ -5,9 +5,11 @@
  */
 
 import { FC, memo, ReactNode } from 'react'
+import { observer } from 'mobx-react'
 
 import type { TSpace } from '@/spec'
 import { buildLog } from '@/logger'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 
 import { Link } from '@/widgets/Common'
 
@@ -32,14 +34,18 @@ const ArrowLinker: FC<TProps> = ({
   children,
   ...restProps
 }) => {
+  const primaryColor = usePrimaryColor()
+
   return (
     <Link href={href} target={target}>
       <Wrapper testid={testid} {...restProps}>
-        <Title fontSize={fontSize}>{children}</Title>
-        <ArrowIcon fontSize={fontSize} />
+        <Title fontSize={fontSize} primaryColor={primaryColor}>
+          {children}
+        </Title>
+        <ArrowIcon fontSize={fontSize} primaryColor={primaryColor} />
       </Wrapper>
     </Link>
   )
 }
 
-export default memo(ArrowLinker)
+export default observer(ArrowLinker)
diff --git a/src/widgets/ArrowLinker/styles/index.ts b/src/widgets/ArrowLinker/styles/index.ts
index b7b230748..f56a7c9ec 100644
--- a/src/widgets/ArrowLinker/styles/index.ts
+++ b/src/widgets/ArrowLinker/styles/index.ts
@@ -1,8 +1,8 @@
 import styled from 'styled-components'
 
-import type { TTestable, TSpace } from '@/spec'
+import type { TTestable, TSpace, TPrimaryColor } from '@/spec'
 
-import css, { theme } from '@/css'
+import css, { primaryLink } from '@/css'
 import ArrowSVG from '@/icons/ArrowUpRight'
 
 type TWrapper = TTestable & TSpace
@@ -19,15 +19,17 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   }
 `
 
-export const ArrowIcon = styled(ArrowSVG)<{ fontSize: number }>`
-  fill: ${theme('link')};
+type TArrowIcon = { fontSize: number } & TPrimaryColor
+
+export const ArrowIcon = styled(ArrowSVG)<TArrowIcon>`
+  fill: ${({ primaryColor }) => primaryLink(primaryColor)};
   width: ${({ fontSize }) => `${fontSize - 1}px`};
   height: ${({ fontSize }) => `${fontSize - 1}px`};
   margin-left: 1px;
   opacity: 0.6;
 `
-
-export const Title = styled.span<{ fontSize: number }>`
+export const Title = styled.span<TArrowIcon>`
+  color: ${({ primaryColor }) => primaryLink(primaryColor)};
   display: inline-block;
   font-size: ${({ fontSize }) => `${fontSize}px`};
 `
diff --git a/src/widgets/Buttons/ArrowButton/index.tsx b/src/widgets/Buttons/ArrowButton/index.tsx
index 52d58afa6..9a1eddba7 100644
--- a/src/widgets/Buttons/ArrowButton/index.tsx
+++ b/src/widgets/Buttons/ArrowButton/index.tsx
@@ -4,12 +4,13 @@
  *
  */
 
-import { FC, ReactNode, memo, useRef, useEffect, useState } from 'react'
+import { FC, ReactNode, useRef, useEffect, useState } from 'react'
+import { observer } from 'mobx-react'
 
 import type { TColorName, TSpace } from '@/spec'
 
 import { COLOR_NAME } from '@/constant/colors'
-
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 import { buildLog } from '@/logger'
 
 import Arrow from './Arrow'
@@ -23,7 +24,7 @@ export type TProps = {
   onClick?: () => void
   dimWhenIdle?: boolean
   disabled?: boolean
-  color?: TColorName
+  color?: TColorName | null
   reverseColor?: boolean
   className?: string
   leftLayout?: boolean
@@ -38,7 +39,7 @@ const ArrowButton: FC<TProps> = ({
   onClick = log,
   dimWhenIdle = false,
   disabled = false,
-  color = COLOR_NAME.BLACK,
+  color = null,
   className = '',
   leftLayout = false,
   reverseColor = false,
@@ -48,6 +49,7 @@ const ArrowButton: FC<TProps> = ({
   initWidth = 55,
   ...restProps
 }) => {
+  const primaryColor = usePrimaryColor()
   const ref = useRef()
   const [width, setWidth] = useState(initWidth)
 
@@ -65,14 +67,14 @@ const ArrowButton: FC<TProps> = ({
       onClick={() => !disabled && onClick()}
       dimWhenIdle={dimWhenIdle}
       disabled={disabled}
-      color={color}
+      color={color || primaryColor}
       reverseColor={reverseColor}
       fontSize={fontSize}
       {...restProps}
     >
       {leftLayout && (
         <Arrow
-          color={color}
+          color={color || primaryColor}
           reverseColor={reverseColor}
           leftLayout={leftLayout}
           up={up}
@@ -84,7 +86,7 @@ const ArrowButton: FC<TProps> = ({
       </Text>
       {!leftLayout && (
         <Arrow
-          color={color}
+          color={color || primaryColor}
           reverseColor={reverseColor}
           leftLayout={leftLayout}
           up={up}
@@ -95,4 +97,4 @@ const ArrowButton: FC<TProps> = ({
   )
 }
 
-export default memo(ArrowButton)
+export default observer(ArrowButton)
diff --git a/src/widgets/Buttons/Button.tsx b/src/widgets/Buttons/Button.tsx
index 6c823bcf1..dee33a021 100755
--- a/src/widgets/Buttons/Button.tsx
+++ b/src/widgets/Buttons/Button.tsx
@@ -1,6 +1,8 @@
-import { FC, ReactNode, memo } from 'react'
+import { FC, ReactNode } from 'react'
+import { observer } from 'mobx-react'
 
 import type { TSizeTSM, TSpace } from '@/spec'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 import SIZE from '@/constant/size'
 import { buildLog } from '@/logger'
 
@@ -36,6 +38,8 @@ const Button: FC<TProps> = ({
   disabled = false,
   ...restProps
 }) => {
+  const primaryColor = usePrimaryColor()
+
   if (loading) return <LavaLampLoading size="small" />
 
   switch (type) {
@@ -49,6 +53,7 @@ const Button: FC<TProps> = ({
           noBorder={noBorder}
           space={space}
           disabled={disabled}
+          primaryColor={primaryColor}
           {...restProps}
         >
           {children}
@@ -65,6 +70,7 @@ const Button: FC<TProps> = ({
           space={space}
           noBorder={noBorder}
           disabled={disabled}
+          primaryColor={primaryColor}
           {...restProps}
         >
           <ChildrenWrapper size={size} ghost={ghost} noBorder={noBorder}>
@@ -76,4 +82,4 @@ const Button: FC<TProps> = ({
   }
 }
 
-export default memo(Button)
+export default observer(Button)
diff --git a/src/widgets/Buttons/OrButton/HorizontalButton.tsx b/src/widgets/Buttons/OrButton/HorizontalButton.tsx
index debc7d137..f3a4ff66d 100755
--- a/src/widgets/Buttons/OrButton/HorizontalButton.tsx
+++ b/src/widgets/Buttons/OrButton/HorizontalButton.tsx
@@ -1,7 +1,9 @@
 import { FC } from 'react'
+import { observer } from 'mobx-react'
 
 import SIZE from '@/constant/size'
 import { buildLog } from '@/logger'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 
 import type { TProps as TButtonProps } from '.'
 import { Wrapper, LeftButton, OrSign, RightButton } from '../styles/or_button/horizontal_button'
@@ -25,12 +27,15 @@ const HorizontalButton: FC<TProps> = ({
     },
   ],
 }) => {
+  const primaryColor = usePrimaryColor()
+
   return (
     <Wrapper size={size}>
       <LeftButton
         size={size}
         active={group[0].key === activeKey}
         onClick={() => onClick(group[0].key)}
+        primaryColor={primaryColor}
       >
         {group[0].title}
       </LeftButton>
@@ -39,6 +44,7 @@ const HorizontalButton: FC<TProps> = ({
         size={size}
         active={group[1].key === activeKey}
         onClick={() => onClick(group[1].key)}
+        primaryColor={primaryColor}
       >
         {group[1].title}
       </RightButton>
@@ -46,4 +52,4 @@ const HorizontalButton: FC<TProps> = ({
   )
 }
 
-export default HorizontalButton
+export default observer(HorizontalButton)
diff --git a/src/widgets/Buttons/OrButton/VerticalButton.tsx b/src/widgets/Buttons/OrButton/VerticalButton.tsx
index 1f37e5341..656859853 100755
--- a/src/widgets/Buttons/OrButton/VerticalButton.tsx
+++ b/src/widgets/Buttons/OrButton/VerticalButton.tsx
@@ -1,7 +1,9 @@
 import { FC } from 'react'
+import { observer } from 'mobx-react'
 
 import SIZE from '@/constant/size'
 import { buildLog } from '@/logger'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 
 import type { TProps as TButtonProps } from '.'
 import { Wrapper, UpButton, OrSign, BottomButton } from '../styles/or_button/vertical_button'
@@ -25,12 +27,15 @@ const VerticalButton: FC<TProps> = ({
     },
   ],
 }) => {
+  const primaryColor = usePrimaryColor()
+
   return (
     <Wrapper>
       <UpButton
         size={size}
         active={group[0].key === activeKey}
         onClick={() => onClick(group[0].key)}
+        primaryColor={primaryColor}
       >
         {group[0].title}
       </UpButton>
@@ -39,6 +44,7 @@ const VerticalButton: FC<TProps> = ({
         size={size}
         active={group[1].key === activeKey}
         onClick={() => onClick(group[1].key)}
+        primaryColor={primaryColor}
       >
         {group[1].title}
       </BottomButton>
@@ -46,4 +52,4 @@ const VerticalButton: FC<TProps> = ({
   )
 }
 
-export default VerticalButton
+export default observer(VerticalButton)
diff --git a/src/widgets/Buttons/PublishButton/index.tsx b/src/widgets/Buttons/PublishButton/index.tsx
index 738ecc2ec..e40a28ecd 100755
--- a/src/widgets/Buttons/PublishButton/index.tsx
+++ b/src/widgets/Buttons/PublishButton/index.tsx
@@ -17,8 +17,9 @@ import SVG from '@/constant/svg'
 
 import Tooltip from '@/widgets/Tooltip'
 import { buildLog } from '@/logger'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 // import { authWarn } from '@/signal'
-import useAccount from '@/hooks/useAccount'
+// import useAccount from '@/hooks/useAccount'
 
 import { MORE_MENU } from './constant'
 import IconButton from '../IconButton'
@@ -53,13 +54,15 @@ const PublishButton: FC<TProps> = ({
   onMenuSelect = log,
   menuLeft = false,
 }) => {
+  const primaryColor = usePrimaryColor()
+
   const [show, setShow] = useState(false)
-  const accountInfo = useAccount()
+  // const accountInfo = useAccount()
 
   const menuOptions = MORE_MENU[mode]
   const hasNoMenu = isEmpty(menuOptions)
 
-  const offset = [5, 15]
+  const offset = [0, 15]
 
   return (
     <Wrapper>
@@ -87,6 +90,7 @@ const PublishButton: FC<TProps> = ({
           // const url = getTargetPage(community, thread)
           // Router.push(url)
         }}
+        primaryColor={primaryColor}
       >
         {mode === PUBLISH_MODE.DEFAULT && <PostLayout text={text} />}
         {mode === PUBLISH_MODE.SIDEBAR_LAYOUT_HEADER && <SidebarHeaderLayout text={text} />}
diff --git a/src/widgets/Buttons/ToggleSwitch.tsx b/src/widgets/Buttons/ToggleSwitch.tsx
index 790faad16..cf9b7de8b 100755
--- a/src/widgets/Buttons/ToggleSwitch.tsx
+++ b/src/widgets/Buttons/ToggleSwitch.tsx
@@ -1,7 +1,9 @@
-import { FC, memo } from 'react'
+import { FC } from 'react'
+import { observer } from 'mobx-react'
 
 import type { TSizeSM } from '@/spec'
 import SIZE from '@/constant/size'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 import { buildLog } from '@/logger'
 
 import { Wrapper, Track, Indicator, CheckIcon } from './styles/toggle_switch'
@@ -15,15 +17,17 @@ type TProps = {
 }
 
 const ToggleSwitch: FC<TProps> = ({ size = SIZE.SMALL, checked = false, onChange = log }) => {
+  const primaryColor = usePrimaryColor()
+
   return (
     <Wrapper onClick={() => onChange(!checked)} size={size}>
-      <Track checked={checked}>
-        <Indicator checked={checked}>
-          <CheckIcon checked={checked} />
+      <Track checked={checked} primaryColor={primaryColor}>
+        <Indicator checked={checked} primaryColor={primaryColor}>
+          <CheckIcon checked={checked} primaryColor={primaryColor} />
         </Indicator>
       </Track>
     </Wrapper>
   )
 }
 
-export default memo(ToggleSwitch)
+export default observer(ToggleSwitch)
diff --git a/src/widgets/Buttons/styles/arrow_button/arrow.ts b/src/widgets/Buttons/styles/arrow_button/arrow.ts
index 54a7ce413..e77bf9580 100644
--- a/src/widgets/Buttons/styles/arrow_button/arrow.ts
+++ b/src/widgets/Buttons/styles/arrow_button/arrow.ts
@@ -2,10 +2,7 @@ import styled from 'styled-components'
 
 // import Img from '@/Img'
 import type { TColorName } from '@/spec'
-import { COLOR_NAME } from '@/constant/colors'
-
-import css, { theme } from '@/css'
-import { camelize } from '@/fmt'
+import css, { primaryLink } from '@/css'
 
 import { Wrapper as ButtonWrapper } from '.'
 
@@ -50,7 +47,7 @@ const BaseArrow = styled.div<TArrow>`
     border-color: ${({ color, reverseColor }) => {
       if (reverseColor) return 'white'
 
-      return color === COLOR_NAME.BLACK ? theme('link') : theme(`baseColor.${camelize(color)}`)
+      return primaryLink(color)
     }};
     border-width: 0 1px 1px 0;
     padding: 3px;
diff --git a/src/widgets/Buttons/styles/arrow_button/index.ts b/src/widgets/Buttons/styles/arrow_button/index.ts
index 8633571ab..a46e72a64 100644
--- a/src/widgets/Buttons/styles/arrow_button/index.ts
+++ b/src/widgets/Buttons/styles/arrow_button/index.ts
@@ -1,10 +1,8 @@
 import styled from 'styled-components'
 
 import type { TSpace } from '@/spec'
-import { COLOR_NAME } from '@/constant/colors'
 
-import css, { theme } from '@/css'
-import { camelize } from '@/fmt'
+import css, { primaryLink } from '@/css'
 
 import type { TProps } from '../../ArrowButton'
 
@@ -20,7 +18,7 @@ export const Wrapper = styled.button<TWrapper>`
   color: ${({ color, reverseColor }) => {
     if (reverseColor) return 'white'
 
-    return color === COLOR_NAME.BLACK ? theme('link') : theme(`baseColor.${camelize(color)}`)
+    return primaryLink(color)
   }};
 
   border: none;
diff --git a/src/widgets/Buttons/styles/button.ts b/src/widgets/Buttons/styles/button.ts
index 364d83e35..665ad25ef 100755
--- a/src/widgets/Buttons/styles/button.ts
+++ b/src/widgets/Buttons/styles/button.ts
@@ -2,7 +2,7 @@ import styled from 'styled-components'
 
 import css, { theme } from '@/css'
 import { lighten } from '@/utils/color'
-import type { TSize, TButton, TSpace } from '@/spec'
+import type { TSize, TButton, TSpace, TPrimaryColor } from '@/spec'
 
 import {
   getColor,
@@ -14,7 +14,7 @@ import {
   getFontSize,
 } from './metircs/button'
 
-type TWrapper = TButton & TSpace
+type TWrapper = TButton & TSpace & TPrimaryColor
 export const Wrapper = styled.button<TWrapper>`
   ${css.row('align-both')};
   -webkit-appearance: button;
@@ -38,8 +38,10 @@ export const Wrapper = styled.button<TWrapper>`
   position: relative;
 
   color: ${({ ghost, disabled }) => getColor(ghost, disabled)};
-  background-color: ${({ ghost, disabled }) => getBackgroundColor(ghost, disabled)};
-  border-color: ${({ noBorder, disabled, ghost }) => getBorderColor(noBorder, disabled, ghost)};
+  background-color: ${({ ghost, disabled, primaryColor }) =>
+    getBackgroundColor(primaryColor, ghost, disabled)};
+  border-color: ${({ noBorder, disabled, ghost, primaryColor }) =>
+    getBorderColor(primaryColor, noBorder, disabled, ghost)};
 
   opacity: ${({ noBorder }) => (noBorder ? '0.8' : 1)};
 
@@ -59,11 +61,9 @@ export const Wrapper = styled.button<TWrapper>`
 
   &:hover {
     color: ${({ ghost, disabled }) => getColor(ghost, disabled)};
-    border-color: ${({ noBorder, disabled, ghost }) =>
-      getBorderColor(noBorder, disabled, ghost, true)};
-    background-color: ${({ ghost, disabled }) => getBackgroundColor(ghost, disabled, true)};
     opacity: 1;
     cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+    filter: saturate(0.9) brightness(1.1);
 
     &::before,
     &::after {
@@ -74,15 +74,13 @@ export const Wrapper = styled.button<TWrapper>`
 
   &:focus {
     color: ${({ ghost, disabled }) => getColor(ghost, disabled)};
-    border-color: ${({ noBorder, disabled, ghost }) =>
-      getBorderColor(noBorder, disabled, ghost, true)};
-    background-color: ${({ ghost, disabled }) => getBackgroundColor(ghost, disabled, true)};
+    filter: brightness(0.95);
     opacity: 1;
   }
 
   &:active {
     color: ${({ ghost, disabled }) => getColor(ghost, disabled)};
-    background-color: ${({ ghost, disabled }) => getBackgroundColor(ghost, disabled, true)};
+    filter: brightness(0.95);
     opacity: 1;
   }
 `
diff --git a/src/widgets/Buttons/styles/metircs/button.ts b/src/widgets/Buttons/styles/metircs/button.ts
index b481e2cbf..d9972702c 100755
--- a/src/widgets/Buttons/styles/metircs/button.ts
+++ b/src/widgets/Buttons/styles/metircs/button.ts
@@ -1,7 +1,7 @@
 import SIZE from '@/constant/size'
-import { theme } from '@/css'
+import { theme, primaryTheme } from '@/css'
 
-import type { TTheme } from '@/spec'
+import type { TColorName, TTheme } from '@/spec'
 
 export const getColor = (ghost: boolean, disabled: boolean): TTheme => {
   if (ghost) {
@@ -15,7 +15,12 @@ export const getColor = (ghost: boolean, disabled: boolean): TTheme => {
   return theme('button.fg')
 }
 
-export const getBackgroundColor = (ghost: boolean, disabled: boolean, hover = false): TTheme => {
+export const getBackgroundColor = (
+  primaryColor: TColorName,
+  ghost: boolean,
+  disabled: boolean,
+  hover = false,
+): TTheme => {
   if (ghost) {
     return 'transparent'
   }
@@ -23,10 +28,11 @@ export const getBackgroundColor = (ghost: boolean, disabled: boolean, hover = fa
     return theme('divider') // TODO:  same as dimOnIdle background
   }
 
-  return hover ? theme('button.hoverBg') : theme('button.primary')
+  return hover ? theme('button.hoverBg') : primaryTheme(primaryColor)
 }
 
 export const getBorderColor = (
+  primaryColor: TColorName,
   noBorder: boolean,
   disabled: boolean,
   ghost: boolean,
@@ -43,7 +49,7 @@ export const getBorderColor = (
     return hover ? theme('button.primary') : theme('button.ghostBorder')
   }
 
-  return hover ? theme('button.hoverBg') : theme('button.primary')
+  return hover ? theme('button.hoverBg') : primaryTheme(primaryColor)
 }
 
 export const getHeight = (size: string): string => {
diff --git a/src/widgets/Buttons/styles/publish_button/index.ts b/src/widgets/Buttons/styles/publish_button/index.ts
index 2712856af..14467ed11 100755
--- a/src/widgets/Buttons/styles/publish_button/index.ts
+++ b/src/widgets/Buttons/styles/publish_button/index.ts
@@ -1,8 +1,8 @@
 import styled from 'styled-components'
 
-import type { TSpace } from '@/spec'
+import type { TPrimaryColor, TSpace } from '@/spec'
 // import Img from '@/Img'
-import css from '@/css'
+import css, { theme, primaryTheme } from '@/css'
 
 import Button from '../../Button'
 // see example: https://codepen.io/mydearxym2/pen/qBEvvpo
@@ -11,14 +11,16 @@ export const Wrapper = styled.div`
   ${css.row('align-center')};
   width: 100%;
 `
-export const PubButton = styled(Button)<{ smaller?: boolean }>`
+
+type TPubButton = { smaller?: boolean } & TPrimaryColor
+export const PubButton = styled(Button)<TPubButton>`
   ${css.row('justify-between')};
   width: 100%;
 
   border: none;
   font-weight: 600;
-  background: #3b434a; // to-theme
-  color: white; // to-theme
+  background: ${({ primaryColor }) => primaryTheme(primaryColor)};
+  color: ${theme('button.fg')};
   height: ${({ smaller }) => (smaller ? '26px' : '33px')};
   border-radius: 15px;
 `
diff --git a/src/widgets/Buttons/styles/toggle_switch.ts b/src/widgets/Buttons/styles/toggle_switch.ts
index 5af0d424c..64fe1b687 100755
--- a/src/widgets/Buttons/styles/toggle_switch.ts
+++ b/src/widgets/Buttons/styles/toggle_switch.ts
@@ -1,10 +1,10 @@
 import styled from 'styled-components'
 
-import type { TSizeSM } from '@/spec'
+import type { TPrimaryColor, TSizeSM } from '@/spec'
 import SIZE from '@/constant/size'
 
-import HookSVG from '@/icons/Hook'
-import css, { theme } from '@/css'
+import HookSVG from '@/icons/CheckBold'
+import css, { theme, primaryTheme } from '@/css'
 
 export const Wrapper = styled.div<{ size: TSizeSM }>`
   ${css.row('align-center')};
@@ -12,11 +12,14 @@ export const Wrapper = styled.div<{ size: TSizeSM }>`
 
   transform: ${({ size }) => (size === SIZE.SMALL ? 'scale(0.6)' : 'scale(1)')};
 `
-export const Track = styled.span<{ checked: boolean }>`
-  background: ${({ checked }) => (checked ? theme('article.title') : theme('divider'))};
+type TTrack = { checked: boolean } & TPrimaryColor
+export const Track = styled.span<TTrack>`
+  background: ${({ checked, primaryColor }) =>
+    checked ? primaryTheme(primaryColor) : theme('divider')};
   border-radius: 20px;
   border: 2px solid;
-  border-color: ${({ checked }) => (checked ? theme('article.digest') : theme('divider'))};
+  border-color: ${({ checked, primaryColor }) =>
+    checked ? primaryTheme(primaryColor) : theme('divider')};
   cursor: pointer;
   display: flex;
   height: 30px;
@@ -26,7 +29,7 @@ export const Track = styled.span<{ checked: boolean }>`
   box-shadow: 0 0 10px 0 rgb(185 185 185 / 25%) inset;
   transition: 0.5s;
 `
-export const Indicator = styled.span<{ checked: boolean }>`
+export const Indicator = styled.span<TTrack>`
   width: 68px;
   height: 26px;
   border-radius: 20px;
@@ -36,9 +39,9 @@ export const Indicator = styled.span<{ checked: boolean }>`
   transition: 0.5s;
   box-shadow: 0 0 10px 3px rgb(0, 0, 0, 0.1);
 `
-export const CheckIcon = styled(HookSVG)<{ checked: boolean }>`
-  fill: ${theme('article.title')};
-  ${css.size(14)};
+export const CheckIcon = styled(HookSVG)<TTrack>`
+  fill: ${({ primaryColor }) => primaryTheme(primaryColor)};
+  ${css.size(15)};
   margin-left: 6px;
   opacity: ${({ checked }) => (checked ? 1 : 0)};
   transition: opacity 0.3s ease-in-out;
diff --git a/src/widgets/Checker/index.tsx b/src/widgets/Checker/index.tsx
index 7ef5323d9..847072ff0 100755
--- a/src/widgets/Checker/index.tsx
+++ b/src/widgets/Checker/index.tsx
@@ -5,6 +5,7 @@
  */
 
 import { FC, ReactNode, memo } from 'react'
+import { observer } from 'mobx-react'
 
 import type { TSizeSM, TSpace } from '@/spec'
 import SIZE from '@/constant/size'
@@ -55,4 +56,4 @@ const Checker: FC<TProps> = ({
   )
 }
 
-export default memo(Checker)
+export default observer(Checker)
diff --git a/src/widgets/CustomScroller/VerticalScroller.tsx b/src/widgets/CustomScroller/VerticalScroller.tsx
index 4dd434f79..c5f416091 100755
--- a/src/widgets/CustomScroller/VerticalScroller.tsx
+++ b/src/widgets/CustomScroller/VerticalScroller.tsx
@@ -85,7 +85,6 @@ const VerticalScroller: FC<TProps> = ({
     callbacks: {
       onScroll: debounce(() => {
         const position = scrollInstance?.scroll().position
-        console.log('## 111')
         if (position) {
           const currentY = position.y
 
diff --git a/src/widgets/ExtraLinks/HeaderTemplate.tsx b/src/widgets/ExtraLinks/HeaderTemplate.tsx
index 33166d8e1..fc659eb5a 100644
--- a/src/widgets/ExtraLinks/HeaderTemplate.tsx
+++ b/src/widgets/ExtraLinks/HeaderTemplate.tsx
@@ -1,9 +1,11 @@
 import { FC, Fragment } from 'react'
+import { observer } from 'mobx-react'
 import { keys, startsWith } from 'ramda'
 import { useAutoAnimate } from '@formkit/auto-animate/react'
 
 import type { TLinkItem } from '@/spec'
 import { MORE_GROUP, ONE_LINK_GROUP } from '@/constant/dashboard'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 import { sortByIndex, groupByKey } from '@/helper'
 
 import Tooltip from '@/widgets/Tooltip'
@@ -13,6 +15,8 @@ import type { TProps, TLinkGroup } from './spec'
 import { Wrapper, LinkItem, GroupItem, ArrowIcon, MenuPanel } from './styles/header_template'
 
 const LinkGroup: FC<TLinkGroup> = ({ groupTitle, links, showMoreFold }) => {
+  const primaryColor = usePrimaryColor()
+
   if (!showMoreFold) return null
 
   return (
@@ -20,7 +24,7 @@ const LinkGroup: FC<TLinkGroup> = ({ groupTitle, links, showMoreFold }) => {
       content={
         <MenuPanel>
           {links.map((item: TLinkItem) => (
-            <LinkItem key={item.index} href={item.link}>
+            <LinkItem key={item.index} href={item.link} primaryColor={primaryColor}>
               {item.title}
             </LinkItem>
           ))}
@@ -38,6 +42,7 @@ const LinkGroup: FC<TLinkGroup> = ({ groupTitle, links, showMoreFold }) => {
 }
 
 const ExtraLinks: FC<TProps> = ({ links }) => {
+  const primaryColor = usePrimaryColor()
   const [animateRef] = useAutoAnimate()
 
   // @ts-ignore
@@ -54,7 +59,9 @@ const ExtraLinks: FC<TProps> = ({ links }) => {
         return (
           <Fragment key={groupTitle}>
             {startsWith(ONE_LINK_GROUP, groupTitle) ? (
-              <LinkItem href={curGroupLinks[0].link}>{curGroupLinks[0].title}</LinkItem>
+              <LinkItem href={curGroupLinks[0].link} primaryColor={primaryColor}>
+                {curGroupLinks[0].title}
+              </LinkItem>
             ) : (
               <LinkGroup
                 groupTitle={groupTitle}
@@ -69,4 +76,4 @@ const ExtraLinks: FC<TProps> = ({ links }) => {
   )
 }
 
-export default ExtraLinks
+export default observer(ExtraLinks)
diff --git a/src/widgets/ExtraLinks/SimpleLayout.tsx b/src/widgets/ExtraLinks/SimpleLayout.tsx
index 871ac34e4..4af82fa75 100644
--- a/src/widgets/ExtraLinks/SimpleLayout.tsx
+++ b/src/widgets/ExtraLinks/SimpleLayout.tsx
@@ -7,6 +7,7 @@ import { MORE_GROUP, ONE_LINK_GROUP } from '@/constant/dashboard'
 import { sortByIndex, groupByKey } from '@/helper'
 import useAccount from '@/hooks/useAccount'
 import useViewingCommunity from '@/hooks/useViewingCommunity'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 
 import Tooltip from '@/widgets/Tooltip'
 
@@ -17,6 +18,7 @@ import { Wrapper, LinkItem, GroupItem, ArrowIcon, MenuPanel } from './styles/sim
 const LinkGroup: FC<TLinkGroup> = ({ groupTitle, links, showMoreFold, activePath }) => {
   const [menuOpen, setMenuOpen] = useState(false)
   const { slug } = useViewingCommunity()
+  const primaryColor = usePrimaryColor()
 
   if (!showMoreFold) return null
 
@@ -29,6 +31,7 @@ const LinkGroup: FC<TLinkGroup> = ({ groupTitle, links, showMoreFold, activePath
               key={item.index}
               href={item.link}
               $active={`/${slug}/${activePath}` === item.link}
+              primaryColor={primaryColor}
             >
               {item.title}
             </LinkItem>
@@ -51,6 +54,7 @@ const LinkGroup: FC<TLinkGroup> = ({ groupTitle, links, showMoreFold, activePath
 
 const ExtraLinks: FC<TProps> = ({ links, activePath = '' }) => {
   const { isModerator } = useAccount()
+  const primaryColor = usePrimaryColor()
 
   const _links = filter((item) => item.title !== '', links)
 
@@ -68,7 +72,9 @@ const ExtraLinks: FC<TProps> = ({ links, activePath = '' }) => {
         return (
           <Fragment key={groupTitle}>
             {startsWith(ONE_LINK_GROUP, groupTitle) ? (
-              <LinkItem href={curGroupLinks[0].link}>{curGroupLinks[0].title}</LinkItem>
+              <LinkItem href={curGroupLinks[0].link} primaryColor={primaryColor}>
+                {curGroupLinks[0].title}
+              </LinkItem>
             ) : (
               <LinkGroup
                 groupTitle={groupTitle}
diff --git a/src/widgets/ExtraLinks/styles/index.ts b/src/widgets/ExtraLinks/styles/index.ts
index 0d8fd9847..5cc3eeeb0 100644
--- a/src/widgets/ExtraLinks/styles/index.ts
+++ b/src/widgets/ExtraLinks/styles/index.ts
@@ -1,24 +1,27 @@
 import styled from 'styled-components'
 import Link from 'next/link'
 
-import type { TActive } from '@/spec'
-import css, { theme } from '@/css'
+import type { TActive, TPrimaryColor } from '@/spec'
+import css, { theme, primaryTheme } from '@/css'
 import ArrowSVG from '@/icons/ArrowSimple'
 
 export const Wrapper = styled.div`
   ${css.row('align-center')};
 `
-export const LinkItem = styled(Link)<TActive>`
-  color: ${({ $active }) => ($active ? theme('article.title') : theme('article.digest'))};
+type TLinkItem = TActive & TPrimaryColor
+
+export const LinkItem = styled(Link)<TLinkItem>`
+  color: ${({ $active, primaryColor }) =>
+    $active ? primaryTheme(primaryColor) : theme('article.digest')};
   background: ${({ $active }) => ($active ? theme('hoverBg') : '')};
 
   text-decoration: none;
-  display: block;
+  display: flex;
   padding: 2px 8px;
   border-radius: 3px;
 
   &:hover {
-    color: ${theme('article.title')};
+    color: ${({ primaryColor }) => primaryTheme(primaryColor)};
     background: ${theme('hoverBg')};
     text-decoration: none;
     cursor: pointer;
diff --git a/src/widgets/ExtraLinks/styles/simple_layout.ts b/src/widgets/ExtraLinks/styles/simple_layout.ts
index a30fd39a3..b1eddb1b5 100644
--- a/src/widgets/ExtraLinks/styles/simple_layout.ts
+++ b/src/widgets/ExtraLinks/styles/simple_layout.ts
@@ -13,11 +13,10 @@ export const Wrapper = styled(WrapperBase)`
 export const LinkItem = styled(LinkItemBase)`
   font-size: 14px;
 `
-
 export const GroupItem = styled(LinkItem)<TActive>`
   ${css.row('align-center')};
   position: relative;
-  margin-right: 5px;
+  padding-right: 22px;
   background: ${({ $active }) => ($active ? theme('hoverBg') : theme(''))};
 
   &:hover {
@@ -27,5 +26,5 @@ export const GroupItem = styled(LinkItem)<TActive>`
 export const ArrowIcon = styled(ArrowIconBase)`
   position: absolute;
   ${css.size(14)};
-  right: -10px;
+  right: 8px;
 `
diff --git a/src/widgets/FileTree/FileItem.tsx b/src/widgets/FileTree/FileItem.tsx
index 8fbb2fd94..13211728e 100644
--- a/src/widgets/FileTree/FileItem.tsx
+++ b/src/widgets/FileTree/FileItem.tsx
@@ -1,8 +1,10 @@
 import { FC } from 'react'
+import { observer } from 'mobx-react'
 
 import type { TTag } from '@/spec'
 import { cutRest } from '@/fmt'
 import { Trans } from '@/i18n'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 
 import Outline from './Outline'
 // import DotDivider from '@/widgets/DotDivider'
@@ -17,15 +19,19 @@ type TProps = {
 }
 
 const FileItem: FC<TProps> = ({ tag, active, onSelect }) => {
+  const primaryColor = usePrimaryColor()
+
   return (
     <Wrapper $active={active}>
       <File $active={active} color={tag.color} onClick={() => onSelect(tag)}>
-        <Title $active={active}>{cutRest(Trans(tag.title), 10)}</Title>
+        <Title $active={active} primaryColor={primaryColor}>
+          {cutRest(Trans(tag.title), 10)}
+        </Title>
       </File>
       {active && <Outline />}
-      {active && <IndexDot />}
+      {active && <IndexDot primaryColor={primaryColor} />}
     </Wrapper>
   )
 }
 
-export default FileItem
+export default observer(FileItem)
diff --git a/src/widgets/FileTree/Outline.tsx b/src/widgets/FileTree/Outline.tsx
index fe25a6701..a0faa4fd1 100644
--- a/src/widgets/FileTree/Outline.tsx
+++ b/src/widgets/FileTree/Outline.tsx
@@ -1,4 +1,7 @@
 import { FC } from 'react'
+import { observer } from 'mobx-react'
+
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 
 import { Wrapper, Item } from './styles/outline'
 
@@ -21,10 +24,12 @@ const items = [
 ]
 
 const Outline: FC = () => {
+  const primaryColor = usePrimaryColor()
+
   return (
     <Wrapper>
       {items.map((item) => (
-        <Item key={item.id} $active={item.active}>
+        <Item key={item.id} $active={item.active} primaryColor={primaryColor}>
           {item.title}
         </Item>
       ))}
@@ -32,4 +37,4 @@ const Outline: FC = () => {
   )
 }
 
-export default Outline
+export default observer(Outline)
diff --git a/src/widgets/FileTree/styles/file_item.ts b/src/widgets/FileTree/styles/file_item.ts
index 0a92c3460..48ef93298 100644
--- a/src/widgets/FileTree/styles/file_item.ts
+++ b/src/widgets/FileTree/styles/file_item.ts
@@ -1,9 +1,9 @@
 import styled from 'styled-components'
 
-import type { TActive } from '@/spec'
+import type { TActive, TPrimaryColor } from '@/spec'
 import Img from '@/Img'
 // import HashTagSVG from '@/icons/HashTag'
-import css, { theme } from '@/css'
+import css, { theme, primaryTheme } from '@/css'
 
 import { TagsWrapper } from '.'
 
@@ -41,15 +41,16 @@ export const File = styled.div<TTag>`
 
   transition: all 0.1s;
 `
-export const Title = styled.div<TActive>`
-  color: ${theme('tags.text')};
-  filter: saturate(0);
-  font-weight: ${({ $active }) => ($active ? 600 : 400)};
+type TTitle = TActive & TPrimaryColor
+export const Title = styled.div<TTitle>`
+  color: ${({ $active, primaryColor }) =>
+    $active ? primaryTheme(primaryColor) : theme('tags.text')};
+  font-weight: ${({ $active }) => ($active ? 500 : 400)};
   ${css.lineClamp(2)};
 
   ${Wrapper}:hover & {
     font-weight: 500;
-    filter: saturate(1);
+    color: ${({ primaryColor }) => primaryTheme(primaryColor)};
   }
 `
 export const RawWrapper = styled.div<TActive>`
@@ -79,10 +80,12 @@ export const CountInfoWrapper = styled.div`
   transition-delay: 0.5s;
 `
 
-export const IndexDot = styled.div`
+export const IndexDot = styled.div<TPrimaryColor>`
   position: absolute;
   left: -12px;
   top: 14px;
-  background-color: ${theme('article.digest')};
+  background-color: ${theme('hint')};
+  background-color: ${({ primaryColor }) => primaryTheme(primaryColor)};
   ${css.circle(5)};
+  opacity: 0.65;
 `
diff --git a/src/widgets/FileTree/styles/outline.ts b/src/widgets/FileTree/styles/outline.ts
index fb5056703..1c9007319 100644
--- a/src/widgets/FileTree/styles/outline.ts
+++ b/src/widgets/FileTree/styles/outline.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
-import type { TActive } from '@/spec'
-import css, { theme } from '@/css'
+import type { TActive, TPrimaryColor } from '@/spec'
+import css, { theme, primaryTheme } from '@/css'
 
 // import Img from '@/Img'
 
@@ -12,18 +12,21 @@ export const Wrapper = styled.div`
   margin-bottom: 5px;
   margin-left: 6px;
 `
-export const Item = styled.div<TActive>`
+type TItem = TActive & TPrimaryColor
+export const Item = styled.div<TItem>`
   ${css.lineClamp(1)};
   padding-left: 14px;
   position: relative;
   padding-top: 5px;
   padding-bottom: 4px;
-  color: ${({ $active }) => ($active ? theme('article.title') : theme('article.digest'))};
-  font-weight: ${({ $active }) => ($active ? 600 : 400)};
+  color: ${({ $active, primaryColor }) =>
+    $active ? primaryTheme(primaryColor) : theme('article.digest')};
+  font-weight: ${({ $active }) => ($active ? 500 : 400)};
   border-left: 1px solid transparent;
-  border-left-color: ${({ $active }) => ($active ? theme('article.title') : theme('divider'))};
+  border-left-color: ${({ $active, primaryColor }) =>
+    $active ? primaryTheme(primaryColor) : theme('divider')};
 
   &:hover {
-    color: ${theme('article.title')};
+    color: ${({ primaryColor }) => primaryTheme(primaryColor)};
   }
 `
diff --git a/src/widgets/Loading/CommentLoading.tsx b/src/widgets/Loading/CommentLoading.tsx
index 9936f1dae..79dbbccf9 100755
--- a/src/widgets/Loading/CommentLoading.tsx
+++ b/src/widgets/Loading/CommentLoading.tsx
@@ -15,14 +15,7 @@ const CommentLoading: FC = () => {
 
   return (
     <LoadingWrapper>
-      <ContentLoader
-        height={60}
-        width={400}
-        speed={2}
-        backgroundColor={theme.loading.basic}
-        // primaryColor={theme.loading.basic}
-        // secondaryColor={theme.loading.animate}
-      >
+      <ContentLoader height={60} width={400} speed={2} backgroundColor={theme.loading.basic}>
         <rect x="35" y="6" rx="4" ry="4" width="117" height="5.25" />
         <rect x="37" y="20" rx="3" ry="3" width="85" height="5.25" />
         <rect x="37" y="37.68" rx="3" ry="3" width="318.5" height="4.6" />
diff --git a/src/widgets/Loading/EditorLoading.tsx b/src/widgets/Loading/EditorLoading.tsx
index d92207254..038342fae 100755
--- a/src/widgets/Loading/EditorLoading.tsx
+++ b/src/widgets/Loading/EditorLoading.tsx
@@ -12,14 +12,7 @@ const LoadingWrapper = styled.div`
 `
 
 const Loading = ({ theme }) => (
-  <ContentLoader
-    height={500}
-    width={500}
-    speed={2}
-    backgroundColor={theme.loading.basic}
-    // primaryColor={theme.loading.basic}
-    // secondaryColor={theme.loading.animate}
-  >
+  <ContentLoader height={500} width={500} speed={2} backgroundColor={theme.loading.basic}>
     <rect x="7.39" y="18" rx="4" ry="4" width="76" height="9.88" />
     <rect x="3" y="49" rx="5" ry="5" width="396" height="372" />
     <rect x="309.92" y="20.05" rx="0" ry="0" width="81" height="7.98" />
diff --git a/src/widgets/Loading/LavaLampLoading.tsx b/src/widgets/Loading/LavaLampLoading.tsx
index 8e8e45f3a..96dc30771 100755
--- a/src/widgets/Loading/LavaLampLoading.tsx
+++ b/src/widgets/Loading/LavaLampLoading.tsx
@@ -1,7 +1,9 @@
-import { FC, memo } from 'react'
+import { FC } from 'react'
+import { observer } from 'mobx-react'
 import { range, merge } from 'ramda'
 
 import type { TSpace, TSizeTSM } from '@/spec'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 import SIZE from '@/constant/size'
 
 import { Wrapper, Container, Circle } from './styles/lava_lamp_loading'
@@ -9,6 +11,8 @@ import { Wrapper, Container, Circle } from './styles/lava_lamp_loading'
 type TProps = TSpace & { size?: TSizeTSM }
 
 const LavaLampLoading: FC<TProps> = (props) => {
+  const primaryColor = usePrimaryColor()
+
   const { size } = props
   const _props = merge({ size: size || SIZE.MEDIUM }, props)
 
@@ -16,11 +20,11 @@ const LavaLampLoading: FC<TProps> = (props) => {
     <Wrapper {..._props}>
       <Container>
         {range(0, 9).map((num) => (
-          <Circle key={num} index={num} />
+          <Circle key={num} index={num} primaryColor={primaryColor} />
         ))}
       </Container>
     </Wrapper>
   )
 }
 
-export default memo(LavaLampLoading)
+export default observer(LavaLampLoading)
diff --git a/src/widgets/Loading/PostItemLoading.tsx b/src/widgets/Loading/PostItemLoading.tsx
index a595e265c..2844cda70 100755
--- a/src/widgets/Loading/PostItemLoading.tsx
+++ b/src/widgets/Loading/PostItemLoading.tsx
@@ -18,14 +18,7 @@ const LoadingWrapper = styled.div`
 `
 
 const LoadingItem = ({ theme }) => (
-  <ContentLoader
-    height={70}
-    width={500}
-    speed={2}
-    backgroundColor={theme.loading.basic}
-    // primaryColor={theme.loading.basic}
-    // secondaryColor={theme.loading.animate}
-  >
+  <ContentLoader height={70} width={500} speed={2} backgroundColor={theme.loading.basic}>
     <rect x="38" y="5.58" rx="4" ry="4" width="195.55" height="8.69" />
     <rect x="38" y="19.93" rx="3" ry="3" width="130.05" height="5.36" />
     <rect x="38" y="35.16" rx="3" ry="3" width="454.96" height="6.05" />
diff --git a/src/widgets/Loading/styles/lava_lamp_loading.ts b/src/widgets/Loading/styles/lava_lamp_loading.ts
index 77f3f6bbc..6b0d0b617 100755
--- a/src/widgets/Loading/styles/lava_lamp_loading.ts
+++ b/src/widgets/Loading/styles/lava_lamp_loading.ts
@@ -1,8 +1,8 @@
 import styled, { keyframes } from 'styled-components'
 
-import type { TSpace, TSizeTSM } from '@/spec'
+import type { TSpace, TSizeTSM, TPrimaryColor } from '@/spec'
 import { getRandomInt } from '@/helper'
-import css, { theme } from '@/css'
+import css, { primaryTheme } from '@/css'
 
 import { getLavaLampScale } from './metric'
 
@@ -48,9 +48,10 @@ const speedMap = {
   9: 0.3,
 }
 
-export const Circle = styled.span<{ index: number }>`
+type TCircle = { index: number } & TPrimaryColor
+export const Circle = styled.span<TCircle>`
   ${css.circle(3)};
-  background-color: ${theme('article.digest')};
+  background-color: ${({ primaryColor }) => primaryTheme(primaryColor)};
   animation: ${move} 1s linear 0ms infinite;
   /* animation-duration: ${() => `${speed[getRandomInt(0, speed.length - 1)]}s`}; */
   width: ${({ index }) => (index === 2 || index === 6 ? '15px' : '4px')};
diff --git a/src/widgets/Switcher/Radio.tsx b/src/widgets/Switcher/Radio.tsx
index 24e0ef645..63adccfe6 100755
--- a/src/widgets/Switcher/Radio.tsx
+++ b/src/widgets/Switcher/Radio.tsx
@@ -5,8 +5,10 @@
  */
 
 import { FC, memo } from 'react'
+import { observer } from 'mobx-react'
 
 import type { TSizeSM, TSpace } from '@/spec'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 import { buildLog } from '@/logger'
 import SIZE from '@/constant/size'
 
@@ -35,6 +37,8 @@ const Radio: FC<TProps> = ({
   onChange = log,
   ...restProps
 }) => {
+  const primaryColor = usePrimaryColor()
+
   return (
     <Wrapper testid="radio" {...restProps}>
       {items.map((item) => (
@@ -44,6 +48,7 @@ const Radio: FC<TProps> = ({
           onClick={() => onChange?.(item)}
           dimOnActive={item.dimOnActive}
           size={size}
+          primaryColor={primaryColor}
         >
           {item.value}
         </Label>
diff --git a/src/widgets/Switcher/Tabs/DesktopView.tsx b/src/widgets/Switcher/Tabs/DesktopView.tsx
index d424f4d10..c494d3c0e 100755
--- a/src/widgets/Switcher/Tabs/DesktopView.tsx
+++ b/src/widgets/Switcher/Tabs/DesktopView.tsx
@@ -4,11 +4,13 @@
  *
  */
 
-import { FC, useEffect, useRef, useState, useCallback, memo } from 'react'
+import { FC, useEffect, useRef, useState, useCallback } from 'react'
+import { observer } from 'mobx-react'
 import { isEmpty, findIndex, pluck, includes } from 'ramda'
 import useMobileDetect from '@groupher/use-mobile-detect-hook'
 
 import type { TSizeSM, TTabItem, TC11NLayout } from '@/spec'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 import SIZE from '@/constant/size'
 import C11N from '@/constant/c11n'
 
@@ -71,6 +73,7 @@ const Tabs: FC<TProps> = ({
   noAnimation = false,
 }) => {
   const { isMobile } = useMobileDetect()
+  const primaryColor = usePrimaryColor()
 
   const defaultActiveTabIndex = getDefaultActiveTabIndex(items, activeKey)
   // @ts-ignore
@@ -144,7 +147,7 @@ const Tabs: FC<TProps> = ({
             slipHeight={slipHeight}
             noAnimation={noAnimation}
           >
-            <RealBar width={`${slipWidth}px`} />
+            <RealBar width={`${slipWidth}px`} primaryColor={primaryColor} />
           </SlipBar>
         )}
       </Nav>
@@ -152,4 +155,4 @@ const Tabs: FC<TProps> = ({
   )
 }
 
-export default memo(Tabs)
+export default observer(Tabs)
diff --git a/src/widgets/Switcher/Tabs/MobileView/NormalView.tsx b/src/widgets/Switcher/Tabs/MobileView/NormalView.tsx
index ae36bc147..3945ae70c 100755
--- a/src/widgets/Switcher/Tabs/MobileView/NormalView.tsx
+++ b/src/widgets/Switcher/Tabs/MobileView/NormalView.tsx
@@ -4,10 +4,12 @@
  *
  */
 
-import { FC, useEffect, useRef, useState, useCallback, memo } from 'react'
+import { FC, useEffect, useRef, useState, useCallback } from 'react'
+import { observer } from 'mobx-react'
 import { isEmpty, findIndex } from 'ramda'
 
 import type { TSizeSM, TTabItem } from '@/spec'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 import { ICON } from '@/config'
 import SIZE from '@/constant/size'
 import { isString } from '@/validator'
@@ -71,6 +73,7 @@ const MobileView: FC<TProps> = ({
   slipHeight = '2px',
   toggleExpand,
 }) => {
+  const primaryColor = usePrimaryColor()
   const isMobile = true
 
   const defaultActiveTabIndex = getDefaultActiveTabIndex(items, activeKey)
@@ -156,11 +159,11 @@ const MobileView: FC<TProps> = ({
           slipHeight={slipHeight}
         >
           {/* mobile tab slipbar looks shorter than the desktop one */}
-          <RealBar width={`${slipWidth - 11}px`} />
+          <RealBar width={`${slipWidth - 11}px`} primaryColor={primaryColor} />
         </SlipBar>
       </Nav>
     </Wrapper>
   )
 }
 
-export default memo(MobileView)
+export default observer(MobileView)
diff --git a/src/widgets/Switcher/Tabs/ModelineView.tsx b/src/widgets/Switcher/Tabs/ModelineView.tsx
index f3aaa719d..5e3eb2b44 100755
--- a/src/widgets/Switcher/Tabs/ModelineView.tsx
+++ b/src/widgets/Switcher/Tabs/ModelineView.tsx
@@ -4,11 +4,13 @@
  *
  */
 
-import { FC, useEffect, useRef, useState, useCallback, memo } from 'react'
+import { FC, useEffect, useRef, useState, useCallback } from 'react'
+import { observer } from 'mobx-react'
 import { isEmpty, findIndex } from 'ramda'
 import useMobileDetect from '@groupher/use-mobile-detect-hook'
 
 import type { TSizeSM, TTabItem } from '@/spec'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 import SIZE from '@/constant/size'
 import { isString } from '@/validator'
 import { buildLog } from '@/logger'
@@ -62,6 +64,7 @@ const ModelineView: FC<TProps> = ({
   slipHeight = '2px',
 }) => {
   const { isMobile } = useMobileDetect()
+  const primaryColor = usePrimaryColor()
 
   const defaultActiveTabIndex = getDefaultActiveTabIndex(items, activeKey)
 
@@ -131,11 +134,11 @@ const ModelineView: FC<TProps> = ({
           slipHeight={slipHeight}
         >
           {/* mobile tab slipbar looks shorter than the desktop one */}
-          <RealBar width={`${slipWidth - 11}px`} />
+          <RealBar width={`${slipWidth - 11}px`} primaryColor={primaryColor} />
         </SlipBar>
       </Nav>
     </Wrapper>
   )
 }
 
-export default memo(ModelineView)
+export default observer(ModelineView)
diff --git a/src/widgets/Switcher/Tabs/TabItem.tsx b/src/widgets/Switcher/Tabs/TabItem.tsx
index 3132c4a9e..2078db397 100755
--- a/src/widgets/Switcher/Tabs/TabItem.tsx
+++ b/src/widgets/Switcher/Tabs/TabItem.tsx
@@ -4,9 +4,11 @@
  *
  */
 
-import { FC, useEffect, useCallback, useRef, memo } from 'react'
+import { FC, useEffect, useCallback, useRef } from 'react'
+import { observer } from 'mobx-react'
 
 import type { TSizeSM, TTabItem } from '@/spec'
+import usePrimaryColor from '@/hooks/usePrimaryColor'
 import { Trans } from '@/i18n'
 import { isString } from '@/validator'
 import { buildLog } from '@/logger'
@@ -45,6 +47,8 @@ const TabItem: FC<TProps> = ({
   onClick,
   setItemWidth,
 }) => {
+  const primaryColor = usePrimaryColor()
+
   const ref = useRef(null)
   const clickableRef = useRef(null)
   const activeRef = useRef(null)
@@ -99,6 +103,7 @@ const TabItem: FC<TProps> = ({
         active={item.slug === activeKey}
         size={size}
         bottomSpace={bottomSpace}
+        primaryColor={primaryColor}
       >
         {!isString(item) && (item.icon || item.localIcon) && (
           <TabIcon item={item} clickableRef={clickableRef} active={item.slug === activeKey} />
@@ -117,4 +122,4 @@ const TabItem: FC<TProps> = ({
   )
 }
 
-export default memo(TabItem)
+export default observer(TabItem)
diff --git a/src/widgets/Switcher/styles/metric/radio.ts b/src/widgets/Switcher/styles/metric/radio.ts
index 04a9093fc..4b7a23bcc 100755
--- a/src/widgets/Switcher/styles/metric/radio.ts
+++ b/src/widgets/Switcher/styles/metric/radio.ts
@@ -1,10 +1,10 @@
-import { theme } from '@/css'
+import { theme, primaryTheme } from '@/css'
 import SIZE from '@/constant/size'
 
-import type { TTheme } from '@/spec'
+import type { TColorName, TTheme } from '@/spec'
 
-export const getActiveBackground = (dimOnActive: boolean): TTheme => {
-  return dimOnActive ? theme('divider') : theme('button.primary')
+export const getActiveBackground = (dimOnActive: boolean, primaryColor: TColorName): TTheme => {
+  return dimOnActive ? theme('divider') : primaryTheme(primaryColor, 'button.primary')
 }
 
 export const getLabelColor = (checked: boolean, dimOnActive: boolean): TTheme => {
@@ -16,7 +16,7 @@ export const getLabelColor = (checked: boolean, dimOnActive: boolean): TTheme =>
 export const getLabelFontsize = (size: string): string => {
   switch (size) {
     case SIZE.SMALL: {
-      return '11px'
+      return '12px'
     }
 
     default: {
@@ -28,7 +28,7 @@ export const getLabelFontsize = (size: string): string => {
 export const getRadioBoxSize = (size: string): string => {
   switch (size) {
     case SIZE.SMALL: {
-      return '11px'
+      return '12px'
     }
 
     default: {
@@ -40,7 +40,7 @@ export const getRadioBoxSize = (size: string): string => {
 export const getRadioBoxTop = (size: string): string => {
   switch (size) {
     case SIZE.SMALL: {
-      return '3px'
+      return '5px'
     }
 
     default: {
diff --git a/src/widgets/Switcher/styles/radio.ts b/src/widgets/Switcher/styles/radio.ts
index 7814c4215..994c50e6b 100755
--- a/src/widgets/Switcher/styles/radio.ts
+++ b/src/widgets/Switcher/styles/radio.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
-import type { TTestable, TSpace } from '@/spec'
-import css, { theme } from '@/css'
+import type { TTestable, TSpace, TPrimaryColor } from '@/spec'
+import css, { theme, primaryTheme } from '@/css'
 
 import {
   getActiveBackground,
@@ -12,12 +12,6 @@ import {
   getRadioBoxLeft,
 } from './metric/radio'
 
-type TLabel = {
-  size: string
-  checked: boolean
-  dimOnActive: boolean
-}
-
 type TWrapper = TTestable & TSpace
 
 export const Wrapper = styled.div.attrs<TTestable>(({ testid }) => ({
@@ -27,20 +21,26 @@ export const Wrapper = styled.div.attrs<TTestable>(({ testid }) => ({
 
   ${(props) => css.spaceMargins(props)};
 `
+type TLabel = {
+  size: string
+  checked: boolean
+  dimOnActive: boolean
+} & TPrimaryColor
+
 export const Label = styled.label<TLabel>`
   position: relative;
   font-size: ${({ size }) => getLabelFontsize(size)};
   margin-right: ${({ checked }) => (checked ? '16px' : '8px')};
   padding-left: ${({ checked }) => (checked ? '14px' : '24px')};
-  font-weight: ${({ checked }) => (checked ? 'bold' : 'normal')};
+  font-weight: ${({ checked }) => (checked ? 600 : 400)};
 
   padding-right: 14px;
-  padding-top: 1px;
-  padding-bottom: 1px;
+  padding-top: 2px;
+  padding-bottom: 2px;
   cursor: pointer;
 
-  background: ${({ checked, dimOnActive }) =>
-    checked ? getActiveBackground(dimOnActive) : 'transparent'};
+  background: ${({ checked, dimOnActive, primaryColor }) =>
+    checked ? getActiveBackground(dimOnActive, primaryColor) : 'transparent'};
   color: ${({ checked, dimOnActive }) => getLabelColor(checked, dimOnActive)};
   border-radius: 15px;
 
@@ -55,7 +55,8 @@ export const Label = styled.label<TLabel>`
     width: ${({ size }) => getRadioBoxSize(size)};
     height: ${({ size }) => getRadioBoxSize(size)};
     border: 2px solid;
-    border-color: ${({ checked }) => (checked ? theme('button.fg') : theme('article.title'))};
+    border-color: ${({ checked, primaryColor }) =>
+      checked ? theme('button.fg') : primaryTheme(primaryColor)};
     border-radius: 50%;
   }
 
diff --git a/src/widgets/Switcher/styles/tabs/index.ts b/src/widgets/Switcher/styles/tabs/index.ts
index 5e5e22dfa..b556d5d4d 100755
--- a/src/widgets/Switcher/styles/tabs/index.ts
+++ b/src/widgets/Switcher/styles/tabs/index.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
-import type { TTestable } from '@/spec'
-import css, { theme } from '@/css'
+import type { TTestable, TPrimaryColor } from '@/spec'
+import css, { primaryTheme } from '@/css'
 
 type TSlipBar = {
   slipHeight: string
@@ -41,12 +41,12 @@ export const SlipBar = styled.span<TSlipBar>`
 
   transition: ${({ noAnimation }) => (noAnimation ? 'none' : 'transform 0.25s')};
 `
-type TRealBar = { width: string }
+
+type TRealBar = { width: string } & TPrimaryColor
 export const RealBar = styled.span<TRealBar>`
   width: ${({ width }) => width};
   height: 2px;
-  /* border-radius: 3px; */
-  background: ${theme('article.digest')}; // to-theme
+  background: ${({ primaryColor }) => primaryTheme(primaryColor)};
 `
 // transform: ${({ active }) =>
 //     active ? 'translate3d(0,0,0);' : 'translate3d(0, 150%, 0);'};
diff --git a/src/widgets/Switcher/styles/tabs/tab_item.ts b/src/widgets/Switcher/styles/tabs/tab_item.ts
index d78fd6d93..e6d61913f 100755
--- a/src/widgets/Switcher/styles/tabs/tab_item.ts
+++ b/src/widgets/Switcher/styles/tabs/tab_item.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
-import type { TSizeSM, TActive } from '@/spec'
-import css, { theme } from '@/css'
+import type { TSizeSM, TActive, TPrimaryColor } from '@/spec'
+import css, { theme, primaryTheme } from '@/css'
 
 import { getMarginRight, getPadding, getMarginBottom } from '../metric/tabs'
 
@@ -64,13 +64,15 @@ export const Nav = styled.nav`
 type TLabel = TActive & {
   size: TSizeSM
   bottomSpace: number
-}
+} & TPrimaryColor
+
 export const Label = styled.span<TLabel>`
   ${css.row('align-center')};
   white-space: nowrap;
   padding: 1px 6px;
   border-radius: 3px;
-  color: ${({ active }) => (active ? theme('article.title') : '#878b8f')}; // to-theme
+  color: ${({ active, primaryColor }) =>
+    active ? primaryTheme(primaryColor) : theme('lightText')}; // to-theme
   margin-bottom: ${({ bottomSpace }) => `${bottomSpace}px`};
 
   font-weight: 500;
diff --git a/utils/constant/metric.ts b/utils/constant/metric.ts
index 510789611..a630f1706 100755
--- a/utils/constant/metric.ts
+++ b/utils/constant/metric.ts
@@ -4,6 +4,7 @@ import type { TMetric } from '@/spec'
 const METRIC = {
   HOME: 'HOME',
   COMMUNITY: 'COMMUNITY',
+  DOC: 'DOC',
   USER: 'USER',
   // article
   ARTICLE: 'ARTICLE',
diff --git a/utils/css/index.ts b/utils/css/index.ts
index c6b9e4efe..1c2e7d7bc 100755
--- a/utils/css/index.ts
+++ b/utils/css/index.ts
@@ -73,7 +73,7 @@ const css = {
   spaceMargins,
 }
 
-export { theme } from '../themes'
+export { theme, primaryTheme, primaryLightTheme, primaryLink } from '../themes'
 export { WIDTH } from './metric'
 export { default as zIndex } from './zindex'
 
diff --git a/utils/css/metric.ts b/utils/css/metric.ts
index 92c1ddb1a..d36c86286 100755
--- a/utils/css/metric.ts
+++ b/utils/css/metric.ts
@@ -21,7 +21,11 @@ export const WIDTH = {
   },
   COMMUNITY: {
     PAGE: '1360px',
-    CONTENT: '900px',
+    CONTENT: '940px',
+  },
+  DOC: {
+    PAGE: '1360px',
+    CONTENT: '1020px',
   },
   DASHBOARD: {
     PAGE: '1400px',
diff --git a/utils/themes/index.ts b/utils/themes/index.ts
index 674762216..a8d5e0b8c 100755
--- a/utils/themes/index.ts
+++ b/utils/themes/index.ts
@@ -13,7 +13,11 @@
 
 import { map, path, split } from 'ramda'
 
-import type { TTheme } from '@/spec'
+import type { TColorName, TTheme } from '@/spec'
+import { COLORS, COLOR_NAME } from '@/constant/colors'
+
+import { camelize } from '@/fmt'
+
 import skinsData from './skins'
 
 export const themeSkins = { ...skinsData }
@@ -29,4 +33,26 @@ export const themeCoverIndexMap = map(path(['coverIndex']), themeSkins)
 export const theme = (themePath: string): TTheme =>
   path(['theme', ...split('.', themePath)]) || 'wheat'
 
+/**
+ * for primary color component
+ */
+export const primaryTheme = (primaryColor: TColorName, themeKey = 'primary'): string => {
+  if (primaryColor === COLOR_NAME.BLACK) {
+    return theme(themeKey)
+  }
+
+  return COLORS[primaryColor]
+}
+
+export const primaryLink = (primaryColor: TColorName): string => {
+  if (primaryColor === COLOR_NAME.BLACK) {
+    return theme('link')
+  }
+
+  return COLORS[primaryColor]
+}
+
+export const primaryLightTheme = (primaryColor: TColorName): string => {
+  return theme(`baseColor.${camelize(primaryColor)}Bg`)
+}
 export { default as themeMeta } from './theme_meta'
diff --git a/utils/themes/skins/github.ts b/utils/themes/skins/github.ts
index 189b5b050..37e345688 100755
--- a/utils/themes/skins/github.ts
+++ b/utils/themes/skins/github.ts
@@ -3,7 +3,7 @@
  */
 import { lighten, darken } from '@/utils/color'
 
-const primaryColor = '#3b434a' // '#000000'
+const primaryColor = '#333333' // '#000000'
 
 const bannerBg = '#fff'
 const contentBg = '#fff'
@@ -25,6 +25,7 @@ const github = {
     category: 'light',
   },
   name: 'github',
+  primary: primaryColor,
   logoText: descText,
   cover: 'white',
   coverIndex: '#F9FCFC',
@@ -93,7 +94,7 @@ const github = {
     cyanLight: '#00B5CC',
     cyanLightBg: '#e1fcff94',
 
-    blue: '#456fbd',
+    blue: '#0073E3',
     blueBg: '#d8e3fd54',
 
     purple: '#7d519e',
@@ -252,7 +253,7 @@ const github = {
   },
   button: {
     primary: primaryColor,
-    fg: '#e7e7e7',
+    fg: 'white',
     disabledFg: descText,
     hoverBg: lighten(primaryColor, 10),
     activeBg: darken(primaryColor, 5),