Skip to main content

Customize Theme

Customize OpenTree's visual style.

Theme Colors​

Edit src/css/custom.css:

:root {
  /* Primary color */
  --ifm-color-primary: #eb2f96;
  --ifm-color-primary-dark: #d4267f;
  --ifm-color-primary-darker: #c72476;
  --ifm-color-primary-darkest: #a51e62;
  --ifm-color-primary-light: #ee4aac;
  --ifm-color-primary-lighter: #f058b3;
  --ifm-color-primary-lightest: #f478c2;

  /* Background */
  --ifm-background-color: #1a1a2e;
  --ifm-background-surface-color: #1e1e2e;

  /* Text */
  --ifm-font-color-base: #ffffff;
  --ifm-font-color-secondary: #8f98aa;

  /* Border radius */
  --ifm-global-radius: 8px;

  /* Shadow */
  --ifm-global-shadow-lw: 0 2px 8px rgba(0, 0, 0, 0.15);
  --ifm-global-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
}

[data-theme='light'] {
  --ifm-color-primary: #1890ff;
  --ifm-background-color: #ffffff;
  --ifm-font-color-base: #1a1a2e;
}

Metaverse Theme​

The Metaverse desktop uses independent CSS variables:

/* static/metaverse-v2/style.css */

:root {
  --mv-bg-primary: #0d1117;
  --mv-bg-secondary: #161b22;
  --mv-bg-tertiary: #21262d;
  --mv-border: rgba(255, 255, 255, 0.12);
  --mv-text-primary: #e6edf3;
  --mv-text-secondary: #8b949e;
  --mv-accent: #eb2f96;
  --mv-accent-secondary: #1890ff;
  --mv-success: #52c41a;
  --mv-warn: #faad14;
  --mv-error: #ff4d4f;
}

Fonts​

:root {
  --ifm-font-family-base: 'Inter', -apple-system, 'Segoe UI', 'Microsoft YaHei', sans-serif;
  --ifm-font-family-monospace: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --ifm-heading-font-weight: 600;
}