babylonlabs-io / babylonlabs-io/babylonlabs.github.io
Change Doc Site Color Pallatte
- Dominant language
- TypeScript
- Stars
- 5
- Forks
- 10
- Avg merge
- 3d 1h
- Merged PRs (30d)
- 1
Description
Current colors:
Light Theme (:root)
Variable: --ifm-color-primary
Hex Value: #348f94
Description: Main primary color (teal)
────────────────────────────────────────
Variable: --ifm-color-primary-light
Hex Value: #33C5CE
Description: Lighter teal (also used as accent)
────────────────────────────────────────
Variable: --ifm-color-primary-darker
Hex Value: #BEDCC9
Description: Mint green
────────────────────────────────────────
Variable: --docs-color-primary
Hex Value: #33C5CE
Description: Docs primary teal
────────────────────────────────────────
Variable: --ifm-background-color
Hex Value: #ECF8F1
Description: Light mint background
────────────────────────────────────────
Variable: --ifm-background-surface-color
Hex Value: #ECF8F1
Description: Surface background
────────────────────────────────────────
Variable: --ifm-code-background
Hex Value: #D4E6DB
Description: Code block background
────────────────────────────────────────
Variable: --docs-color-text
Hex Value: #000000
Description: Primary text
────────────────────────────────────────
Variable: --docs-color-border
Hex Value: #dadde1
Description: Border color
Dark Theme ([data-theme='dark'])
Variable: --ifm-color-primary
Hex Value: #BEDCC9
Description: Mint green (primary in dark mode)
────────────────────────────────────────
Variable: --ifm-link-color
Hex Value: #BEDCC9
Description: Link color
────────────────────────────────────────
Variable: --ifm-background-color
Hex Value: #031B24
Description: Deep dark teal background
────────────────────────────────────────
Variable: --ifm-background-surface-color
Hex Value: #031B24
Description: Surface background
────────────────────────────────────────
Variable: --ifm-footer-background-color
Hex Value: #1c1c1c
Description: Footer dark gray
────────────────────────────────────────
Variable: --ifm-code-background
Hex Value: #102A36
Description: Code block background (dark teal)
────────────────────────────────────────
Variable: --docs-color-text
Hex Value: #ffffff
Description: Primary text
────────────────────────────────────────
Variable: --docs-color-border
Hex Value: #2e2e2e
Description: Border color
★ Insight ─────────────────────────────────────
1. Dual color system: The site uses both Docusaurus's --ifm-* CSS variables
and custom --docs-color-* variables. The --ifm-* variables control Docusaurus
framework styling, while --docs-color-* variables are used in custom
components.
2. Theme inversion pattern: Notice how #BEDCC9 (mint green) serves as a
lighter accent in light mode but becomes the primary color in dark mode. This
is a common accessibility pattern to ensure sufficient contrast.
3. Brand palette: The core colors are teal (#33C5CE, #348f94) and mint green
(#BEDCC9), with backgrounds shifting from mint-white (#ECF8F1) in light mode
to deep dark teal (#031B24) in dark mode.
Contributor guide
No contributing guide indexed for this repository
Research direction
The issue lists current light and dark CSS variables but names no target palette or file. Start by locating the Docusaurus theme styles that define the --ifm-* and --docs-color-* variables, then confirm the intended replacement colors and contrast requirements before changing them. Done means the approved palette is applied consistently in both themes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- design, documentation
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100