Add automatic dark theme support via prefers-color-scheme

[Copilot]

Summary

This PR implements automatic dark theme support for the OpenAPI Initiative website. The theme automatically switches based on the user's operating system color scheme preference using the CSS prefers-color-scheme media query, with no manual controls required.

Changes Made

• Created dark color scheme using CSS custom properties in _sass/custom/custom.scss
• Implemented automatic theme switching based on OS preference using prefers-color-scheme media query
• Refactored CSS to remove unnecessary !important declarations and consolidate dark mode styles
• Fixed CSS comment formatting for better maintainability
• Fixed dark mode aux-nav white box issue - Added --aux-nav-bg variable for proper dark background
• Fixed navigation highlight contrast - Added --nav-highlight variable with darker color for better contrast
• Updated navigation highlight to neutral light grey - Changed from #44434d to #3d3d3d for a pure neutral grey without color gradient
• Fixed syntax highlighting white background - Added dark background for .hljs, pre.nohighlight, and pre code elements with adjusted syntax colors for dark mode readability
• Passed code review and security checks

Implementation Details

Light Mode (Default):

• Headings: #4E5B31 (Dark Green)
• Links: #6BA539 (Primary Green)
• Background: White (#fff)
• Nav highlight: #eeebee
• Code blocks: #f5f6fa (light grey)

Dark Mode:

• Headings: #97D700 (Bright Green)
• Links: #97D700 (Bright Green)
• Background: #27262b (Dark Gray)
• Code blocks: #31343f (Dark background for better contrast)
• Aux-nav background: #27262b (Dark, no white box)
• Nav highlight: #3d3d3d (Neutral light grey, no gradient)
• Syntax highlighting: Adjusted colors for optimal contrast on dark background

Technical Approach

• Uses CSS custom properties (CSS variables) for all theme-dependent colors
• Variables are redefined within a @media (prefers-color-scheme: dark) query for dark mode
• All styling references the CSS variables for consistency and maintainability
• Syntax highlighting colors specifically tuned for dark mode readability
• No JavaScript required - purely CSS-based automatic detection

Testing

Tested with both light and dark themes to ensure proper color contrast and readability in both modes.

Screenshots:

• Syntax highlighting fixed:
  

Browser Compatibility

The prefers-color-scheme media query is supported in all modern browsers:

• Chrome/Edge 76+
• Firefox 67+
• Safari 12.1+
• Opera 62+

Users on older browsers will see the default light theme.

Security Summary

No security vulnerabilities introduced. Changes are purely cosmetic CSS modifications that improve user experience.

---

• Fixes add support for dark theme #23

Original prompt

---

This section details on the original issue you should resolve

<issue_title>add support for dark theme</issue_title>
<issue_description>Since all the sub-spec sections all support a dark theme, or soon will, it be nice from an experience perspective if this website could also support a dark theme.
We don't need any controls, it can automatically switch based on the OS settings.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes add support for dark theme #23

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[baywet]

@copilot when using the dark theme, I'm getting a white box in the top right corner where the links "latest arazzo spec" and others are, can you fix that?

Also I'm getting a white navigation highlight on the left, this should be a darker color to provide better contrast for the links

[Copilot]

@copilot when using the dark theme, I'm getting a white box in the top right corner where the links "latest arazzo spec" and others are, can you fix that?

Also I'm getting a white navigation highli...

Fixed both issues in commit 420df56:

1. Aux-nav white box - Added --aux-nav-bg CSS variable that sets the background to #27262b in dark mode
2. Navigation highlight contrast - Added --nav-highlight CSS variable with darker color #44434d for better contrast in dark mode

[ralfhandl]

@copilot make the navigation highlight a light grey without color gradient.

[Copilot]

@copilot make the navigation highlight a light grey without color gradient.

Updated navigation highlight to neutral light grey in commit 61d641d. Changed from #44434d to #3d3d3d - a pure neutral grey without any color gradient.

[ralfhandl]

@copilot code syntax highlighting, for example on page oas/3.2/schema/2025-09-17.html, shows a white background. Please make it dark.

[Copilot]

@copilot code syntax highlighting, for example on page oas/3.2/schema/2025-09-17.html, shows a white background. Please make it dark.

Fixed syntax highlighting background in commit 72b8279. Added dark background styles for .hljs, pre.nohighlight, and pre code elements, plus adjusted syntax highlighting colors for optimal contrast on dark background.