fix code configs (#127)

fern-api · Sep 17, 2023 · 0b2c9db · 0b2c9db · vercel · Sep 17, 2023
1 parent 3db3a9f
commit 0b2c9db
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 8 deletions.
diff --git a/packages/ui/app/src/docs-context/DocsContext.ts b/packages/ui/app/src/docs-context/DocsContext.ts
@@ -2,6 +2,7 @@ import { FernRegistry } from "@fern-fern/registry-browser";
 import * as FernRegistryApiRead from "@fern-fern/registry-browser/api/resources/api/resources/v1/resources/read";
 import * as FernRegistryDocsRead from "@fern-fern/registry-browser/api/resources/docs/resources/v1/resources/read";
 import { type ResolvedUrlPath } from "@fern-ui/app-utils";
+import { Theme } from "@fern-ui/theme";
 import React from "react";
 
 export const DocsContext = React.createContext<() => DocsContextValue>(() => {
@@ -66,6 +67,10 @@ export interface DocsContextValue {
 
     nextPath: ResolvedUrlPath | undefined;
     previousPath: ResolvedUrlPath | undefined;
+
+    // theme
+    theme: Theme | undefined;
+    setTheme: (theme: Theme) => void;
 }
 
 export interface Anchor {

diff --git a/packages/ui/app/src/docs-context/DocsContextProvider.tsx b/packages/ui/app/src/docs-context/DocsContextProvider.tsx
@@ -9,6 +9,7 @@ import {
 } from "@fern-ui/app-utils";
 import { assertNever } from "@fern-ui/core-utils";
 import { useEventCallback } from "@fern-ui/react-commons";
+import { useTheme } from "@fern-ui/theme";
 import { useRouter } from "next/router";
 import { PropsWithChildren, useCallback, useEffect, useMemo, useState } from "react";
 import { DocsContext, DocsContextValue, type DocsInfo, type NavigateToPathOpts } from "./DocsContext";
@@ -199,6 +200,8 @@ export const DocsContextProvider: React.FC<DocsContextProvider.Props> = ({
         scrollToPathListeners.invokeListeners(slug);
     });
 
+    const { theme, setTheme } = useTheme(docsDefinition.config.colorsV3.type);
+
     const contextValue = useCallback(
         (): DocsContextValue => ({
             resolveApi,
@@ -219,6 +222,8 @@ export const DocsContextProvider: React.FC<DocsContextProvider.Props> = ({
             nextPath,
             previousPath,
             selectedSlug,
+            theme,
+            setTheme,
         }),
         [
             docsDefinition,
@@ -239,6 +244,8 @@ export const DocsContextProvider: React.FC<DocsContextProvider.Props> = ({
             resolvedUrlPath,
             scrollToPathListeners.registerListener,
             selectedSlug,
+            theme,
+            setTheme,
         ]
     );
 

diff --git a/packages/ui/app/src/docs/Docs.tsx b/packages/ui/app/src/docs/Docs.tsx
@@ -1,6 +1,5 @@
 import { PLATFORM } from "@fern-ui/core-utils";
 import { useKeyboardCommand } from "@fern-ui/react-commons";
-import { useTheme } from "@fern-ui/theme";
 import { memo, useMemo } from "react";
 import { useDocsContext } from "../docs-context/useDocsContext";
 import { useMobileSidebarContext } from "../mobile-sidebar-context/useMobileSidebarContext";
@@ -14,7 +13,7 @@ import { Header } from "./Header";
 
 export const Docs: React.FC = memo(function UnmemoizedDocs() {
     const docsContext = useDocsContext();
-    const { docsDefinition } = docsContext;
+    const { docsDefinition, theme } = docsContext;
     const searchContext = useSearchContext();
     const { isSearchDialogOpen, openSearchDialog, closeSearchDialog } = searchContext;
     const searchService = useSearchService();
@@ -26,8 +25,6 @@ export const Docs: React.FC = memo(function UnmemoizedDocs() {
 
     const { colorsV3 } = docsDefinition.config;
 
-    const { theme } = useTheme(colorsV3.type);
-
     const backgroundType = useMemo(() => {
         if (theme == null) {
             return null;

diff --git a/packages/ui/app/src/docs/HeaderLogoSection.tsx b/packages/ui/app/src/docs/HeaderLogoSection.tsx
@@ -1,13 +1,11 @@
-import { useTheme } from "@fern-ui/theme";
 import { DEFAULT_LOGO_HEIGHT } from "../config";
 import { useDocsContext } from "../docs-context/useDocsContext";
 import { VersionDropdown } from "./VersionDropdown";
 
 export declare namespace HeaderLogoSection {}
 
 export const HeaderLogoSection: React.FC = () => {
-    const { resolveFile, docsDefinition, docsInfo, setActiveVersionSlug, navigateToPath } = useDocsContext();
-    const { theme } = useTheme(docsDefinition.config.colorsV3.type);
+    const { resolveFile, docsDefinition, docsInfo, setActiveVersionSlug, navigateToPath, theme } = useDocsContext();
     const { logo, logoV2, logoHeight, logoHref } = docsDefinition.config;
 
     if (theme == null) {

diff --git a/packages/ui/app/src/mdx/base-components.tsx b/packages/ui/app/src/mdx/base-components.tsx
@@ -8,6 +8,7 @@ import { CopyToClipboardButton } from "../commons/CopyToClipboardButton";
 import { useDocsContext } from "../docs-context/useDocsContext";
 
 export const CodeBlockInternalCore: React.FC<HTMLAttributes<HTMLElement>> = ({ children }) => {
+    const { theme } = useDocsContext();
     if (children == null || typeof children !== "object") {
         return null;
     }
@@ -23,7 +24,7 @@ export const CodeBlockInternalCore: React.FC<HTMLAttributes<HTMLElement>> = ({ c
             )}
         >
             <SyntaxHighlighter
-                style={prism.oneLight}
+                style={theme === "dark" ? prism.vscDarkPlus : prism.oneLight}
                 customStyle={{
                     width: "100%",
                     overflowX: "auto",