Skip to content

Add dark mode with persistent user preference #5025

Description

@anshul23102

Problem

CodeHarborHub has no dark mode. Developers who prefer dark themes — a majority of the target audience — must read white-background content that causes eye strain during extended study sessions.

Proposed Solution

Since CodeHarborHub is built on Docusaurus, enable the built-in dark mode theme support:

// docusaurus.config.js
module.exports = {
  themeConfig: {
    colorMode: {
      defaultMode: 'light',
      disableSwitch: false,
      respectPrefersColorScheme: true,
    },
  },
};

Customize dark theme CSS variables to match CodeHarborHub's brand palette:

[data-theme='dark'] {
  --ifm-background-color: #1a1b2e;
  --ifm-font-color-base: #e2e8f0;
  --ifm-color-primary: #64ffda;
}

Additional Context

Level 2 feature. Verify all custom components look correct in dark mode, especially SVG diagrams that use hardcoded dark colors.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions