Change Doc Site Color Pallatte

[web3jenks]

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.