Skip to content

fix: prevent code blocks flash in dark mode (AI-assisted) #11967

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
titojuanc wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: prevent code blocks flash in dark mode (AI-assisted) #11967

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 23 additions & 1 deletion packages/docusaurus-theme-classic/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,11 @@ export default function themeClassic(
const {
announcementBar,
colorMode,
prism: {additionalLanguages},
prism: {
additionalLanguages,
theme: prismLightTheme,
darkTheme: prismDarkTheme,
},
} = themeConfig;
const {customCss} = options;
const {direction} = localeConfigs[currentLocale]!;
Expand Down Expand Up @@ -120,7 +124,25 @@ export default function themeClassic(
},

injectHtmlTags() {
const lightTheme = prismLightTheme;
const darkTheme = prismDarkTheme || lightTheme;
const prismCssStyle = `
[data-theme='light'] {
--prism-background-color: ${lightTheme.plain.backgroundColor || 'inherit'};
--prism-color: ${lightTheme.plain.color || 'inherit'};
Copy link
Copy Markdown
Collaborator

@slorber slorber May 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This tag will appear on all pages of a docs website, including those not even showing code blocks, so I'm not a fan of adding this, and if we do it should be minimal.

Is the --prism-color variable actually used anywhere?

As far as I see, all tokens and token lines always have an explicit color

}
[data-theme='dark'] {
--prism-background-color: ${darkTheme.plain.backgroundColor || 'inherit'};
--prism-color: ${darkTheme.plain.color || 'inherit'};
}
`;
return {
headTags: [
{
tagName: 'style',
innerHTML: prismCssStyle,
},
],
preBodyTags: [
{
tagName: 'svg',
Expand Down
6 changes: 1 addition & 5 deletions packages/docusaurus-theme-classic/src/theme/CodeBlock/Container/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,17 @@

import React, {type ComponentProps, type ReactNode} from 'react';
import clsx from 'clsx';
import {ThemeClassNames, usePrismTheme} from '@docusaurus/theme-common';
import {getPrismCssVariables} from '@docusaurus/theme-common/internal';
import {ThemeClassNames} from '@docusaurus/theme-common';
import styles from './styles.module.css';

export default function CodeBlockContainer<T extends 'div' | 'pre'>({
as: As,
...props
}: {as: T} & ComponentProps<T>): ReactNode {
const prismTheme = usePrismTheme();
const prismCssVariables = getPrismCssVariables(prismTheme);
Copy link
Copy Markdown
Collaborator

@slorber slorber May 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are these functions still used anywhere?

return (
<As
// Polymorphic components are hard to type, without `oneOf` generics
{...(props as any)}
style={prismCssVariables}
className={clsx(
props.className,
styles.codeBlockContainer,
Expand Down
5 changes: 2 additions & 3 deletions packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,11 +60,10 @@ export default function CodeBlockContent({
const {code, language, lineNumbersStart, lineClassNames} = metadata;
return (
<Highlight theme={prismTheme} code={code} language={language}>
{({className, style, tokens: lines, getLineProps, getTokenProps}) => (
{({className, tokens: lines, getLineProps, getTokenProps}) => (
<Pre
ref={wordWrap.codeBlockRef}
className={clsx(classNameProp, className)}
style={style}>
className={clsx(classNameProp, className)}>
<Code>
{lines.map((line, i) => (
<Line
Expand Down
12 changes: 1 addition & 11 deletions packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
*/

import React, {isValidElement, type ReactNode} from 'react';
import useIsBrowser from '@docusaurus/useIsBrowser';
import ElementContent from '@theme/CodeBlock/Content/Element';
import StringContent from '@theme/CodeBlock/Content/String';
import type {Props} from '@theme/CodeBlock';
Expand All @@ -29,17 +28,8 @@ export default function CodeBlock({
children: rawChildren,
...props
}: Props): ReactNode {
// The Prism theme on SSR is always the default theme but the site theme can
// be in a different mode. React hydration doesn't update DOM styles that come
// from SSR. Hence force a re-render after mounting to apply the current
// relevant styles.
const isBrowser = useIsBrowser();
Comment on lines -32 to -36
Copy link
Copy Markdown
Collaborator

@slorber slorber May 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note to self: I'm not sure why we needed this in the first place.

It seems fine to remove?

const children = maybeStringifyChildren(rawChildren);
const CodeBlockComp =
typeof children === 'string' ? StringContent : ElementContent;
return (
<CodeBlockComp key={String(isBrowser)} {...props}>
{children as string}
</CodeBlockComp>
);
return <CodeBlockComp {...props}>{children as string}</CodeBlockComp>;
}
Loading