vuejs / vuejs/docs

Same background colors for Custom Containers and Code Blocks in dark theme

Open
#2,764 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

style-improvement
Dominant language
Vue
Stars
3.2k
Forks
5k
Avg merge
14d 17h
Merged PRs (30d)
1

Description

When viewing the docs in dark theme, both Custom Containers and Code Blocks have the same background color of var(--vt-c-bg-soft). When Code Blocks are nested in Custom Containers (see example), the colors can be confusing.

I also checked VitePress -- it seems that the issue is with the custom theme of the vuejs/docs repo.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Begin in the vuejs/docs custom theme styles and search for var(--vt-c-bg-soft), then inspect the dark-theme rules for Custom Containers and Code Blocks. Use the linked v-model nested example to compare them. Done means the two elements have visibly distinct dark-theme backgrounds without changing the intended layout.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
design, documentation
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.