docs: improve colors on dark mode

[AbdelrahmanHafez]

Summary

This PR fixes a few issues with dark mode, mostly contrasts or areas not covered by the original dark mode version.

I'm colorblind so I particularly found that the logo on the left menu had poor contrast and fails WCAG contrast test. I'm not a designer so I used AI to decide the correct color for the mongoose brand on dark mode, and it calculated #FFB4B4 as the mongoose color for dark backgrounds, which passes WCAG contrast test. I modified the CSS code to be parameterized, so that if we decide to change the color from #FFB4B4 to something else, we just need to change it in one place and re-generate the logo with that new color.

Changes

WCAG Contrast Test

Before	After

Homepage & GitHub Buttons

Before	After

Logo & Sidebar Menu

Before	After

Version Dropdown

Before	After

Enterprise Page Buttons

Before	After

Jobs Panel

Before	After

CSS Refactoring

Consolidated Theme Variables

Extracted all hardcoded color values into CSS custom properties defined in mongoose5.css:

• --brand-primary - Mongoose brand color (#800 light, #FFB4B4 dark)
• --btn-bg, --btn-text-shadow - Button styling
• --tagline-text-shadow - Homepage tagline effect
• --focus-ring, --focus-ring-shadow - Accessibility focus indicators

SVG Logo with CSS-controlled Color

Replaced PNG logo swap approach with a single SVG logo using CSS mask-image:

• Modified mongoose.svg to use currentColor instead of hardcoded #880000
• Logo element uses background-color: var(--brand-primary) with SVG as mask
• Eliminates need for separate light/dark PNG files
• Logo color automatically follows theme via CSS variable

No-JS / System Preference Support

Added @media (prefers-color-scheme: dark) fallbacks alongside [data-theme="dark"] selectors:

• Prevents white flash on initial page load for dark mode users
• Supports users with JavaScript disabled
• Uses :root:not([data-theme="light"]) pattern to allow manual override

Consolidated Dark Mode Selectors

• Replaced .code-theme-dark class with [data-theme="dark"] attribute selectors
• Removed redundant class toggling from theme-toggle.js
• All dark mode styles now consistently use [data-theme="dark"]

Other Improvements

• Fixed squished text in homepage code blocks (line-height: 1.5)
• Removed CSS variable fallbacks for consistency (all variables defined in :root)
• Added .mongoose-btn-outline and .mongoose-btn-solid classes for brand buttons
• Fixed various hardcoded colors in Jobs panel, version dropdown, search input

[Copilot]

Pull request overview

This PR improves dark mode support by enhancing color contrast for WCAG compliance, consolidating CSS theme definitions, and fixing visual inconsistencies. The main achievement is improving the Mongoose logo color contrast from failing to passing WCAG standards by using #FFB4B4 for dark backgrounds.

Key changes:

• Refactored CSS theme system from 4 duplicate blocks to 2 centralized definitions (:root, [data-theme="light"] and [data-theme="dark"])
• Added brand-specific CSS variables (--brand-primary, --brand-primary-hover, --brand-primary-subtle) with dark mode variants
• Created reusable button component classes (mongoose-btn-outline, mongoose-btn-solid) with proper dark mode support

Reviewed changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
docs/images/mongoose5_62x30_transparent_light.png	New logo variant with light colors (#FFB4B4) for dark mode backgrounds
docs/enterprise.md	Replaced inline button styles with reusable CSS classes
docs/css/style.css	Replaced media query dark mode blocks with data-theme attribute selectors; added GitHub button iframe dark mode support
docs/css/mongoose5.css	Consolidated theme variable definitions; added brand color variables; created button component styles; improved jobs panel, version dropdown, and menu theming
docs/css/api.css	Converted media query dark mode styles to data-theme attribute selectors

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

@AbdelrahmanHafez I've opened a new pull request, #15880, to work on those changes. Once the pull request is ready, I'll request review from you.

[hasezoey]

I have run it locally, while in dark mode i noticed that when moving between pages, likely due to the removal of @media query, it flashes white for a bit until the js loads and can apply the theme. This is in my opinion very distracting.
(It is also not helped by the fact that body has a transition which can make this "white flash" duration slightly longer)

Also is there a maybe a way i dont know of to also add a @media query to the [data-theme] tags? Having a media query would be good for no-js environments. (not a requirement, but a good to have)

Finally, while we are at it to improve colors:

• the code blocks still look way too blue
• the API pages also look way too blue
• couldnt class code-theme-dark be combined into data-theme?

For some reason the squished text in the homepage's code blocks is back.

Some example screenshots for color suggestions

Before:

After (changing --link-color to --brand-primary as a quick test):

Squished text:

[AbdelrahmanHafez]

@hasezoey addressed feedback:

white flash when moving between pages due to removal of @media query

Fixed - restored @media (prefers-color-scheme: dark) queries using the :root:not([data-theme="light"]) pattern alongside [data-theme="dark"] selectors. This handles both no-JS and the initial page load flash.

code blocks still look way too blue / API pages also look way too blue

Changed dark mode --link-color from #5aabff to #FFB4B4 (brand color) - matches what you showed in your screenshot.

couldn't class code-theme-dark be combined into data-theme?

Done - replaced all .code-theme-dark with [data-theme="dark"] in github.css and removed the class toggling from theme-toggle.js.

squished text in homepage code blocks is back

Added line-height: 1.6 to pre code in github.css - the code element wasn't inheriting line-height from its parent pre.

Maybe we should switch to always use the SVG instead and color that?

Good call, changed mongoose.svg to use currentColor and switched to CSS mask-image:

#logo {
  background-color: var(--brand-primary);
  mask-image: url('/docs/images/mongoose.svg');
}

Isn't this property already inherited by the definition above?

Removed the redundant background: transparent.

[hasezoey]

Definitely looks better now; no more page load flash or too-blue-ness.

Also now that brand-primary colors are applied in dark mode, do you think it would also be feasible for light mode (instead of current link color blue)? (or is the contrast too low?)

FYI just noticed that hompage's #header > h1 > a::before should likely be disabled.

Screenshots

Homepage logo ::before (captured on the live site, but also confirmed here):

Also i dont know a better place, but the Fork me on github banner is somewhat obscuring the theme toggle on the homepage:

Finally, i dont know if this intentional, but the Github Sponsers still have that weird outline around them:

[vkarpov15]

Minor nitpick but I think the new dark color --brand-primary and --brand-primary-hover are a bit too different from current, WDYT about #FF4747 and #F55? I think this is more faithful while still passing contrast check

Also, I think I'd prefer to keep the previous link color #5aabff

[hasezoey]

FYI #FF4747 is 5.17:1 contrast and #FF5555 is 5.53:1 contrast, not 6.24:1 as the background is #1A1A1A not #000000 (though that does not change the listed Pass/Fails). (please note that i have no clue about colors or contrast)
Personally, this "fuller color" looks better to me.

Also, I think I'd prefer to keep the previous link color #5aabff

If that should be done, i would like to split link color and code color as otherwise i really think the API page (and any code block) will look too-blue. (and may be confusing as most of the code block things are the link color, but cannot actually be clicked).