Skip to content

Add 'dark mode'#351

Open
recrwplay wants to merge 47 commits intomasterfrom
dark-mode
Open

Add 'dark mode'#351
recrwplay wants to merge 47 commits intomasterfrom
dark-mode

Conversation

@recrwplay
Copy link
Copy Markdown
Collaborator

This PR adds a 'dark mode' option for viewing docs pages.

There are essentially two components:

  • The addition of color-scheme: light dark;, which allows different styles to be defined and used for when the user's browser or system settings indicate that they prefer 'light' or 'dark' mode.
  • The addition of a menu to allow the user to switch between 'light' and 'dark' modes, or to accept the 'system' default. This menu tries to follow the pattern used in the Aura console.

The design system version has been updated to the latest, and color vars are taken from tokens in the design package.

Ideally all colors are defined in vars-light.css and vars-dark.css. There should be no hard-coded colors in other css files.

For this POC, a set of vars is defined in vars-light.css and an equivalent set are defined in vars-dark.css and prefixed with --dark. For example, the following vars are defined:

--navbar-menu-background: var(--palette-neutral-10);
--dark--navbar-menu-background: var(--theme-dark-color-neutral-bg-weak);

To use these values in a css selector you would use:

background-color: light-dark(var(--navbar-menu-background), var(--dark--navbar-menu-background));

It is probably better to define the light-dark(...) values in a single vars.css file.

@netlify
Copy link
Copy Markdown

netlify bot commented Dec 30, 2025

Deploy Preview for neo4j-docs-ui ready!

Name Link
🔨 Latest commit a84b171
🔍 Latest deploy log https://app.netlify.com/projects/neo4j-docs-ui/deploys/69c693afbf62a3000865b129
😎 Deploy Preview https://deploy-preview-351--neo4j-docs-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

recrwplay and others added 18 commits March 24, 2026 12:57
When adding a label to a series of elements that will be grouped in tabs
in the output, the labels are not included in the generated `.tabbed`
div.

eg

```
[role=tabbed-example label--enterprise-edition]
=====
[role=include-with-tabname]
======
```

This PR includes the `.labels` div as the first child of the `.tabbed`
div and defines a margin for the labels div in this context.
Fixes an issue where the selector to add a label to the whole tabbed
section needed to be more specific.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants