vitepress-theme-tui/src/styles/themes/default.css

A terminal UI theme for VitePress

.tui-theme-default {
  --vp-c-brand-1: #047857;
  --vp-c-brand-2: #27272a;
  --vp-c-brand-3: #3f3f46;

  --vp-button-brand-bg: #047857;
  --vp-button-brand-hover-bg: #065f46;
  --vp-button-brand-active-bg: #064e3b;
  --vp-button-brand-text: #f4f4f5;
  --vp-button-brand-hover-text: #f4f4f5;

  --vp-c-bg: #fff;
  --vp-sidebar-bg-color: #fafafa;

  --vp-c-text-1: #18181b;
  --vp-c-text-2: #27272a;
  --vp-c-text-3: #52525b;
}

.dark.tui-theme-default {
  --vp-c-brand-1: #6ee7b7;
  --vp-c-brand-2: #e4e4e7;
  --vp-c-brand-3: #d4d4d8;

  --vp-button-brand-bg: #6ee7b7;
  --vp-button-brand-hover-bg: #34d399;
  --vp-button-brand-active-bg: #10b981;
  --vp-button-brand-text: #18181b;
  --vp-button-brand-hover-text: #18181b;

  --vp-c-bg: #18181b;
  --vp-sidebar-bg-color: #27272a;

  --vp-c-text-1: #f4f4f5;
  --vp-c-text-2: #e4e4e7;
  --vp-c-text-3: #a1a1aa;
}

@layer theme {
  .tui-theme-default {
    --vp-tui-font-family: 'IBM Plex Mono', monospace;
    --vp-tui-c-bg: var(--vp-c-bg);
    --vp-tui-border-color: #27272a;
    --vp-tui-border-radius: 0;
    --vp-tui-border-width: 2px;
    --vp-tui-shadow: none;

    --vp-tui-table-bg: #ffffff;
    --vp-tui-table-border-width: var(--vp-tui-border-width);
    --vp-tui-table-border-color: #27272a;
    --vp-tui-table-border-radius: var(--vp-tui-border-radius);
    --vp-tui-table-row-alt-bg: #d4d4d8;
    --vp-tui-table-header-bg: #27272a;
    --vp-tui-table-header-fg: #f4f4f5;
    --vp-tui-table-header-border-color: #d4d4d8;

    --vp-tui-sidebar-bg: var(--vp-c-bg);
    --vp-tui-sidebar-border-color: var(--vp-tui-border-color);
    --vp-tui-sidebar-border-width: var(--vp-tui-border-width);
    --vp-tui-sidebar-item-active-fg: var(--vp-c-brand-1);
    --vp-tui-sidebar-item-active-font-weight: 700;
    --vp-tui-sidebar-item-active-indicator-bg: #27272a;
    --vp-tui-sidebar-item-hover-bg: #27272a;
    --vp-tui-sidebar-item-hover-fg: #f4f4f5;

    --vp-tui-h2-border-top: 1px dashed var(--vp-tui-border-color);
    --vp-tui-hr-border-top: 1px dashed var(--vp-tui-border-color);

    --vp-tui-link-fg: #52525b;
    --vp-tui-link-active-fg: #18181b;
    --vp-tui-link-visited-fg: #c026d3;
    --vp-tui-link-border-color: #52525b;
    --vp-tui-link-hover-fg: #f4f4f5;
    --vp-tui-link-hover-bg: #27272a;
    --vp-tui-link-hover-border-color: #d4d4d8;

    --vp-tui-inline-code-bg: #f4f4f5;
    --vp-tui-inline-code-fg: #27272a;
    --vp-tui-inline-code-border-width: 1px;
    --vp-tui-inline-code-border-style: solid;
    --vp-tui-inline-code-border-color: #d4d4d8;
    --vp-tui-inline-code-border-radius: 0;

    --vp-tui-blockquote-border-color: var(--vp-tui-border-color);
    --vp-tui-blockquote-border-style: dashed;
    --vp-tui-blockquote-bg: var(--vp-tui-c-bg);
    --vp-tui-blockquote-fg: inherit;

    --vp-tui-aside-border-color: var(--vp-tui-border-color);
    --vp-tui-aside-border-width: 1px;
    --vp-tui-aside-border-style: dashed;
    --vp-tui-aside-item-active-bg: color-mix(in srgb, var(--vp-c-brand-1) 20%, transparent);
    --vp-tui-aside-item-hover-bg: #27272a;
    --vp-tui-aside-item-hover-fg: #f4f4f5;

    --vp-tui-code-group-border-style: solid;
    --vp-tui-code-group-border-width: 2px;
    --vp-tui-code-group-border-color: #18181b;
    --vp-tui-code-group-border-radius: var(--vp-tui-border-radius);
    --vp-tui-code-group-standalone-border-radius: var(--vp-tui-border-radius);
    --vp-tui-code-group-bg: transparent;
    --vp-tui-code-group-tabs-border-style: solid;
    --vp-tui-code-group-tabs-border-width: 2px;
    --vp-tui-code-group-tabs-border-radius: var(--vp-tui-border-radius);
    --vp-tui-code-group-tabs-bg: #f4f4f5;
    --vp-tui-code-group-tabs-border-color: #18181b;
    --vp-tui-code-group-tabs-label-active-bg: #18181b;
    --vp-tui-code-group-tabs-label-active-fg: #f4f4f5;
    --vp-tui-code-group-tabs-label-active-border-radius: var(--vp-tui-border-radius);
    --vp-tui-code-copy-bg: #f4f4f5;
    --vp-tui-code-copy-bg-hover: #e4e4e7;
    --vp-tui-code-copy-border-radius: 4px;
    --vp-tui-code-copy-border-color: #27272a;
    --vp-tui-code-copy-border-color-hover: #3f3f46;
    --vp-tui-code-copy-border-width: 1px;

    --vp-tui-hero-button-border-radius: var(--vp-tui-border-radius);
    --vp-tui-hero-feature-border-radius: var(--vp-tui-border-radius);
    --vp-tui-hero-feature-bg: var(--vp-tui-c-bg);
    --vp-tui-hero-feature-fg: #27272a;
    --vp-tui-hero-feature-border-width: var(--vp-tui-border-width);
    --vp-tui-hero-feature-border-color: var(--vp-tui-border-color);
    --vp-tui-hero-feature-title-bg: var(--vp-tui-c-bg);

    --vp-tui-custom-block-info-accent: #1e40af;
    --vp-tui-custom-block-info-accent-fg: #dbeafe;
    --vp-tui-custom-block-info-border: var(--vp-tui-custom-block-info-accent);
    --vp-tui-custom-block-info-bg: var(--vp-tui-c-bg);
    --vp-tui-custom-block-info-fg: #1e3a8a;
    --vp-tui-custom-block-info-title-bg: var(--vp-tui-custom-block-info-accent);
    --vp-tui-custom-block-info-title-fg: var(--vp-tui-custom-block-info-accent-fg);

    --vp-tui-custom-block-note-accent: #075985;
    --vp-tui-custom-block-note-accent-fg: #e0f2fe;
    --vp-tui-custom-block-note-border: var(--vp-tui-custom-block-note-accent);
    --vp-tui-custom-block-note-bg: var(--vp-tui-c-bg);
    --vp-tui-custom-block-note-fg: #0c4a6e;
    --vp-tui-custom-block-note-title-bg: var(--vp-tui-custom-block-note-accent);
    --vp-tui-custom-block-note-title-fg: var(--vp-tui-custom-block-note-accent-fg);

    --vp-tui-custom-block-tip-accent: #065f46;
    --vp-tui-custom-block-tip-accent-fg: #d1fae5;
    --vp-tui-custom-block-tip-border: var(--vp-tui-custom-block-tip-accent);
    --vp-tui-custom-block-tip-bg: var(--vp-tui-c-bg);
    --vp-tui-custom-block-tip-fg: #064e3b;
    --vp-tui-custom-block-tip-title-bg: var(--vp-tui-custom-block-tip-accent);
    --vp-tui-custom-block-tip-title-fg: var(--vp-tui-custom-block-tip-accent-fg);

    --vp-tui-custom-block-important-accent: #5b21b6;
    --vp-tui-custom-block-important-accent-fg: #ede9fe;
    --vp-tui-custom-block-important-border: var(--vp-tui-custom-block-important-accent);
    --vp-tui-custom-block-important-bg: var(--vp-tui-c-bg);
    --vp-tui-custom-block-important-fg: #4c1d95;
    --vp-tui-custom-block-important-title-bg: var(--vp-tui-custom-block-important-accent);
    --vp-tui-custom-block-important-title-fg: var(--vp-tui-custom-block-important-accent-fg);

    --vp-tui-custom-block-warning-accent: #92400e;
    --vp-tui-custom-block-warning-accent-fg: #fef3c7;
    --vp-tui-custom-block-warning-border: var(--vp-tui-custom-block-warning-accent);
    --vp-tui-custom-block-warning-bg: var(--vp-tui-c-bg);
    --vp-tui-custom-block-warning-fg: #78350f;
    --vp-tui-custom-block-warning-title-bg: var(--vp-tui-custom-block-warning-accent);
    --vp-tui-custom-block-warning-title-fg: var(--vp-tui-custom-block-warning-accent-fg);

    --vp-tui-custom-block-danger-accent: #991b1b;
    --vp-tui-custom-block-danger-accent-fg: #fee2e2;
    --vp-tui-custom-block-danger-border: var(--vp-tui-custom-block-danger-accent);
    --vp-tui-custom-block-danger-bg: var(--vp-tui-c-bg);
    --vp-tui-custom-block-danger-fg: #7f1d1d;
    --vp-tui-custom-block-danger-title-bg: var(--vp-tui-custom-block-danger-accent);
    --vp-tui-custom-block-danger-title-fg: var(--vp-tui-custom-block-danger-accent-fg);

    --vp-tui-custom-block-caution-accent: #9d174d;
    --vp-tui-custom-block-caution-accent-fg: #fce7f3;
    --vp-tui-custom-block-caution-border: var(--vp-tui-custom-block-caution-accent);
    --vp-tui-custom-block-caution-bg: var(--vp-tui-c-bg);
    --vp-tui-custom-block-caution-fg: #831843;
    --vp-tui-custom-block-caution-title-bg: var(--vp-tui-custom-block-caution-accent);
    --vp-tui-custom-block-caution-title-fg: var(--vp-tui-custom-block-caution-accent-fg);

    --vp-tui-custom-block-details-accent: #27272a;
    --vp-tui-custom-block-details-accent-fg: #ffffff;
    --vp-tui-custom-block-details-border: var(--vp-tui-custom-block-details-accent);
    --vp-tui-custom-block-details-bg: var(--vp-tui-custom-block-details-accent-fg);
    --vp-tui-custom-block-details-fg: #18181b;
    --vp-tui-custom-block-details-summary-bg: var(--vp-tui-custom-block-details-accent-fg);

    --vp-tui-timeline-primary-axis-color: #047857;
    --vp-tui-timeline-primary-marker-color: #047857;
    --vp-tui-timeline-primary-content-bg: var(--vp-tui-c-bg);
    --vp-tui-timeline-primary-content-fg: inherit;
    --vp-tui-timeline-primary-content-border-color: #047857;

    --vp-tui-timeline-info-axis-color: var(--vp-tui-custom-block-info-border);
    --vp-tui-timeline-info-marker-color: var(--vp-tui-custom-block-info-border);
    --vp-tui-timeline-info-content-bg: var(--vp-tui-c-bg);
    --vp-tui-timeline-info-content-fg: var(--vp-tui-custom-block-info-fg);
    --vp-tui-timeline-info-content-border-color: var(--vp-tui-custom-block-info-border);

    --vp-tui-timeline-warning-axis-color: var(--vp-tui-custom-block-warning-border);
    --vp-tui-timeline-warning-marker-color: var(--vp-tui-custom-block-warning-border);
    --vp-tui-timeline-warning-content-bg: var(--vp-tui-c-bg);
    --vp-tui-timeline-warning-content-fg: var(--vp-tui-custom-block-warning-fg);
    --vp-tui-timeline-warning-content-border-color: var(--vp-tui-custom-block-warning-border);

    --vp-tui-timeline-danger-axis-color: var(--vp-tui-custom-block-danger-border);
    --vp-tui-timeline-danger-marker-color: var(--vp-tui-custom-block-danger-border);
    --vp-tui-timeline-danger-content-bg: var(--vp-tui-c-bg);
    --vp-tui-timeline-danger-content-fg: var(--vp-tui-custom-block-danger-fg);
    --vp-tui-timeline-danger-content-border-color: var(--vp-tui-custom-block-danger-border);
  }

  .dark.tui-theme-default {
    --vp-tui-font-family: 'IBM Plex Mono', monospace;
    --vp-tui-c-bg: var(--vp-c-bg);
    --vp-tui-border-color: #e4e4e7;
    --vp-tui-border-radius: 0;
    --vp-tui-border-width: 2px;
    --vp-tui-shadow: none;

    --vp-tui-table-bg: #000000;
    --vp-tui-table-border-color: #e4e4e7;
    --vp-tui-table-row-alt-bg: #27272a;
    --vp-tui-table-header-bg: #e4e4e7;
    --vp-tui-table-header-fg: #18181b;
    --vp-tui-table-header-border-color: #27272a;

    --vp-tui-sidebar-item-active-indicator-bg: #e4e4e7;
    --vp-tui-sidebar-item-hover-bg: #e4e4e7;
    --vp-tui-sidebar-item-hover-fg: #18181b;

    --vp-tui-link-fg: #a1a1aa;
    --vp-tui-link-active-fg: #e4e4e7;
    --vp-tui-link-visited-fg: #c084fc;
    --vp-tui-link-border-color: #a1a1aa;
    --vp-tui-link-hover-fg: #27272a;
    --vp-tui-link-hover-bg: #f4f4f5;
    --vp-tui-link-hover-border-color: #52525b;

    --vp-tui-inline-code-bg: #27272a;
    --vp-tui-inline-code-fg: #f4f4f5;
    --vp-tui-inline-code-border-color: #52525b;

    --vp-tui-blockquote-border-color: var(--vp-tui-border-color);
    --vp-tui-blockquote-border-style: dashed;
    --vp-tui-blockquote-bg: var(--vp-tui-c-bg);
    --vp-tui-blockquote-fg: inherit;

    --vp-tui-aside-border-color: var(--vp-tui-border-color);
    --vp-tui-aside-border-width: 1px;
    --vp-tui-aside-border-style: dashed;
    --vp-tui-aside-item-active-bg: color-mix(in srgb, var(--vp-c-brand-1) 20%, transparent);
    --vp-tui-aside-item-hover-bg: #e4e4e7;
    --vp-tui-aside-item-hover-fg: #18181b;

    --vp-tui-code-group-border-color: #d4d4d8;
    --vp-tui-code-group-border-radius: var(--vp-tui-border-radius);
    --vp-tui-code-group-standalone-border-radius: var(--vp-tui-border-radius);
    --vp-tui-code-group-tabs-bg: #27272a;
    --vp-tui-code-group-tabs-border-color: var(--vp-tui-border-color);
    --vp-tui-code-group-tabs-label-active-bg: #e4e4e7;
    --vp-tui-code-group-tabs-label-active-fg: #09090b;
    --vp-tui-code-group-tabs-label-active-border-radius: var(--vp-tui-border-radius);
    --vp-tui-code-copy-bg: #27272a;
    --vp-tui-code-copy-bg-hover: #3f3f46;
    --vp-tui-code-copy-border-color: #71717a;
    --vp-tui-code-copy-border-color-hover: #a1a1aa;

    --vp-tui-hero-feature-fg: #e4e4e7;

    --vp-tui-custom-block-info-accent: #60a5fa;
    --vp-tui-custom-block-info-accent-fg: #1e3a8a;
    --vp-tui-custom-block-info-border: var(--vp-tui-custom-block-info-accent);
    --vp-tui-custom-block-info-bg: var(--vp-tui-c-bg);
    --vp-tui-custom-block-info-fg: #dbeafe;
    --vp-tui-custom-block-info-title-bg: var(--vp-tui-custom-block-info-accent);
    --vp-tui-custom-block-info-title-fg: var(--vp-tui-custom-block-info-accent-fg);

    --vp-tui-custom-block-note-accent: #38bdf8;
    --vp-tui-custom-block-note-accent-fg: #0c4a6e;
    --vp-tui-custom-block-note-border: var(--vp-tui-custom-block-note-accent);
    --vp-tui-custom-block-note-bg: var(--vp-tui-c-bg);
    --vp-tui-custom-block-note-fg: #e0f2fe;
    --vp-tui-custom-block-note-title-bg: var(--vp-tui-custom-block-note-accent);
    --vp-tui-custom-block-note-title-fg: var(--vp-tui-custom-block-note-accent-fg);

    --vp-tui-custom-block-tip-accent: #34d399;
    --vp-tui-custom-block-tip-accent-fg: #064e3b;
    --vp-tui-custom-block-tip-border: var(--vp-tui-custom-block-tip-accent);
    --vp-tui-custom-block-tip-bg: var(--vp-tui-c-bg);
    --vp-tui-custom-block-tip-fg: #d1fae5;
    --vp-tui-custom-block-tip-title-bg: var(--vp-tui-custom-block-tip-accent);
    --vp-tui-custom-block-tip-title-fg: var(--vp-tui-custom-block-tip-accent-fg);

    --vp-tui-custom-block-important-accent: #a78bfa;
    --vp-tui-custom-block-important-accent-fg: #4c1d95;
    --vp-tui-custom-block-important-border: var(--vp-tui-custom-block-important-accent);
    --vp-tui-custom-block-important-bg: var(--vp-tui-c-bg);
    --vp-tui-custom-block-important-fg: #ede9fe;
    --vp-tui-custom-block-important-title-bg: var(--vp-tui-custom-block-important-accent);
    --vp-tui-custom-block-important-title-fg: var(--vp-tui-custom-block-important-accent-fg);

    --vp-tui-custom-block-warning-accent: #fbbf24;
    --vp-tui-custom-block-warning-accent-fg: #78350f;
    --vp-tui-custom-block-warning-border: var(--vp-tui-custom-block-warning-accent);
    --vp-tui-custom-block-warning-bg: var(--vp-tui-c-bg);
    --vp-tui-custom-block-warning-fg: #fef3c7;
    --vp-tui-custom-block-warning-title-bg: var(--vp-tui-custom-block-warning-accent);
    --vp-tui-custom-block-warning-title-fg: var(--vp-tui-custom-block-warning-accent-fg);

    --vp-tui-custom-block-danger-accent: #f87171;
    --vp-tui-custom-block-danger-accent-fg: #7f1d1d;
    --vp-tui-custom-block-danger-border: var(--vp-tui-custom-block-danger-accent);
    --vp-tui-custom-block-danger-bg: var(--vp-tui-c-bg);
    --vp-tui-custom-block-danger-fg: #fee2e2;
    --vp-tui-custom-block-danger-title-bg: var(--vp-tui-custom-block-danger-accent);
    --vp-tui-custom-block-danger-title-fg: var(--vp-tui-custom-block-danger-accent-fg);

    --vp-tui-custom-block-caution-accent: #f472b6;
    --vp-tui-custom-block-caution-accent-fg: #831843;
    --vp-tui-custom-block-caution-border: var(--vp-tui-custom-block-caution-accent);
    --vp-tui-custom-block-caution-bg: var(--vp-tui-c-bg);
    --vp-tui-custom-block-caution-fg: #fce7f3;
    --vp-tui-custom-block-caution-title-bg: var(--vp-tui-custom-block-caution-accent);
    --vp-tui-custom-block-caution-title-fg: var(--vp-tui-custom-block-caution-accent-fg);

    --vp-tui-custom-block-details-accent: #d4d4d8;
    --vp-tui-custom-block-details-accent-fg: #18181b;
    --vp-tui-custom-block-details-border: var(--vp-tui-custom-block-details-accent);
    --vp-tui-custom-block-details-bg: var(--vp-tui-custom-block-details-accent-fg);
    --vp-tui-custom-block-details-fg: #f4f4f5;
    --vp-tui-custom-block-details-summary-bg: var(--vp-tui-custom-block-details-accent-fg);

    --vp-tui-timeline-primary-axis-color: var(--vp-c-brand-1);
    --vp-tui-timeline-primary-marker-color: var(--vp-c-brand-1);
    --vp-tui-timeline-primary-content-bg: var(--vp-tui-c-bg);
    --vp-tui-timeline-primary-content-fg: inherit;
    --vp-tui-timeline-primary-content-border-color: var(--vp-c-brand-1);

    --vp-tui-timeline-info-axis-color: var(--vp-tui-custom-block-info-border);
    --vp-tui-timeline-info-marker-color: var(--vp-tui-custom-block-info-border);
    --vp-tui-timeline-info-content-bg: var(--vp-tui-c-bg);
    --vp-tui-timeline-info-content-fg: var(--vp-tui-custom-block-info-fg);
    --vp-tui-timeline-info-content-border-color: var(--vp-tui-custom-block-info-border);

    --vp-tui-timeline-warning-axis-color: var(--vp-tui-custom-block-warning-border);
    --vp-tui-timeline-warning-marker-color: var(--vp-tui-custom-block-warning-border);
    --vp-tui-timeline-warning-content-bg: var(--vp-tui-c-bg);
    --vp-tui-timeline-warning-content-fg: var(--vp-tui-custom-block-warning-fg);
    --vp-tui-timeline-warning-content-border-color: var(--vp-tui-custom-block-warning-border);

    --vp-tui-timeline-danger-axis-color: var(--vp-tui-custom-block-danger-border);
    --vp-tui-timeline-danger-marker-color: var(--vp-tui-custom-block-danger-border);
    --vp-tui-timeline-danger-content-bg: var(--vp-tui-c-bg);
    --vp-tui-timeline-danger-content-fg: var(--vp-tui-custom-block-danger-fg);
    --vp-tui-timeline-danger-content-border-color: var(--vp-tui-custom-block-danger-border);
  }
}