Skip to content

[Repo Assist] css: introduce --surface-background and --surface-border for theming#1161

Draft
github-actions[bot] wants to merge 2 commits intomainfrom
repo-assist/fix-issue-1156-surface-colors-5a744955effc8e3d
Draft

[Repo Assist] css: introduce --surface-background and --surface-border for theming#1161
github-actions[bot] wants to merge 2 commits intomainfrom
repo-assist/fix-issue-1156-surface-colors-5a744955effc8e3d

Conversation

@github-actions
Copy link
Copy Markdown
Contributor

🤖 This is an automated pull request from Repo Assist.

Summary

Closes #1156.

Introduces --surface-background and --surface-border CSS custom properties in fsdocs-default.css to decouple component surface colours from --header-background/--header-border.

Motivation

--header-background was used for both the actual page header and every surface component (copy-code button, blockquotes, sidebar menus, dialogs, tooltips, API tables). A theme with a dark header ended up with mismatched UI elements (e.g. a black copy-code button on a light code block).

Changes

  • Added --surface-background: var(--header-background) and --surface-border: var(--header-border) to :root (fully backwards-compatible defaults)
  • Updated all non-header component references to use the new variables
  • Actual <header> elements keep --header-*

After this change

:root {
    --header-background: #1a1a2e; /* dark header */
    --surface-background: #f5f5f5; /* light surfaces */
}

Test Status

Build: 0 warnings, 0 errors
Tests: 281/281 Markdown tests pass


Generated by 🌈 Repo Assist, see workflow run.

Generated by 🌈 Repo Assist, see workflow run. Learn more.

To install this agentic workflow, run

gh aw add githubnext/agentics/workflows/repo-assist.md@e1ecf341a90b7bc2021e77c58685d7e269e20b99

Decouple component surface colours from --header-background/--header-border.

The new variables default to the header values for full backwards compatibility.
Themes that need a distinct surface colour (e.g. dark header + light content
surfaces) can now override --surface-background and --surface-border without
touching the header variables.

Affected components:
- .copy-code-button (background + border)
- --mobile-menu-background
- --aside-background (sidebar)
- --blockquote-bacground-color
- --page-menu-background-color + border
- --nav-item-border-color
- --dialog-background-color
- div.fsdocs-tip (border)
- API docs table row borders
- dialog list item borders
- #fsdocs-main-menu sidebar border

Closes #1156

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@nojaf
Copy link
Copy Markdown
Collaborator

nojaf commented Apr 10, 2026

/repo-assist, I find surface to be a confusing variable name here, looking at the name alone, I could not quite figure what this could possibly mean. Try again

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Decouple surface/component colors from --header-background

1 participant