N
Nuxt•2w ago
fsnkty

Nuxt content shiki themes only ever uses the default

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  nitro: {
    preset: 'cloudflare_module',
    cloudflare: {
      deployConfig: true,
      wrangler: {
        d1_databases: [
          {
            binding: 'DB',
            database_name: 'shimeji-cafe',
            database_id: '44f42673-9e94-4a50-bfb5-f95311c2a599'
          }
        ]
      }
    }
  },
  modules: [
    '@nuxt/content',
    '@nuxt/fonts',
    '@nuxt/image',
    '@nuxt/test-utils',
    '@nuxtjs/tailwindcss',
  ],
  app: {
    head: {
      title: 'Shimeji Cafe',
      meta: [
        { name: 'description', content: 'fsnktys personal site' }
      ]
    }
  },
  appConfig: {
    appId: 'shimeji-cafe',
  },
  css: [
    './public/css/main.css'
  ],
  content: {
    build: {
      markdown: {
        highlight: {
          theme: {
            default: 'github-light',
            dark: 'github-dark',
          },
          langs: ['json', 'js', 'ts', 'html', 'css', 'vue', 'bash', 'markdown', 'nix']
        }
      }
    }
  },
  fonts: {
    provider: 'local',
    families: [
      { name: 'azuki' },
      { name: 'azukiP' },
    ]
  },
})
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  nitro: {
    preset: 'cloudflare_module',
    cloudflare: {
      deployConfig: true,
      wrangler: {
        d1_databases: [
          {
            binding: 'DB',
            database_name: 'shimeji-cafe',
            database_id: '44f42673-9e94-4a50-bfb5-f95311c2a599'
          }
        ]
      }
    }
  },
  modules: [
    '@nuxt/content',
    '@nuxt/fonts',
    '@nuxt/image',
    '@nuxt/test-utils',
    '@nuxtjs/tailwindcss',
  ],
  app: {
    head: {
      title: 'Shimeji Cafe',
      meta: [
        { name: 'description', content: 'fsnktys personal site' }
      ]
    }
  },
  appConfig: {
    appId: 'shimeji-cafe',
  },
  css: [
    './public/css/main.css'
  ],
  content: {
    build: {
      markdown: {
        highlight: {
          theme: {
            default: 'github-light',
            dark: 'github-dark',
          },
          langs: ['json', 'js', 'ts', 'html', 'css', 'vue', 'bash', 'markdown', 'nix']
        }
      }
    }
  },
  fonts: {
    provider: 'local',
    families: [
      { name: 'azuki' },
      { name: 'azukiP' },
    ]
  },
})
2 Replies
kapa.ai
kapa.ai•2w ago
Hi @fsnkty. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources, Nuxt Content uses Shiki for code highlighting and supports specifying multiple themes for different color modes (e.g., light/dark) in your nuxt.config.ts under content.build.markdown.highlight.theme. Your configuration is correct in structure: 
content: {
  build: {
    markdown: {
      highlight: {
        theme: {
          default: 'github-light',
          dark: 'github-dark',
        },
        langs: ['json', 'js', 'ts', 'html', 'css', 'vue', 'bash', 'markdown', 'nix']
      }
    }
  }
}
content: {
  build: {
    markdown: {
      highlight: {
        theme: {
          default: 'github-light',
          dark: 'github-dark',
        },
        langs: ['json', 'js', 'ts', 'html', 'css', 'vue', 'bash', 'markdown', 'nix']
      }
    }
  }
}
According to the documentation, this setup should apply github-light in the default (light) mode and github-dark when the page is in dark mode. The theme switching is compatible with the Color Mode module, and the documentation specifically notes:
If you are using multiple themes, it's recommended to always have a default theme specified.
...
This option is compatible with Color Mode module.
If you are using multiple themes, it's recommended to always have a default theme specified.
Docs > Getting-started > highlight
However, if you are finding that only the default theme is ever used and the dark theme is ignored, the knowledge sources do not provide troubleshooting steps or known issues for this specific problem. The documentation assumes that, when the color mode changes (e.g., via the Color Mode module or a class on <html>), the correct theme will be applied automatically. Possible causes (based on documentation): - The color mode is not being set or switched correctly in your app, so the dark theme is never triggered. - The integration between @nuxt/content and the color mode module may not be working as expected, or the required class (e.g., dark on <html>) is missing. - There may be a limitation or bug not covered in the documentation. What you can check: - Ensure you have the Color Mode module enabled and configured if you want automatic theme switching. - Make sure the dark class is being applied to the <html> element when in dark mode, as this is how Nuxt Content detects which theme to use. - If you are not using the Color Mode module, you may need to manually toggle the class or ensure your dark mode logic is compatible. Summary:
Your configuration matches the documented approach for multiple Shiki themes in Nuxt Content. If only the default theme is ever used, the knowledge sources do not provide a direct solution or explanation for this issue. You may need to verify your color mode setup or consult further resources or GitHub issues for potential bugs or workarounds. Docs > Getting-started > highlight ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@1127233765471694909> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?