Fix dark mode search input visibility and floating theme switcher

[Copilot]

Two CSS issues broke the dark mode UX: search input text was invisible due to missing color definition, and the theme switcher floated incorrectly when the viewport narrowed.

Changes

Search input visibility (docs/_assets/css/dark.css)

• Added --search-input-color: #fff to dark mode CSS variables
• Sets white text on dark background for proper contrast

Theme switcher positioning (docs/_assets/css/custom.css)

• Hide switcher at ≤768px viewport width via media query
• Prevents floating icon when sidebar collapses on mobile

@media only screen and (max-width: 768px) {
  a.switch {
    display: none;
  }
}

Screenshots

Before - Invisible search input in dark mode:

Before - Floating moon on resize:

After - Search input visible in dark mode:

After - No floating moon on resize:

Original prompt

Fix the display bugs related to the dark mode switch as outlined in issue #3:

1. Invisible textfield: A text field becomes invisible under certain conditions. Reference in the issue:

2. Floating moon: When resizing the window to a smaller size on desktop, there's a floating moon artifact. Reference in the issue:

This pull request was created from Copilot chat.

---

💡 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.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
guide-v1	Ready	Preview, Comment	Jan 1, 2026 7:26pm