Coffee

A warm, minimalistic design inspired by early computing. This theme is a replica of the "Coffee" theme from the `shiki-twoslash` package.

Styles

note:

You can override the default styles by adding your own CSS variables in the globals.css and syntax.css files.

globals.css
/* Rich Coffee Theme */
@layer base {
:root {
    --background: 35 40% 96%;
    --foreground: 25 25% 10%;
    --card: 0 0% 100%;
    --card-foreground: 25 25% 10%;
    --popover: 0 0% 100%;
    --popover-foreground: 25 25% 10%;
    --primary: 25 60% 40%;
    --primary-foreground: 0 0% 100%;
    --secondary: 35 30% 90%;
    --secondary-foreground: 25 25% 10%;
    --muted: 35 20% 94%;
    --muted-foreground: 25 15% 35%;
    --accent: 30 50% 38%;
    --accent-foreground: 0 0% 100%;
    --destructive: 5 85% 45%;
    --destructive-foreground: 0 0% 100%;
    --border: 30 15% 85%;
    --input: 30 15% 88%;
    --ring: 25 60% 40%;
    --radius: 0.5rem;
    --chart-1: 25 60% 45%;
    --chart-2: 30 55% 45%;
    --chart-3: 35 50% 42%;
    --chart-4: 20 45% 38%;
    --chart-5: 40 45% 40%;
    --line-number-color: rgba(0, 0, 0, 0.08);
}

.dark {
    --background: 30 10% 6%;
    --foreground: 35 20% 94%;
    --card: 30 10% 8%;
    --card-foreground: 35 20% 94%;
    --popover: 30 10% 8%;
    --popover-foreground: 35 20% 94%;
    --primary: 30 45% 52%;
    --primary-foreground: 30 10% 6%;
    --secondary: 30 12% 14%;
    --secondary-foreground: 35 20% 94%;
    --muted: 30 10% 16%;
    --muted-foreground: 30 15% 60%;
    --accent: 28 40% 48%;
    --accent-foreground: 0 0% 100%;
    --destructive: 5 80% 55%;
    --destructive-foreground: 0 0% 100%;
    --border: 30 10% 20%;
    --input: 30 10% 20%;
    --ring: 30 45% 52%;
    --chart-1: 30 45% 52%;
    --chart-2: 28 40% 50%;
    --chart-3: 32 45% 50%;
    --chart-4: 25 35% 46%;
    --chart-5: 35 40% 48%;
    --line-number-color: rgba(255, 255, 255, 0.12);
}
}
Edit this page

Published on Nov 15, 1935