Fix navigation bar dark mode styling

[bhaskar0210s]

• Update header background to use dark theme color in dark mode
• Fix header text, icons, buttons, and links to use light colors for visibility
• Style search input fields for dark mode compatibility
• Replace hardcoded color in navigation section titles with theme variable

[google-cla]

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

[koverholt]

Thanks for adding fixes for these components in dark mode! ❤️ I haven't been testing our custom components in dark mode, so I appreciate the PR.

And thanks for the refactor commit that makes this easier to review - we can perform other cleanup in followup PRs if needed.

One thing I'd like to add is fixes for the tool cards and community resource cards. Please add the following to the bottom of custom.css:

/* Fix resource and tool cards in dark mode */

[data-md-color-scheme="slate"] .resource-card,
[data-md-color-scheme="slate"] .tool-card {
    background: var(--md-default-bg-color);
    border-color: var(--md-default-fg-color--lightest);
}

[data-md-color-scheme="slate"] .card-content h3,
[data-md-color-scheme="slate"] .tool-card-content h3,
[data-md-color-scheme="slate"] .translation-list a {
    color: var(--md-default-fg-color);
    background: var(--md-default-bg-color);
}

[data-md-color-scheme="slate"] .card-content p,
[data-md-color-scheme="slate"] .tool-card-content p {
    color: var(--md-default-fg-color--light);
}