refactor: control base styling of code blocks via CSS vars (#7172)

Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>

packages/docusaurus-theme-common/src/hooks/usePrismTheme.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import defaultTheme from 'prism-react-renderer/themes/palenight';
+import type {PrismTheme} from 'prism-react-renderer';
 import {useColorMode} from '../contexts/colorMode';
 import {useThemeConfig} from '../utils/useThemeConfig';
 
@@ -13,10 +13,10 @@ import {useThemeConfig} from '../utils/useThemeConfig';
  * Returns a color-mode-dependent Prism theme: whatever the user specified in
  * the config. Falls back to `palenight`.
  */
-export function usePrismTheme(): typeof defaultTheme {
+export function usePrismTheme(): PrismTheme {
   const {prism} = useThemeConfig();
   const {colorMode} = useColorMode();
-  const lightModeTheme = prism.theme || defaultTheme;
+  const lightModeTheme = prism.theme;
   const darkModeTheme = prism.darkTheme || lightModeTheme;
   const prismTheme = colorMode === 'dark' ? darkModeTheme : lightModeTheme;
 

packages/docusaurus-theme-common/src/index.ts

@@ -35,6 +35,7 @@ export {
   parseLanguage,
   parseLines,
   containsLineNumbers,
+  getPrismCssVariables,
 } from './utils/codeBlockUtils';
 
 export {

packages/docusaurus-theme-common/src/utils/codeBlockUtils.ts

@@ -6,6 +6,8 @@
  */
 
 import rangeParser from 'parse-numeric-range';
+import type {PrismTheme} from 'prism-react-renderer';
+import type {CSSProperties} from 'react';
 
 const codeBlockTitleRegex = /title=(?<quote>["'])(?<title>.*?)\1/;
 const highlightLinesRangeRegex = /\{(?<range>[\d,-]+)\}/;
@@ -173,3 +175,20 @@ export function parseLines(
   code = lines.join('\n');
   return {highlightLines, code};
 }
+
+export function getPrismCssVariables(prismTheme: PrismTheme): CSSProperties {
+  const mapping: {[name: keyof PrismTheme['plain']]: string} = {
+    color: '--prism-color',
+    backgroundColor: '--prism-background-color',
+  };
+
+  const properties: CSSProperties = {};
+  Object.entries(prismTheme.plain).forEach(([key, value]) => {
+    const varName = mapping[key];
+    if (varName && typeof value === 'string') {
+      // @ts-expect-error: why css variables not in inline style type?
+      properties[varName] = value;
+    }
+  });
+  return properties;
+}

packages/docusaurus-theme-common/src/utils/useThemeConfig.ts

@@ -53,7 +53,7 @@ export type AnnouncementBarConfig = {
 };
 
 export type PrismConfig = {
-  theme?: PrismTheme;
+  theme: PrismTheme;
   darkTheme?: PrismTheme;
   defaultLanguage?: string;
   additionalLanguages: string[];