refactor: set dark as default theme color & refactored codeblock

packages/logos-docusaurus-preset/src/theme-config/base.ts

@@ -1,7 +1,8 @@
 import { ThemeConfig } from '@docusaurus/preset-classic'
 
 const lightCodeTheme = require('prism-react-renderer/themes/github')
-const darkCodeTheme = require('prism-react-renderer/themes/dracula')
+// const darkCodeTheme = require('prism-react-renderer/themes/vsDark')
+const darkCodeTheme = require('@acid-info/logos-docusaurus-theme/lib/client/prism/dark-theme')
 
 export const baseThemeConfig: ThemeConfig = {
   docs: {
@@ -10,6 +11,7 @@ export const baseThemeConfig: ThemeConfig = {
   metadata: [],
   colorMode: {
     disableSwitch: true,
+    defaultMode: 'dark',
   },
   navbar: {
     title: '',
@@ -37,7 +39,7 @@ export const baseThemeConfig: ThemeConfig = {
   },
   prism: {
     theme: lightCodeTheme,
-    darkTheme: darkCodeTheme,
+    darkTheme: darkCodeTheme.default,
   },
 }
 

packages/logos-docusaurus-theme/src/client/css/custom.scss

@@ -7,9 +7,15 @@
  */
 
 /* You can override the default Infima variables here. */
-:root {
-  --ifm-color-scheme: light;
+
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+
+[data-theme='dark'] {
+  background-color: transparent !important;
+
+  --ifm-color-scheme: dark;
   --ifm-navbar-link-color: rgb(var(--lsd-text-primary));
+  --ifm-navbar-background-color: rgb(var(--lsd-surface-primary));
   --ifm-dropdown-link-color: rgb(var(--lsd-text-primary));
   --ifm-dropdown-hover-background-color: rgb(var(--lsd-surface-secondary));
 
@@ -99,6 +105,12 @@
   --ifm-list-item-margin: 0.25rem;
   --ifm-list-paragraph-margin: 1rem;
 
+  /* Inline code */
+  --ifm-code-background: rgb(var(--lsd-text-primary)) !important;
+
+  /* CodeBlock */
+  --ifm-pre-padding: 1.125rem;
+
   /* Links. */
   --ifm-link-decoration: none;
 
@@ -209,6 +221,9 @@
 
   --ifm-footer-link-color: rgb(var(--lsd-text-primary));
   --ifm-color-content-secondary: rgb(var(--lsd-text-primary));
+
+  --ifm-hero-background-color: #f8f8fa;
+  --ifm-hero-text-color: var(--ifm-color-black);
 }
 
 @include utils.responsive('lg', 'down') {
@@ -245,12 +260,6 @@ a code {
   color: rgb(var(--lsd-text-secondary));
 }
 
-/* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme='dark'] {
-  --ifm-hero-background-color: #f8f8fa;
-  --ifm-hero-text-color: var(--ifm-color-black);
-}
-
 /* sidebar */
 :root {
   --doc-sidebar-width: 16.66vw !important;

packages/logos-docusaurus-theme/src/client/prism/dark-theme.ts

@@ -1,10 +1,9 @@
-// Converted automatically using ./tools/themeFromVsCode
 import { PrismTheme } from 'prism-react-renderer'
 
 const theme: PrismTheme = {
   plain: {
     color: '#ffffff',
-    backgroundColor: '#1E1E1E',
+    backgroundColor: 'transparent',
   },
   styles: [
     {
@@ -56,14 +55,12 @@ const theme: PrismTheme = {
       },
     },
     {
-      // Fix tag color
       types: ['tag'],
       style: {
         color: 'rgb(78, 201, 176)',
       },
     },
     {
-      // Fix tag color for HTML
       types: ['tag'],
       languages: ['markup'],
       style: {
@@ -77,7 +74,6 @@ const theme: PrismTheme = {
       },
     },
     {
-      // Fix punctuation color for HTML
       types: ['punctuation'],
       languages: ['markup'],
       style: {
@@ -104,4 +100,5 @@ const theme: PrismTheme = {
     },
   ],
 }
+
 export default theme

packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Container/index.js

@@ -1,18 +0,0 @@
-import React from 'react'
-import clsx from 'clsx'
-import { ThemeClassNames } from '@docusaurus/theme-common'
-import styles from './styles.module.css'
-
-export default function CodeBlockContainer({ as: As, ...props }) {
-  return (
-    <As
-      // Polymorphic components are hard to type, without `oneOf` generics
-      {...props}
-      className={clsx(
-        props.className,
-        styles.codeBlockContainer,
-        ThemeClassNames.common.codeBlock,
-      )}
-    />
-  )
-}

packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Container/index.tsx

@@ -0,0 +1,19 @@
+import Container from '@docusaurus/theme-classic/lib/theme/CodeBlock/Container'
+import type { WrapperProps } from '@docusaurus/types'
+import type ContainerType from '@theme/CodeBlock/Container'
+import clsx from 'clsx'
+import React from 'react'
+import styles from './styles.module.css'
+
+type Props = WrapperProps<typeof ContainerType>
+
+export default function ContainerWrapper(props: Props): JSX.Element {
+  return (
+    <>
+      <Container
+        {...props}
+        className={clsx(props.className, styles.codeBlockContainer)}
+      />
+    </>
+  )
+}

packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Container/styles.module.css

@@ -3,4 +3,5 @@
   color: var(--prism-color);
   margin-bottom: var(--ifm-leading);
   border: 1px solid rgb(var(--lsd-border-primary));
+  border-radius: 0;
 }

packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/Element.js

@@ -1,18 +0,0 @@
-import React from 'react'
-import clsx from 'clsx'
-import Container from '@theme/CodeBlock/Container'
-import styles from './styles.module.css'
-// <pre> tags in markdown map to CodeBlocks. They may contain JSX children. When
-// the children is not a simple string, we just return a styled block without
-// actually highlighting.
-export default function CodeBlockJSX({ children, className }) {
-  return (
-    <Container
-      as="pre"
-      tabIndex={0}
-      className={clsx(styles.codeBlockStandalone, 'thin-scrollbar', className)}
-    >
-      <code className={styles.codeBlockLines}>{children}</code>
-    </Container>
-  )
-}

packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/String.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import clsx from 'clsx'
-import { useThemeConfig } from '@docusaurus/theme-common'
+import { useThemeConfig, usePrismTheme } from '@docusaurus/theme-common'
 import {
   parseCodeBlockTitle,
   parseLanguage,
@@ -8,13 +8,15 @@ import {
   containsLineNumbers,
   useCodeWordWrap,
 } from '@docusaurus/theme-common/internal'
-import Highlight, { defaultProps } from 'prism-react-renderer'
+import Highlight, { defaultProps, type Language } from 'prism-react-renderer'
 import Line from '@theme/CodeBlock/Line'
 import CopyButton from '@theme/CodeBlock/CopyButton'
 import WordWrapButton from '@theme/CodeBlock/WordWrapButton'
-import Container from '@theme/CodeBlock/Container'
+import Container from '@logos-theme/theme/CodeBlock/Container'
+import type { Props } from '@theme/CodeBlock/Content/String'
+
 import styles from './styles.module.css'
-import theme from './theme'
+import { Typography } from '@acid-info/lsd-react'
 
 export default function CodeBlockString({
   children,
@@ -23,25 +25,27 @@ export default function CodeBlockString({
   title: titleProp,
   showLineNumbers: showLineNumbersProp,
   language: languageProp,
-}) {
+}: Props): JSX.Element {
   const {
     prism: { defaultLanguage, magicComments },
   } = useThemeConfig()
-
   const language =
     languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage
-
+  const prismTheme = usePrismTheme()
   const wordWrap = useCodeWordWrap()
+
   // We still parse the metastring in case we want to support more syntax in the
   // future. Note that MDX doesn't strip quotes when parsing metastring:
   // "title=\"xyz\"" => title: "\"xyz\""
   const title = parseCodeBlockTitle(metastring) || titleProp
+
   const { lineClassNames, code } = parseLines(children, {
     metastring,
     language,
     magicComments,
   })
   const showLineNumbers = showLineNumbersProp ?? containsLineNumbers(metastring)
+
   return (
     <Container
       as="div"
@@ -52,13 +56,17 @@ export default function CodeBlockString({
           `language-${language}`,
       )}
     >
-      {title && <div className={styles.codeBlockTitle}>{title}</div>}
+      {title && (
+        <div className={styles.codeBlockTitle}>
+          <Typography variant="subtitle1">{title}</Typography>
+        </div>
+      )}
       <div className={styles.codeBlockContent}>
         <Highlight
           {...defaultProps}
-          theme={theme}
+          theme={prismTheme}
           code={code}
-          language={language ?? 'text'}
+          language={(language ?? 'text') as Language}
         >
           {({ className, tokens, getLineProps, getTokenProps }) => (
             <pre

packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/styles.module.css

@@ -1,12 +1,10 @@
 .codeBlockContent {
   position: relative;
   /* rtl:ignore */
-  direction: ltr;
-  border-radius: inherit;
 }
 
 .codeBlockTitle {
-  border-bottom: 1px solid var(--ifm-color-emphasis-300);
+  border-bottom: 1px solid var(--ifm-color-primary);
   font-size: var(--ifm-code-font-size);
   font-weight: 500;
   padding: 0.75rem var(--ifm-pre-padding);
@@ -78,5 +76,5 @@
 }
 
 :global(.theme-code-block:hover) .buttonGroup button {
-  opacity: 0.4;
+  opacity: 1;
 }

packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Line/index.js

@@ -1,34 +0,0 @@
-import React from 'react'
-import clsx from 'clsx'
-import styles from './styles.module.css'
-export default function CodeBlockLine({
-  line,
-  classNames,
-  showLineNumbers,
-  getLineProps,
-  getTokenProps,
-}) {
-  if (line.length === 1 && line[0].content === '\n') {
-    line[0].content = ''
-  }
-  const lineProps = getLineProps({
-    line,
-    className: clsx(classNames, showLineNumbers && styles.codeLine),
-  })
-  const lineTokens = line.map((token, key) => (
-    <span key={key} {...getTokenProps({ token, key })} />
-  ))
-  return (
-    <span {...lineProps}>
-      {showLineNumbers ? (
-        <>
-          <span className={styles.codeLineNumber} />
-          <span className={styles.codeLineContent}>{lineTokens}</span>
-        </>
-      ) : (
-        lineTokens
-      )}
-      <br />
-    </span>
-  )
-}

packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Line/styles.module.css

@@ -1,45 +0,0 @@
-/* Intentionally has zero specificity, so that to be able to override
-the background in custom CSS file due bug https://github.com/facebook/docusaurus/issues/3678 */
-:where(:root) {
-  --docusaurus-highlighted-code-line-bg: rgb(72 77 91);
-}
-
-:where([data-theme='dark']) {
-  --docusaurus-highlighted-code-line-bg: rgb(100 100 100);
-}
-
-:global(.theme-code-block-highlighted-line) {
-  background-color: var(--docusaurus-highlighted-code-line-bg);
-  display: block;
-  margin: 0 calc(-1 * var(--ifm-pre-padding));
-  padding: 0 var(--ifm-pre-padding);
-}
-
-.codeLine {
-  display: table-row;
-  counter-increment: line-count;
-}
-
-.codeLineNumber {
-  display: table-cell;
-  text-align: right;
-  width: 1%;
-  position: sticky;
-  left: 0;
-  padding: 0 var(--ifm-pre-padding);
-  background: var(--ifm-pre-background);
-  overflow-wrap: normal;
-}
-
-.codeLineNumber::before {
-  content: counter(line-count);
-  opacity: 0.4;
-}
-
-:global(.theme-code-block-highlighted-line) .codeLineNumber::before {
-  opacity: 0.8;
-}
-
-.codeLineContent {
-  padding-right: var(--ifm-pre-padding);
-}

packages/logos-docusaurus-theme/src/client/theme/CodeBlock/WordWrapButton/index.js

@@ -1,28 +0,0 @@
-import React from 'react'
-import clsx from 'clsx'
-import { translate } from '@docusaurus/Translate'
-import IconWordWrap from '@theme/Icon/WordWrap'
-import styles from './styles.module.css'
-export default function WordWrapButton({ className, onClick, isEnabled }) {
-  const title = translate({
-    id: 'theme.CodeBlock.wordWrapToggle',
-    message: 'Toggle word wrap',
-    description:
-      'The title attribute for toggle word wrapping button of code block lines',
-  })
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={clsx(
-        'clean-btn',
-        className,
-        isEnabled && styles.wordWrapButtonEnabled,
-      )}
-      aria-label={title}
-      title={title}
-    >
-      <IconWordWrap className={styles.wordWrapButtonIcon} aria-hidden="true" />
-    </button>
-  )
-}

packages/logos-docusaurus-theme/src/client/theme/CodeBlock/WordWrapButton/styles.module.css

@@ -1,8 +0,0 @@
-.wordWrapButtonIcon {
-  width: 1.2rem;
-  height: 1.2rem;
-}
-
-.wordWrapButtonEnabled .wordWrapButtonIcon {
-  color: var(--ifm-color-primary);
-}

packages/logos-docusaurus-theme/src/client/theme/CodeBlock/index.js

@@ -1,33 +0,0 @@
-import React, { isValidElement } from 'react'
-import useIsBrowser from '@docusaurus/useIsBrowser'
-import ElementContent from '@theme/CodeBlock/Content/Element'
-import StringContent from '@theme/CodeBlock/Content/String'
-/**
- * Best attempt to make the children a plain string so it is copyable. If there
- * are react elements, we will not be able to copy the content, and it will
- * return `children` as-is; otherwise, it concatenates the string children
- * together.
- */
-function maybeStringifyChildren(children) {
-  if (React.Children.toArray(children).some((el) => isValidElement(el))) {
-    return children
-  }
-  // The children is now guaranteed to be one/more plain strings
-  return Array.isArray(children) ? children.join('') : children
-}
-export default function CodeBlock({ children: rawChildren, ...props }) {
-  // 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()
-  const children = maybeStringifyChildren(rawChildren)
-  const CodeBlockComp =
-    typeof children === 'string' ? StringContent : ElementContent
-
-  return (
-    <CodeBlockComp key={String(isBrowser)} {...props}>
-      {children}
-    </CodeBlockComp>
-  )
-}

packages/logos-docusaurus-theme/src/client/theme/CodeBlock/index.tsx

@@ -0,0 +1,14 @@
+import CodeBlock from '@docusaurus/theme-classic/lib/theme/CodeBlock'
+import type { WrapperProps } from '@docusaurus/types'
+import type CodeBlockType from '@theme/CodeBlock'
+import React from 'react'
+
+type Props = WrapperProps<typeof CodeBlockType>
+
+export default function CodeBlockWrapper(props: Props): JSX.Element {
+  return (
+    <>
+      <CodeBlock {...props} />
+    </>
+  )
+}

packages/logos-docusaurus-theme/tsconfig.client.json

@@ -7,7 +7,7 @@
     "tsBuildInfoFile": "./lib/.tsbuildinfo-client",
     "rootDir": "src",
     "outDir": "lib",
-    "module": "esnext",
+    "module": "CommonJS",
     "target": "esnext",
     "jsx": "react",
     "types": [