babylonlabs-io / babylonlabs-io/babylonlabs.github.io

Change Doc Site Color Pallatte

Open
#395 0 comments 0 reactions 0 assignees View on GitHub
doc-site-development
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.