Skip to content

various: un-hardcode the sidebar text color - #613

Open
FormalSnake wants to merge 1 commit into
Kopuz-org:masterfrom
FormalSnake:fix/vaxry-sidebar-light-theme
Open

various: un-hardcode the sidebar text color#613
FormalSnake wants to merge 1 commit into
Kopuz-org:masterfrom
FormalSnake:fix/vaxry-sidebar-light-theme

Conversation

@FormalSnake

Copy link
Copy Markdown
Contributor

Since I am using matugen, kopuz can get in light mode. This is a bug I didn't see as I don't use light mode very often. This fixes the sidebar text color being hardcoded so that it can be any color, but mainly black in light mode depending on the theme.

Sanity Checking

  • I have read and followed the contribution guidelines.
  • My commits follow Kopuz's scoped commit convention and history hygiene
    rules.
  • I have disclosed any AI assistance as required by the AI policy in the
    contribution guidelines, or this pull request did not use AI assistance.
  • I have tested and self-reviewed my changes.

Style and Consistency

  • My changes are consistent with the existing crate boundaries and Dioxus
    style.
  • I ran cargo fmt --all --check or cargo fmt --all as appropriate.
  • I ran cargo clippy --workspace --all-targets -- -D warnings, or
    explained why it could not be run.
  • I kept generated assets, translations, and packaging files in sync when
    this change depends on them.

Testing

  • I ran the smallest relevant verifier for this change.
  • I documented any platform or verifier that I could not run.

Tested on platform(s):

  • x86_64-linux
  • aarch64-linux
  • x86_64-darwin
  • aarch64-darwin
  • Windows
  • Android
  • iOS

The vaxry sidebar hardcoded rgba(255,255,255,*) for section headers, nav
items and the divider. On the theme-following surface a light palette
(matugen light mode) renders that as white text on a near-white
background. Mix from a --vaxry-sidebar-fg base instead: the theme text
colour on the themed surface, still literal white on the fixed dark
backgrounds (android drawer, artwork scrim).
@coderabbitai

coderabbitai Bot commented Aug 7, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

📝 Walkthrough

Walkthrough

The sidebar now defines --vaxry-sidebar-fg for supported platform and theme modes. Section labels, dividers, inactive icons, and inactive labels use this variable through color-mix instead of fixed white RGBA values.

Changes

Sidebar theme colors

Layer / File(s) Summary
Define and apply sidebar foreground color
crates/components/src/vaxry/sidebar.rs
The sidebar sets --vaxry-sidebar-fg for each platform and theme branch. Secondary labels, dividers, inactive icons, and inactive labels derive their colors from this variable.

Possibly related PRs

  • Kopuz-org/kopuz#250: Replaces hardcoded white UI colors with theme-aware variables in another component.

Suggested reviewers: temidaradev

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and concisely describes replacing the hardcoded sidebar text color with a theme-dependent color.
Description check ✅ Passed The description explains the light-mode bug, the theme-dependent color fix, and the relevant testing performed.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@crates/components/src/vaxry/sidebar.rs`:
- Around line 167-168: Update the style string in the Vaxry sidebar rendering
code to assign --vaxry-sidebar-fg from the selected theme’s text-color token
rather than the fixed --color-white value. Preserve the existing width and
background declarations.
🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: f8dc38e2-669f-4182-b631-01f051ae0dd7

📥 Commits

Reviewing files that changed from the base of the PR and between 7f93887 and 4a12bb1.

📒 Files selected for processing (1)
  • crates/components/src/vaxry/sidebar.rs

Comment on lines +167 to +168
"width: {current_width}px; background: var(--color-neutral-900); --vaxry-sidebar-fg: var(--color-white);"
)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

rg -n -C 5 --glob '*.{css,rs,ron,toml,html}' \
  -- '--color-white|--color-neutral-900|--vaxry-sidebar-fg' .

Repository: Kopuz-org/kopuz

Length of output: 50372


🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== files with theme/color variable assignments =="
rg -n -C 3 --glob '*.{css,rs,ron,html,js,ts}' -- '--color-white|:root|color-scheme|theme' crates/kopuz/assets crates/utils/src/themes.rs crates/components/src/vaxry/sidebar.rs crates/components/src/source_switcher.rs | head -n 220

echo
echo "== variable definitions in tailwind.css =="
sed -n '1,70p' crates/kopuz/assets/tailwind.css

echo
echo "== theme source =="
sed -n '1,220p' crates/utils/src/themes.rs

Repository: Kopuz-org/kopuz

Length of output: 50372


🏁 Script executed:

#!/bin/bash
set -euo pipefail

python3 - <<'PY'
import json, pathlib, re

for path in pathlib.Path("assets/themes.json").parent.glob("assets/themes.json"):
    data = json.loads(path.read_text())
    break
else:
    print("NO THEMES_JSON")
    raise SystemExit

re_vars = re.compile(r"--([A-Za-z0-9_-]+)")
print("themes:", [t["id"] for t in data.get("dark", []) + data.get("light", [])])

print("\n--color-white definitions:")
for theme in data.get("dark", []) + data.get("light", []):
    if "--color-white" in theme.get("vars", {}):
        print(f"{theme['id']} ({theme['kind']}): {theme['vars']['--color-white']}")

print("\n--color-neutral-900 definitions:")
for theme in data.get("dark", []) + data.get("light", []):
    if "--color-neutral-900" in theme.get("vars", {}):
        print(f"{theme['id']} ({theme['kind']}): {theme['vars']['--color-neutral-900']}")

print("\nthemes defining text color differently and background neutrals:")
for theme in data.get("dark", []) + data.get("light", []):
    bg = theme.get("vars", {}).get("--color-neutral-900") or theme.get("vars", {}).get("--color-black")
    text = theme.get("vars", {}).get("--color-white") or theme.get("vars", {}).get("--color-stone-600")
    if text and text != "`#fff`" or bg and "hsl" in text:
        print(theme["id"], theme["kind"], "bg=", bg, "text=", text)
PY

Repository: Kopuz-org/kopuz

Length of output: 168


🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== all themes.json locations =="
find . -path ./target -prune -o -name themes.json -print

echo
echo "== all token definitions in JSON themes =="
python3 - <<'PY'
import json, pathlib, re
for path in pathlib.Path("assets/themes.json").parent.glob("assets/themes.json"):
    try:
        data = json.loads(path.read_text())
    except Exception as e:
        print(f"ERROR {path}: {e}")
        continue
    print(f"FILE {path}")
    white=[]
    neutral900=[]
    for theme in data.get("dark",[]) + data.get("light",[]):
        for key in ("--color-white","--color-neutral-900","--color-black"):
            if key in theme.get("vars",{}):
                print(f"{theme.get('id')}/{theme.get('kind')} {key}: {theme['vars'][key]}")
                if key == "--color-white": white.append((theme.get('id'), theme.get('kind'), theme['vars'][key]))
                if key == "--color-neutral-900": neutral900.append((theme.get('id'), theme.get('kind'), theme['vars'][key]))
    print("white definitions:", white)
    print("neutral-900 definitions:", neutral900)
PY

echo
echo "== exact sidebar lines =="
sed -n '140,175p' crates/components/src/vaxry/sidebar.rs

echo
echo "== references to all_themes_css / theme vars =="
rg -n --glob '*.rs' 'all_themes_css|custom_theme_to_css|theme_map|theme-\{|\.theme-|--color-white|--color-neutral-900|--color-' crates | head -n 220

Repository: Kopuz-org/kopuz

Length of output: 22481


Use a theme-following foreground token for the Vaxry sidebar.

--vaxry-sidebar-fg currently reads --color-white, which resolves to the fixed #fff fallback in the base CSS; the per-theme text color comes from --color-white in the theme map, not a separate token. Map the sidebar foreground to the selected theme’s text token so light themes do not render light foreground on a light sidebar.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@crates/components/src/vaxry/sidebar.rs` around lines 167 - 168, Update the
style string in the Vaxry sidebar rendering code to assign --vaxry-sidebar-fg
from the selected theme’s text-color token rather than the fixed --color-white
value. Preserve the existing width and background declarations.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant