support custom hue theme color via primaryHue, primaryHue.dark an…

…d `primaryHue.light` theme options (#790)
shuding · Sep 2, 2022 · c4a9782 · c4a9782
1 parent 195457d
commit c4a9782
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 15 deletions.
diff --git a/.changeset/twenty-apples-scream.md b/.changeset/twenty-apples-scream.md
@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+support custom hue theme color via `primaryHue`, `primaryHue.dark` and `primaryHue.light` theme options
diff --git a/packages/nextra-theme-docs/css/styles.css b/packages/nextra-theme-docs/css/styles.css
@@ -8,14 +8,6 @@
 @import './scrollbar.css';
 @import './typesetting-article.css';
 
-:root {
-  --nextra-primary-hue: 212deg;
-}
-
-.dark {
-  --nextra-primary-hue: 204deg;
-}
-
 html {
   @apply antialiased text-base;
   font-feature-settings: 'rlig' 1, 'calt' 1, 'ss01' 1, 'ss06' 1;

diff --git a/packages/nextra-theme-docs/src/components/head.tsx b/packages/nextra-theme-docs/src/components/head.tsx
@@ -13,6 +13,9 @@ export function Head(): ReactElement {
   // `head` can be either FC or ReactNode. We have to directly call it if it's a
   // FC because hooks like Next.js' `useRouter` aren't allowed inside NextHead.
   const head = typeof config.head === 'function' ? config.head({}) : config.head
+  const hue = config.primaryHue
+  const { dark: darkHue, light: lightHue } =
+    typeof hue === 'number' ? { dark: hue, light: hue } : hue
 
   return (
     <NextHead>
@@ -46,6 +49,15 @@ export function Head(): ReactElement {
         name="viewport"
         content="width=device-width, initial-scale=1.0, viewport-fit=cover"
       />
+      <style>{`
+        :root {
+          --nextra-primary-hue: ${lightHue}deg;
+        }
+        
+        .dark {
+          --nextra-primary-hue: ${darkHue}deg;
+        }
+      `}</style>
       {head}
     </NextHead>
   )

diff --git a/packages/nextra-theme-docs/src/constants.tsx b/packages/nextra-theme-docs/src/constants.tsx
@@ -96,6 +96,10 @@ export const DEFAULT_THEME: DocsThemeConfig = {
     labels: 'bug',
     link: 'Submit an issue about broken link →'
   },
+  primaryHue: {
+    dark: 204,
+    light: 212
+  },
   project: {
     icon: (
       <>
@@ -164,7 +168,7 @@ export const DEEP_OBJECT_KEYS = Object.entries(DEFAULT_THEME)
       return key
     }
   })
-  .filter(Boolean) as string[]
+  .filter(Boolean) as (keyof DocsThemeConfig)[]
 
 export const LEGACY_CONFIG_OPTIONS: Record<string, string> = {
   bannerKey: 'banner.key',
@@ -188,7 +192,7 @@ export const LEGACY_CONFIG_OPTIONS: Record<string, string> = {
   serverSideErrorLink: 'serverSideError.link',
   sidebarSubtitle: 'sidebar.subtitle',
   tocExtraContent: 'toc.extraContent',
-  unstable_searchResultEmpty: 'search.emptyResult',
+  unstable_searchResultEmpty: 'search.emptyResult'
 }
 
 export const DEFAULT_PAGE_THEME: PageTheme = {

diff --git a/packages/nextra-theme-docs/src/contexts/config.tsx b/packages/nextra-theme-docs/src/contexts/config.tsx
@@ -46,11 +46,15 @@ export const ConfigProvider = ({
     title: pageOpts.title,
     frontMatter: pageOpts.frontMatter,
     ...Object.fromEntries(
-      DEEP_OBJECT_KEYS.map(key => [
-        key,
-        // @ts-expect-error -- key has always object value
-        { ...DEFAULT_THEME[key], ...themeConfig[key] }
-      ])
+      (DEEP_OBJECT_KEYS).map(key =>
+        typeof themeConfig[key] === 'object'
+          ? [
+              key,
+              // @ts-expect-error -- key has always object value
+              { ...DEFAULT_THEME[key], ...themeConfig[key] }
+            ]
+          : []
+      )
     )
   }
 

diff --git a/packages/nextra-theme-docs/src/types.ts b/packages/nextra-theme-docs/src/types.ts
@@ -61,6 +61,10 @@ export interface DocsThemeConfig {
     labels: string
     link: ReactNode | FC
   }
+  primaryHue: number | {
+    dark: number
+    light: number
+  },
   project: {
     icon: ReactNode | FC
     link: string