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

A terminal UI theme for VitePress

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

    --vp-tui-table-bg: var(--vp-tui-c-bg);
    --vp-tui-table-border-width: var(--vp-tui-border-width);
    --vp-tui-table-border-color: var(--vp-tui-border-color);
    --vp-tui-table-border-radius: var(--vp-tui-border-radius);
    --vp-tui-table-row-alt-bg: var(--vp-c-default-3);
    --vp-tui-table-header-bg: var(--vp-c-default-1);
    --vp-tui-table-header-fg: var(--vp-c-text-1);
    --vp-tui-table-header-border-color: var(--vp-tui-border-color);

    --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: var(--vp-c-brand-1);
    --vp-tui-sidebar-item-hover-bg: var(--vp-c-default-3);
    --vp-tui-sidebar-item-hover-fg: var(--vp-c-text-1);

    --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: var(--vp-c-text-2);
    --vp-tui-link-active-fg: var(--vp-c-text-1);
    --vp-tui-link-visited-fg: var(--vp-c-purple-1);
    --vp-tui-link-border-color: var(--vp-c-text-2);
    --vp-tui-link-hover-fg: var(--vp-c-bg);
    --vp-tui-link-hover-bg: var(--vp-c-text-1);
    --vp-tui-link-hover-border-color: var(--vp-c-gray-1);

    --vp-tui-inline-code-bg: var(--vp-code-bg);
    --vp-tui-inline-code-fg: var(--vp-c-text-1);
    --vp-tui-inline-code-border-width: 1px;
    --vp-tui-inline-code-border-style: solid;
    --vp-tui-inline-code-border-color: var(--vp-c-divider);
    --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: var(--vp-c-default-3);
    --vp-tui-aside-item-hover-fg: var(--vp-c-text-1);

    --vp-tui-code-group-border-style: solid;
    --vp-tui-code-group-border-width: 2px;
    --vp-tui-code-group-border-color: var(--vp-c-text-1);
    --vp-tui-code-group-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: var(--vp-c-bg-soft);
    --vp-tui-code-group-tabs-border-color: var(--vp-c-text-1);
    --vp-tui-code-group-tabs-label-active-bg: var(--vp-c-text-1);
    --vp-tui-code-group-tabs-label-active-fg: var(--vp-c-bg);
    --vp-tui-code-group-tabs-label-active-border-radius: var(--vp-tui-border-radius);
    --vp-tui-code-copy-bg: var(--vp-c-bg-soft);
    --vp-tui-code-copy-bg-hover: var(--vp-c-gray-3);
    --vp-tui-code-copy-border-radius: 4px;
    --vp-tui-code-copy-border-color: var(--vp-c-text-1);
    --vp-tui-code-copy-border-color-hover: var(--vp-c-text-2);
    --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: var(--vp-c-text-1);
    --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: var(--vp-c-brand-1);
    --vp-tui-custom-block-info-accent-fg: var(--vp-c-bg);
    --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: var(--vp-c-brand-1);
    --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: var(--vp-c-note-1);
    --vp-tui-custom-block-note-accent-fg: var(--vp-c-bg);
    --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: var(--vp-c-note-1);
    --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: var(--vp-c-tip-1);
    --vp-tui-custom-block-tip-accent-fg: var(--vp-c-bg);
    --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: var(--vp-c-tip-1);
    --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: var(--vp-c-important-1);
    --vp-tui-custom-block-important-accent-fg: var(--vp-c-bg);
    --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: var(--vp-c-important-1);
    --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: var(--vp-c-warning-1);
    --vp-tui-custom-block-warning-accent-fg: var(--vp-c-bg);
    --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: var(--vp-c-warning-1);
    --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: var(--vp-c-danger-1);
    --vp-tui-custom-block-danger-accent-fg: var(--vp-c-bg);
    --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: var(--vp-c-danger-1);
    --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: var(--vp-c-caution-1);
    --vp-tui-custom-block-caution-accent-fg: var(--vp-c-bg);
    --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: var(--vp-c-caution-1);
    --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: var(--vp-c-text-1);
    --vp-tui-custom-block-details-accent-fg: var(--vp-c-bg);
    --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: var(--vp-c-text-1);
    --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);
  }
}