Skip to content

various: un-hardcode the sidebar text color #613

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
FormalSnake wants to merge 1 commit into
base: master
Choose a base branch
from
Open

various: un-hardcode the sidebar text color #613

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 10 additions & 8 deletions crates/components/src/vaxry/sidebar.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,21 +149,23 @@ pub fn SidebarVaxry(props: SidebarProps) -> Element {
};
let root_style = if is_android {
if *mobile_collapsed.read() {
"position: fixed; left: 0; top: 0; z-index: 100; height: 100%; width: 0px; background: rgba(10,10,10,0.97);"
"position: fixed; left: 0; top: 0; z-index: 100; height: 100%; width: 0px; background: rgba(10,10,10,0.97); --vaxry-sidebar-fg: #fff;"
.to_string()
} else {
"position: fixed; left: 0; top: 0; z-index: 100; height: 100%; width: 280px; background: rgba(10,10,10,0.97);".to_string()
"position: fixed; left: 0; top: 0; z-index: 100; height: 100%; width: 280px; background: rgba(10,10,10,0.97); --vaxry-sidebar-fg: #fff;".to_string()
}
} else if config.read().theme == "album-art"
|| config.read().cover_art_background
|| !config.read().custom_background_path.is_empty()
{
format!("width: {current_width}px; background: rgba(0, 0, 0, 0.4);")
format!("width: {current_width}px; background: rgba(0, 0, 0, 0.4); --vaxry-sidebar-fg: #fff;")
} else {
// Theme-following surface (not a fixed black overlay) so the Vaxry chrome
// harmonises with the active palette and the switcher text stays readable
// on light themes.
format!("width: {current_width}px; background: var(--color-neutral-900);")
format!(
"width: {current_width}px; background: var(--color-neutral-900); --vaxry-sidebar-fg: var(--color-white);"
)
Comment on lines +167 to +168

@coderabbitai coderabbitai Bot Aug 7, 2026

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.

};

rsx! {
Expand Down Expand Up @@ -227,7 +229,7 @@ pub fn SidebarVaxry(props: SidebarProps) -> Element {
div { class: "px-4 pt-3 pb-1",
span {
class: "text-[10px] font-bold",
style: "color: rgba(255,255,255,0.25);",
style: "color: color-mix(in oklab, var(--vaxry-sidebar-fg) 25%, transparent);",
"{i18n::t(section_key)}"
}
}
Expand All @@ -249,7 +251,7 @@ pub fn SidebarVaxry(props: SidebarProps) -> Element {
}
}

div { class: "mx-3 my-2 h-px", style: "background: rgba(255,255,255,0.06);" }
div { class: "mx-3 my-2 h-px", style: "background: color-mix(in oklab, var(--vaxry-sidebar-fg) 6%, transparent);" }
for item in TOOL_ITEMS {
VaxryNavItem {
key: "{item.key}",
Expand Down Expand Up @@ -295,7 +297,7 @@ fn VaxryNavItem(
style: if active {
"color: var(--color-indigo-500);"
} else {
"color: rgba(255,255,255,0.4);"
"color: color-mix(in oklab, var(--vaxry-sidebar-fg) 40%, transparent);"
},
i { class: "{item.icon}" }
}
Expand All @@ -306,7 +308,7 @@ fn VaxryNavItem(
style: if active {
"color: var(--color-indigo-500); font-weight: 600;"
} else {
"color: rgba(255,255,255,0.7);"
"color: color-mix(in oklab, var(--vaxry-sidebar-fg) 70%, transparent);"
},
"{i18n::t(item.key)}"
}
Expand Down
Loading