How to always use dark theme for code blocks?

[Arturexe]

In the past, vitepress seemed to use dark code blocks for light and dark mode. in a newer version they seemed to switch the color of the code blocks depending on light/dark mode. I really dislike the bright code blocks in light mode. How can I configure vitepress to always use dark code blocks? I've tried playing around with classes inside /theme/custom.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

.theme-default-content code,
.theme-default-content pre {
  background-color: #1e1e1e; /* Dark background */
  color: #c5c8c6; /* Light text */
}

.--vp-code-block-bg {
  background-color: black;
}

without success.

[brc-dd]

#3154 (comment)

[Arturexe]

the config option seems to affect the code blocks but the css does not. any idea why?

config.ts:

import { defineConfig } from 'vitepress'
import { buildSidebarConfig } from '../../src/lib/vitepressSidebar'

// https://vitepress.dev/reference/site-config
export default defineConfig({
  base: '/docs/',
  title: 'Trinity UI Documentation',
  titleTemplate: ':title',
  lastUpdated: true,
  themeConfig: {
    // https://vitepress.dev/reference/default-theme-config
    logo: '/.vitepress/logo.ico',
    siteTitle: 'Trinity UI Docs',
    // nav: [{ text: 'Home', link: '/' }],
    sidebar: [
      {
        items: buildSidebarConfig('src/components'),
      },
    ],
    socialLinks: [
      { icon: 'github', link: 'https://github.com/vuejs/vitepress' },
    ],
  },
  markdown: {
    theme: 'github-dark',
  },
})

/theme/custom.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

/* https://vitepress.dev/guide/extending-default-theme#customizing-css */
:root {
  --vp-code-block-color: rgba(255, 255, 245, 0.86);
  --vp-code-block-bg: #161618;
  --vp-code-block-divider-color: #000000;

  --vp-code-lang-color: rgba(235, 235, 245, 0.38);

  --vp-code-line-highlight-color: #000000;
  --vp-code-line-number-color: rgba(235, 235, 245, 0.38);

  --vp-code-copy-code-border-color: rgba(82, 82, 89, 0.32);
  --vp-code-copy-code-bg: #252529;
  --vp-code-copy-code-hover-border-color: rgba(82, 82, 89, 0.32);
  --vp-code-copy-code-hover-bg: #323238;
  --vp-code-copy-code-active-text: rgba(255, 255, 245, 0.86);

  --vp-code-tab-text-color: rgba(235, 235, 245, 0.6);
  --vp-code-tab-hover-text-color: rgba(255, 255, 245, 0.86);
  --vp-code-tab-active-text-color: rgba(255, 255, 245, 0.86);
}

[brc-dd]

You probably aren't adding it properly. Try to compare your code with this - https://stackblitz.com/edit/vite-2ceh35

[Arturexe]

you were right. I was importing the css in index.ts in the wrong order:

import './custom.css'
import DefaultTheme from 'vitepress/theme'
export default { ...DefaultTheme }

but it had to be imported like so:

import DefaultTheme from 'vitepress/theme'
import './custom.css'
export default DefaultTheme