From aa41c5cf033185cf9d238a368d387964bd5d22b9 Mon Sep 17 00:00:00 2001 From: Nolann Biron Date: Wed, 26 Mar 2025 14:07:17 +0100 Subject: [PATCH 1/5] Improve codeblock highlight style --- .changeset/fast-pigs-itch.md | 5 +++ .../CodeBlock/ClientCodeBlock.tsx | 6 ++-- .../DocumentView/CodeBlock/CodeBlock.tsx | 9 ++++- .../CodeBlock/CodeBlockRenderer.tsx | 1 - .../DocumentView/CodeBlock/highlight.ts | 34 ++++++++++++------- .../DocumentView/CodeBlock/theme.css | 31 ----------------- .../components/DocumentView/OpenAPI/style.css | 12 +++++-- 7 files changed, 47 insertions(+), 51 deletions(-) create mode 100644 .changeset/fast-pigs-itch.md delete mode 100644 packages/gitbook/src/components/DocumentView/CodeBlock/theme.css diff --git a/.changeset/fast-pigs-itch.md b/.changeset/fast-pigs-itch.md new file mode 100644 index 0000000000..cb8281fc75 --- /dev/null +++ b/.changeset/fast-pigs-itch.md @@ -0,0 +1,5 @@ +--- +'gitbook': patch +--- + +Improve codeblock highlight style diff --git a/packages/gitbook/src/components/DocumentView/CodeBlock/ClientCodeBlock.tsx b/packages/gitbook/src/components/DocumentView/CodeBlock/ClientCodeBlock.tsx index 77d9b33c52..7b08fb5c17 100644 --- a/packages/gitbook/src/components/DocumentView/CodeBlock/ClientCodeBlock.tsx +++ b/packages/gitbook/src/components/DocumentView/CodeBlock/ClientCodeBlock.tsx @@ -5,6 +5,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'; import { useInViewportListener } from '@/components/hooks/useInViewportListener'; import { useScrollListener } from '@/components/hooks/useScrollListener'; +import { useTheme } from 'next-themes'; import { useDebounceCallback } from 'usehooks-ts'; import type { BlockProps } from '../Block'; import { CodeBlockRenderer } from './CodeBlockRenderer'; @@ -26,6 +27,7 @@ export function ClientCodeBlock(props: ClientBlockProps) { const [isInViewport, setIsInViewport] = useState(false); const plainLines = useMemo(() => plainHighlight(block, []), [block]); const [lines, setLines] = useState(null); + const { resolvedTheme } = useTheme(); // Preload the highlighter when the block is mounted. useEffect(() => { @@ -78,7 +80,7 @@ export function ClientCodeBlock(props: ClientBlockProps) { if (typeof window !== 'undefined') { import('./highlight').then(({ highlight }) => { - highlight(block, inlines).then((lines) => { + highlight(block, inlines, resolvedTheme).then((lines) => { if (cancelled) { return; } @@ -95,7 +97,7 @@ export function ClientCodeBlock(props: ClientBlockProps) { // Otherwise if the block is not in viewport, we reset to the plain lines setLines(null); - }, [isInViewport, block, inlines]); + }, [isInViewport, block, inlines, resolvedTheme]); return ( diff --git a/packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlock.tsx b/packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlock.tsx index 2516c8d4ff..46f2bd9b05 100644 --- a/packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlock.tsx +++ b/packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlock.tsx @@ -3,6 +3,8 @@ import type { DocumentBlockCode } from '@gitbook/api'; import { getNodeFragmentByType } from '@/lib/document'; import { isV2 } from '@/lib/v2'; +import { MiddlewareHeaders } from '@v2/lib/middleware'; +import { headers } from 'next/headers'; import type { BlockProps } from '../Block'; import { Blocks } from '../Blocks'; import { ClientCodeBlock } from './ClientCodeBlock'; @@ -38,9 +40,14 @@ export async function CodeBlock(props: BlockProps) { if (isV2() && !isEstimatedOffscreen) { // In v2, we render the code block server-side - const lines = await highlight(block, richInlines); + const theme = getTheme(); + const lines = await highlight(block, richInlines, theme); return ; } return ; } + +function getTheme() { + return headers().get(MiddlewareHeaders.Theme) || 'light'; +} diff --git a/packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlockRenderer.tsx b/packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlockRenderer.tsx index e2279f744e..fdb73fb7fc 100644 --- a/packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlockRenderer.tsx +++ b/packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlockRenderer.tsx @@ -9,7 +9,6 @@ import type { BlockProps } from '../Block'; import { CopyCodeButton } from './CopyCodeButton'; import type { HighlightLine, HighlightToken } from './highlight'; -import './theme.css'; import './CodeBlockRenderer.css'; type CodeBlockRendererProps = Pick, 'block' | 'style'> & { diff --git a/packages/gitbook/src/components/DocumentView/CodeBlock/highlight.ts b/packages/gitbook/src/components/DocumentView/CodeBlock/highlight.ts index eb02b5b928..19532ecab4 100644 --- a/packages/gitbook/src/components/DocumentView/CodeBlock/highlight.ts +++ b/packages/gitbook/src/components/DocumentView/CodeBlock/highlight.ts @@ -3,15 +3,11 @@ import type { DocumentBlockCodeLine, DocumentInlineAnnotation, } from '@gitbook/api'; -import { - type ThemedToken, - createCssVariablesTheme, - createSingletonShorthands, - createdBundledHighlighter, -} from 'shiki/core'; +import { type ThemedToken, createSingletonShorthands, createdBundledHighlighter } from 'shiki/core'; import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'; import { type BundledLanguage, bundledLanguages } from 'shiki/langs'; - +import githubDarkDefault from 'shiki/themes/github-dark-default.mjs'; +import minLight from 'shiki/themes/min-light.mjs'; import { plainHighlight } from './plain-highlight'; export type HighlightLine = { @@ -33,12 +29,15 @@ export type RenderedInline = { body: React.ReactNode; }; -const theme = createCssVariablesTheme(); +const themes = { + light: minLight, + dark: githubDarkDefault, +}; const { getSingletonHighlighter } = createSingletonShorthands( createdBundledHighlighter({ langs: bundledLanguages, - themes: {}, + themes: themes, engine: () => createJavaScriptRegexEngine({ forgiving: true, target: 'ES2018' }), }) ); @@ -51,7 +50,7 @@ export async function preloadHighlight(block: DocumentBlockCode) { if (langName) { await getSingletonHighlighter({ langs: [langName], - themes: [theme], + themes: Object.values(themes), }); } } @@ -61,9 +60,11 @@ export async function preloadHighlight(block: DocumentBlockCode) { */ export async function highlight( block: DocumentBlockCode, - inlines: RenderedInline[] + inlines: RenderedInline[], + theme?: string ): Promise { const langName = getBlockLang(block); + if (!langName) { // Language not found, fallback to plain highlighting return plainHighlight(block, inlines); @@ -73,12 +74,19 @@ export async function highlight( const highlighter = await getSingletonHighlighter({ langs: [langName], - themes: [theme], + themes: Object.values(themes), }); + const selectedTheme = (() => { + if (theme === 'dark') { + return themes.dark; + } + return themes.light; + })(); + const lines = highlighter.codeToTokensBase(code, { lang: langName, - theme, + theme: selectedTheme, tokenizeMaxLineLength: 400, }); diff --git a/packages/gitbook/src/components/DocumentView/CodeBlock/theme.css b/packages/gitbook/src/components/DocumentView/CodeBlock/theme.css deleted file mode 100644 index 22ce3b60e3..0000000000 --- a/packages/gitbook/src/components/DocumentView/CodeBlock/theme.css +++ /dev/null @@ -1,31 +0,0 @@ -:root { - --shiki-color-text: theme("colors.tint.11"); - --shiki-token-constant: #0a6355; - --shiki-token-string: #8b6d32; - --shiki-token-comment: theme("colors.teal.700/.64"); - --shiki-token-keyword: theme("colors.pomegranate.600"); - --shiki-token-parameter: #0a3069; - --shiki-token-function: #8250df; - --shiki-token-string-expression: #6a4906; - --shiki-token-punctuation: theme("colors.pomegranate.700/.92"); - --shiki-token-link: theme("colors.tint.12"); - --shiki-token-inserted: #22863a; - --shiki-token-deleted: #b31d28; - --shiki-token-changed: #8250df; -} - -html.dark { - --shiki-color-text: theme("colors.tint.11"); - --shiki-token-constant: #d19a66; - --shiki-token-string: theme("colors.pomegranate.300"); - --shiki-token-comment: theme("colors.teal.300/.64"); - --shiki-token-keyword: theme("colors.pomegranate.400"); - --shiki-token-parameter: theme("colors.yellow.500"); - --shiki-token-function: #56b6c2; - --shiki-token-string-expression: theme("colors.tint.11"); - --shiki-token-punctuation: #acc6ee; - --shiki-token-link: theme("colors.pomegranate.400"); - --shiki-token-inserted: #85e89d; - --shiki-token-deleted: #fdaeb7; - --shiki-token-changed: #56b6c2; -} diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css index babf850710..471666ee1f 100644 --- a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css +++ b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css @@ -384,7 +384,7 @@ /* Code Sample */ .openapi-codesample { - @apply border rounded bg-tint border-tint-subtle; + @apply border rounded bg-tint-subtle theme-gradient:bg-transparent border-tint-subtle; } .openapi-codesample-header { @@ -458,11 +458,11 @@ /* Response Example */ .openapi-response-example { - @apply border rounded bg-tint border-tint-subtle; + @apply border rounded bg-tint-subtle theme-gradient:bg-transparent border-tint-subtle; } .openapi-response-example-empty { - @apply relative text-tint bg-tint min-h-20 flex flex-col justify-center items-center; + @apply relative text-tint bg-tint-subtle theme-gradient:bg-transparent min-h-20 flex flex-col justify-center items-center; } /* Common Elements */ @@ -692,3 +692,9 @@ opacity: 0; } } + +.openapi-codesample pre, +.openapi-response-example pre, +.openapi-response-example-empty pre { + @apply !bg-tint-subtle text-[0.8125rem] leading-5; +} From b1629e1a7f0df5251b61268ad1707835001e5c89 Mon Sep 17 00:00:00 2001 From: Nolann Biron Date: Wed, 26 Mar 2025 14:42:48 +0100 Subject: [PATCH 2/5] Fix theme gradient --- .../gitbook/src/components/DocumentView/OpenAPI/style.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css index 471666ee1f..e5785bf915 100644 --- a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css +++ b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css @@ -384,7 +384,7 @@ /* Code Sample */ .openapi-codesample { - @apply border rounded bg-tint-subtle theme-gradient:bg-transparent border-tint-subtle; + @apply border rounded bg-tint-subtle theme-gradient:bg-tint-12/1 border-tint-subtle; } .openapi-codesample-header { @@ -458,11 +458,11 @@ /* Response Example */ .openapi-response-example { - @apply border rounded bg-tint-subtle theme-gradient:bg-transparent border-tint-subtle; + @apply border rounded bg-tint-subtle theme-gradient:bg-tint-12/1 border-tint-subtle; } .openapi-response-example-empty { - @apply relative text-tint bg-tint-subtle theme-gradient:bg-transparent min-h-20 flex flex-col justify-center items-center; + @apply relative text-tint bg-tint-subtle theme-gradient:bg-tint-12/1 min-h-20 flex flex-col justify-center items-center; } /* Common Elements */ @@ -696,5 +696,5 @@ .openapi-codesample pre, .openapi-response-example pre, .openapi-response-example-empty pre { - @apply !bg-tint-subtle text-[0.8125rem] leading-5; + @apply !bg-tint-subtle text-[0.8125rem] leading-5 theme-gradient:!bg-transparent; } From 6c8f61c8f3bcfa159180e15ce920f7c44b9c9867 Mon Sep 17 00:00:00 2001 From: Nolann Biron Date: Wed, 26 Mar 2025 15:20:33 +0100 Subject: [PATCH 3/5] Reduce font-size --- .../src/components/DocumentView/OpenAPI/style.css | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css index e5785bf915..6799cac96a 100644 --- a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css +++ b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css @@ -694,7 +694,11 @@ } .openapi-codesample pre, -.openapi-response-example pre, -.openapi-response-example-empty pre { - @apply !bg-tint-subtle text-[0.8125rem] leading-5 theme-gradient:!bg-transparent; +.openapi-response-example pre { + @apply !bg-tint-subtle theme-gradient:!bg-transparent; +} + +.openapi-codesample pre .highlight-line-content, +.openapi-response-example pre .highlight-line-content { + @apply !text-[0.8125rem] !leading-5; } From 51499602768ca8021d5ee304f710190bfe233ba6 Mon Sep 17 00:00:00 2001 From: Nolann Biron Date: Wed, 26 Mar 2025 16:04:36 +0100 Subject: [PATCH 4/5] Revert "Improve codeblock highlight style" --- .changeset/fast-pigs-itch.md | 5 --- .../CodeBlock/ClientCodeBlock.tsx | 6 ++-- .../DocumentView/CodeBlock/CodeBlock.tsx | 9 +---- .../CodeBlock/CodeBlockRenderer.tsx | 1 + .../DocumentView/CodeBlock/highlight.ts | 34 +++++++------------ .../DocumentView/CodeBlock/theme.css | 31 +++++++++++++++++ 6 files changed, 48 insertions(+), 38 deletions(-) delete mode 100644 .changeset/fast-pigs-itch.md create mode 100644 packages/gitbook/src/components/DocumentView/CodeBlock/theme.css diff --git a/.changeset/fast-pigs-itch.md b/.changeset/fast-pigs-itch.md deleted file mode 100644 index cb8281fc75..0000000000 --- a/.changeset/fast-pigs-itch.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'gitbook': patch ---- - -Improve codeblock highlight style diff --git a/packages/gitbook/src/components/DocumentView/CodeBlock/ClientCodeBlock.tsx b/packages/gitbook/src/components/DocumentView/CodeBlock/ClientCodeBlock.tsx index 7b08fb5c17..77d9b33c52 100644 --- a/packages/gitbook/src/components/DocumentView/CodeBlock/ClientCodeBlock.tsx +++ b/packages/gitbook/src/components/DocumentView/CodeBlock/ClientCodeBlock.tsx @@ -5,7 +5,6 @@ import { useEffect, useMemo, useRef, useState } from 'react'; import { useInViewportListener } from '@/components/hooks/useInViewportListener'; import { useScrollListener } from '@/components/hooks/useScrollListener'; -import { useTheme } from 'next-themes'; import { useDebounceCallback } from 'usehooks-ts'; import type { BlockProps } from '../Block'; import { CodeBlockRenderer } from './CodeBlockRenderer'; @@ -27,7 +26,6 @@ export function ClientCodeBlock(props: ClientBlockProps) { const [isInViewport, setIsInViewport] = useState(false); const plainLines = useMemo(() => plainHighlight(block, []), [block]); const [lines, setLines] = useState(null); - const { resolvedTheme } = useTheme(); // Preload the highlighter when the block is mounted. useEffect(() => { @@ -80,7 +78,7 @@ export function ClientCodeBlock(props: ClientBlockProps) { if (typeof window !== 'undefined') { import('./highlight').then(({ highlight }) => { - highlight(block, inlines, resolvedTheme).then((lines) => { + highlight(block, inlines).then((lines) => { if (cancelled) { return; } @@ -97,7 +95,7 @@ export function ClientCodeBlock(props: ClientBlockProps) { // Otherwise if the block is not in viewport, we reset to the plain lines setLines(null); - }, [isInViewport, block, inlines, resolvedTheme]); + }, [isInViewport, block, inlines]); return ( diff --git a/packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlock.tsx b/packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlock.tsx index 46f2bd9b05..2516c8d4ff 100644 --- a/packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlock.tsx +++ b/packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlock.tsx @@ -3,8 +3,6 @@ import type { DocumentBlockCode } from '@gitbook/api'; import { getNodeFragmentByType } from '@/lib/document'; import { isV2 } from '@/lib/v2'; -import { MiddlewareHeaders } from '@v2/lib/middleware'; -import { headers } from 'next/headers'; import type { BlockProps } from '../Block'; import { Blocks } from '../Blocks'; import { ClientCodeBlock } from './ClientCodeBlock'; @@ -40,14 +38,9 @@ export async function CodeBlock(props: BlockProps) { if (isV2() && !isEstimatedOffscreen) { // In v2, we render the code block server-side - const theme = getTheme(); - const lines = await highlight(block, richInlines, theme); + const lines = await highlight(block, richInlines); return ; } return ; } - -function getTheme() { - return headers().get(MiddlewareHeaders.Theme) || 'light'; -} diff --git a/packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlockRenderer.tsx b/packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlockRenderer.tsx index fdb73fb7fc..e2279f744e 100644 --- a/packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlockRenderer.tsx +++ b/packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlockRenderer.tsx @@ -9,6 +9,7 @@ import type { BlockProps } from '../Block'; import { CopyCodeButton } from './CopyCodeButton'; import type { HighlightLine, HighlightToken } from './highlight'; +import './theme.css'; import './CodeBlockRenderer.css'; type CodeBlockRendererProps = Pick, 'block' | 'style'> & { diff --git a/packages/gitbook/src/components/DocumentView/CodeBlock/highlight.ts b/packages/gitbook/src/components/DocumentView/CodeBlock/highlight.ts index 19532ecab4..eb02b5b928 100644 --- a/packages/gitbook/src/components/DocumentView/CodeBlock/highlight.ts +++ b/packages/gitbook/src/components/DocumentView/CodeBlock/highlight.ts @@ -3,11 +3,15 @@ import type { DocumentBlockCodeLine, DocumentInlineAnnotation, } from '@gitbook/api'; -import { type ThemedToken, createSingletonShorthands, createdBundledHighlighter } from 'shiki/core'; +import { + type ThemedToken, + createCssVariablesTheme, + createSingletonShorthands, + createdBundledHighlighter, +} from 'shiki/core'; import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'; import { type BundledLanguage, bundledLanguages } from 'shiki/langs'; -import githubDarkDefault from 'shiki/themes/github-dark-default.mjs'; -import minLight from 'shiki/themes/min-light.mjs'; + import { plainHighlight } from './plain-highlight'; export type HighlightLine = { @@ -29,15 +33,12 @@ export type RenderedInline = { body: React.ReactNode; }; -const themes = { - light: minLight, - dark: githubDarkDefault, -}; +const theme = createCssVariablesTheme(); const { getSingletonHighlighter } = createSingletonShorthands( createdBundledHighlighter({ langs: bundledLanguages, - themes: themes, + themes: {}, engine: () => createJavaScriptRegexEngine({ forgiving: true, target: 'ES2018' }), }) ); @@ -50,7 +51,7 @@ export async function preloadHighlight(block: DocumentBlockCode) { if (langName) { await getSingletonHighlighter({ langs: [langName], - themes: Object.values(themes), + themes: [theme], }); } } @@ -60,11 +61,9 @@ export async function preloadHighlight(block: DocumentBlockCode) { */ export async function highlight( block: DocumentBlockCode, - inlines: RenderedInline[], - theme?: string + inlines: RenderedInline[] ): Promise { const langName = getBlockLang(block); - if (!langName) { // Language not found, fallback to plain highlighting return plainHighlight(block, inlines); @@ -74,19 +73,12 @@ export async function highlight( const highlighter = await getSingletonHighlighter({ langs: [langName], - themes: Object.values(themes), + themes: [theme], }); - const selectedTheme = (() => { - if (theme === 'dark') { - return themes.dark; - } - return themes.light; - })(); - const lines = highlighter.codeToTokensBase(code, { lang: langName, - theme: selectedTheme, + theme, tokenizeMaxLineLength: 400, }); diff --git a/packages/gitbook/src/components/DocumentView/CodeBlock/theme.css b/packages/gitbook/src/components/DocumentView/CodeBlock/theme.css new file mode 100644 index 0000000000..22ce3b60e3 --- /dev/null +++ b/packages/gitbook/src/components/DocumentView/CodeBlock/theme.css @@ -0,0 +1,31 @@ +:root { + --shiki-color-text: theme("colors.tint.11"); + --shiki-token-constant: #0a6355; + --shiki-token-string: #8b6d32; + --shiki-token-comment: theme("colors.teal.700/.64"); + --shiki-token-keyword: theme("colors.pomegranate.600"); + --shiki-token-parameter: #0a3069; + --shiki-token-function: #8250df; + --shiki-token-string-expression: #6a4906; + --shiki-token-punctuation: theme("colors.pomegranate.700/.92"); + --shiki-token-link: theme("colors.tint.12"); + --shiki-token-inserted: #22863a; + --shiki-token-deleted: #b31d28; + --shiki-token-changed: #8250df; +} + +html.dark { + --shiki-color-text: theme("colors.tint.11"); + --shiki-token-constant: #d19a66; + --shiki-token-string: theme("colors.pomegranate.300"); + --shiki-token-comment: theme("colors.teal.300/.64"); + --shiki-token-keyword: theme("colors.pomegranate.400"); + --shiki-token-parameter: theme("colors.yellow.500"); + --shiki-token-function: #56b6c2; + --shiki-token-string-expression: theme("colors.tint.11"); + --shiki-token-punctuation: #acc6ee; + --shiki-token-link: theme("colors.pomegranate.400"); + --shiki-token-inserted: #85e89d; + --shiki-token-deleted: #fdaeb7; + --shiki-token-changed: #56b6c2; +} From ab9e019fb5044f84f67a7f53737cfc07328b1662 Mon Sep 17 00:00:00 2001 From: Nolann Biron Date: Wed, 26 Mar 2025 16:11:00 +0100 Subject: [PATCH 5/5] Update colors in highlight theme.css --- .../DocumentView/CodeBlock/theme.css | 52 +++++++++---------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/packages/gitbook/src/components/DocumentView/CodeBlock/theme.css b/packages/gitbook/src/components/DocumentView/CodeBlock/theme.css index 22ce3b60e3..bd3f137bdc 100644 --- a/packages/gitbook/src/components/DocumentView/CodeBlock/theme.css +++ b/packages/gitbook/src/components/DocumentView/CodeBlock/theme.css @@ -1,31 +1,31 @@ :root { - --shiki-color-text: theme("colors.tint.11"); - --shiki-token-constant: #0a6355; - --shiki-token-string: #8b6d32; - --shiki-token-comment: theme("colors.teal.700/.64"); - --shiki-token-keyword: theme("colors.pomegranate.600"); - --shiki-token-parameter: #0a3069; - --shiki-token-function: #8250df; - --shiki-token-string-expression: #6a4906; - --shiki-token-punctuation: theme("colors.pomegranate.700/.92"); - --shiki-token-link: theme("colors.tint.12"); - --shiki-token-inserted: #22863a; - --shiki-token-deleted: #b31d28; - --shiki-token-changed: #8250df; + --shiki-color-text: #24292eff; + --shiki-token-constant: #1976d2; + --shiki-token-string: #2b5581; + --shiki-token-comment: #c2c3c5; + --shiki-token-keyword: #d32f2f; + --shiki-token-parameter: #ff9800; + --shiki-token-function: #6f42c1; + --shiki-token-string-expression: #22863a; + --shiki-token-punctuation: #212121; + --shiki-token-link: #22863a; + --shiki-token-inserted: #b7e7a44b; + --shiki-token-deleted: #e597af52; + --shiki-token-changed: #0000001a; } html.dark { - --shiki-color-text: theme("colors.tint.11"); - --shiki-token-constant: #d19a66; - --shiki-token-string: theme("colors.pomegranate.300"); - --shiki-token-comment: theme("colors.teal.300/.64"); - --shiki-token-keyword: theme("colors.pomegranate.400"); - --shiki-token-parameter: theme("colors.yellow.500"); - --shiki-token-function: #56b6c2; - --shiki-token-string-expression: theme("colors.tint.11"); - --shiki-token-punctuation: #acc6ee; - --shiki-token-link: theme("colors.pomegranate.400"); - --shiki-token-inserted: #85e89d; - --shiki-token-deleted: #fdaeb7; - --shiki-token-changed: #56b6c2; + --shiki-color-text: #eeffff; + --shiki-token-constant: #82aaff; + --shiki-token-string: #82aaff; + --shiki-token-comment: #676767; + --shiki-token-keyword: #c792ea; + --shiki-token-parameter: #f07178; + --shiki-token-function: #ffcb6b; + --shiki-token-string-expression: #c3e88d; + --shiki-token-punctuation: #89ddff; + --shiki-token-link: #80cbc4; + --shiki-token-inserted: #c3e88d; + --shiki-token-deleted: #f07178; + --shiki-token-changed: #ffcb6b; }