Ensure Dark-Mode Functionality

Currently, all themes (kernux, openCode and bund) are not fully optimized/ it is not ensured that dark mode works everywhere.

While kernux (the base theme for all other themes) supports a dark mode by default, we need to check that everywhere in the theme, the kern classes are utilized correctly to ensure dark mode functionality.

For testing, the dark mode can be enabled on every “customer” page by changing the HTML attribute data-kern-theme="light" to data-kern-theme="dark" in the outer wrapping HTML tag.

[data-kern-theme="dark"] {
    --kern-typography-font-family-default: "Open Sans", sans-serif;
    --core-color-brand-700: #8099FF;
    --footer-color-background: #22335A;
    --kern-color-layout-background-default: #0A1320;
    --kern-color-layout-border: #364668;
}

  • After installing the packages via npm you can find the kern-ux defined and used styles in node_modules/@kern-ux/native/dist/kern.css — use this as a reference only

  • Ensure dark mode is styled correctly (everything is readable etc.) for all currently supported themes and by the kernux-nextra-theme https://gitlab.opencode.de/open-code/document-writing-tools/markdown-webbook/-/tree/v1/packages/kernux-nextra-theme/src/componentsoffered components

    • kern-ux (default)

    • openCode

    • bund

      • self-assessment
      • ui
      • 404.tsx
      • accessibilityLanguages.tsx
      • advanced-steps.tsx
      • back-to-top.tsx
      • banner.tsx
      • big-list-item.tsx
      • box.tsx
      • breadcrumb.tsx
      • collapse.tsx
      • copy-code.tsx
      • dynamic-teaser.tsx
      • feedback.tsx
      • flexsearch.tsx
      • footer.tsx
      • glossary.tsx
      • grid.tsx
      • head.tsx
      • hero.tsx
      • highlight-matches.tsx
      • highlighter.tsx
      • logo.tsx
      • markdown-editor.tsx
      • navbar.tsx
      • search.tsx
      • sidebar.tsx
      • skip-nav.tsx
      • steps.tsx
      • tabs.tsx
      • timeline.tsx
      • toc.tsx
      • umbrella-footer.tsx
      • umbrella-header.tsx
      • video.tsx

  • Add options to themeConfig and make functional

themeModeOptions: z.strictObject({
      themeModeSwitch: z.boolean().optional(), // default true
      forceThemeMode: z.enum(["light", "dark"]).optional(), // default none -> use systems preference
    }),
  • Add flags for markdown-webbook cli to configure theme modes