Slidev Theme Cobalt

A Slidev theme featuring a deep cobalt blue color scheme with framed layouts, inspired by the v2.0 slide template.

Preview

Live Demo

| Mode | URL | | ---------- | --------------------------------------- | | Slide Show | https://cobalt.minagishl.com | | Presenter | https://cobalt.minagishl.com/presenter/ |

Install

Add the following frontmatter to your slides.md:

---
theme: cobalt
---

When you run Slidev, it will automatically install the slidev-theme-cobalt package.

Learn more about how to use a theme in the Slidev docs.

Layouts

This theme provides the following layouts:

Title & Structure

| Layout | Description | | ---------------------- | ---------------------------------------------------------------------------------------------------- | | cover | Full blue cover slide with centered content | | closing | Full blue closing slide with centered content — pairs with cover | | title | Left-aligned title on framed slide | | title-center | Centered title on framed slide | | title-sandwich | Three-part layout with top subtitle, centered title, and bottom footer | | intro | Centered content on framed slide | | section | Full blue section divider | | section-frame | Framed section divider with white background | | section-index | Full blue section divider with a large muted number on the left. Accepts a number prop | | section-index-center | Full blue section divider with a large muted number above a centered title. Accepts a number prop | | section-subtitle | Full blue section divider with a centered title and subtitle. Optional subtitle and number props | | toc | Table of contents with numbered badges | | agenda | Framed agenda list with numbered badges. Pass a heading and items array, or use the default slot |

Content

| Layout | Description | | ------------- | ----------------------------------------------------------------------------------------------------------------------- | | panel | Light gray panel for quotes and content. Supports color, align, and heading props | | frame-panel | Framed slide with centered quote. Supports color and align props | | quote | Centered testimonial/blockquote with optional ::source:: slot | | profile | Framed profile slide with ::name:: and default slots | | cols | 2 or 3 equal columns. Set cols: 3 for three columns. Uses ::left::, ::middle::, ::right:: slots | | cards | Grid of feature cards. Pass a cards array with title and optional description. Supports optional columns prop | | table | Framed layout for Markdown tables | | comparison | Side-by-side comparison with column titles. Uses ::left:: and ::right:: slots, and leftTitle / rightTitle props |

Data & Metrics

| Layout | Description | | -------------- | ---------------------------------------------------------------------------------------------------- | | stats | Large metric cards. Pass a stats array with value, label, and optional description | | timeline | Horizontal timeline. Pass an events array with date, title, and optional description | | steps-layout | Numbered step list. Pass a steps array with title and body. Supports start prop | | process-flow | Horizontal process flow with circles and arrows. Pass a steps array with title and description |

Team

| Layout | Description | | ------------- | ------------------------------------------------------------------------------ | | team | Grid of team members with images. Pass a members array with name and img | | team-border | Team layout with a blue border |

Image

| Layout | Description | | ------------- | ----------------------------------------------------------------------------------------------------- | | image-left | Image on the left, text on the right. Supports image, alt, and label props | | image-right | Image on the right, text on the left. Supports image, alt, and label props | | image-full | Full-bleed image inside a frame. Supports image, alt, dim, and color (blue / white) props |

Components

| Component | Description | | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | <Label> | Corner label. position prop: top-left (default), top-right, bottom-left, bottom-right | | <Note> | Small muted annotation. Same position prop as Label. Default is bottom-left | | <PageNumber> | Current page number built on Label. position prop (default bottom-right) and showTotal boolean | | <Underline> | Inline text with a blue underline | | <Highlight> | Inline emphasis for key phrases. variant prop: blue (default) or amber; marker stroke for plain text and for inline code (no background pill) | | <Badge> | Inline label for status or emphasis. variant prop: solid (default), soft, or outline; default slot for text | | <Icon> | Inline Lucide icon from CDN (lucide-static). Required name prop (icon file name without .svg); optional size prop: sm, md (default), or lg | | <Divider> | Horizontal rule for separating content blocks. variant prop: solid (default), muted, or dashed; spacing prop: sm, md (default), or lg | | <QA> | Question-and-answer pair. question prop for the question text, default slot for the answer | | <NoteBlock> | Framed blue note block with icon. type prop: info (default), warn, or alert | | <FactRow> | Label–value row for specs or metadata. Required label prop; default slot for the value (text or short Markdown) | | <Kbd> | Inline keyboard key with depth and border. Default slot for the key label, or icon prop with a lucide icon name (command, arrow-up, arrow-down, arrow-left, arrow-right). Hover plays a press animation with a pointer cursor; pass no-hover to disable both |

Components can be placed in any layout:

<Label>Table of Contents</Label>
<Note>\* Estimated value</Note>
<PageNumber :showTotal="true" />
<Badge>New</Badge>
<Highlight>key phrase</Highlight> in a sentence.
<Icon name="sparkles" /> Inline icon beside text
<Divider />
<QA question="What is this?">A Slidev theme with cobalt blue design.</QA>
<NoteBlock type="info">
Information
This is an informational note. The second line is optional.
</NoteBlock>

<FactRow label="Version">0.4.0</FactRow>
<FactRow label="License">MIT</FactRow>

Open the palette with <Kbd icon="command" /> + <Kbd>K</Kbd>.

Features

• Deep Cobalt Blue: Rich blue color palette (oklch(37.9% 0.146 265.522)) for professional presentations
• Framed Layouts: Elegant blue frames surrounding white content areas
• Typography: Gen Interface JP by default, or Inter + Noto Sans JP — switchable via themeConfig.font (see Typography)
• Multiple Layouts: 27+ layout options for various presentation needs

Typography

This theme supports two font stacks, switchable via themeConfig.font in your slide deck headmatter:

| Value | Font stack | Section layouts | | ---------------------------- | ----------------------------------------------- | ------------------------ | | gen-interface-jp (default) | Gen Interface JP | Gen Interface JP Display | | inter | Inter Variable + Noto Sans JP Variable | Same as body text |

Ellipsis (…) vertical alignment is switchable via themeConfig.ellipsisFont:

| Value | Ellipsis glyph | Appearance with Japanese text | | --------------- | -------------- | ----------------------------- | | cjk (default) | Noto Sans JP | Centered with CJK text | | latin | Inter | Latin baseline (lower) |

Works with both font values above.

Gen Interface JP is a typeface designed for digital interfaces that aims to harmonize Latin script with Japanese. It blends Inter with Noto Sans JP to ensure consistent readability across multiple languages.

---
theme: cobalt
themeConfig:
  font: inter # or gen-interface-jp (default)
  ellipsisFont: cjk # or latin — which font draws … (default: cjk)
---

Font files are bundled via gen-interface-jp and @fontsource-variable packages.

Deploy (Cloudflare Workers)

You can deploy the built slides as static assets to Cloudflare Workers.

1. Log in at Cloudflare and run bunx wrangler login to authenticate (once).
2. Deploy: bun run deploy (runs bun run build then wrangler deploy).
3. After deployment, the slides are available at the shown *.workers.dev URL.

Configure the Worker name and options in wrangler.jsonc (e.g. edit name to change the subdomain).

Contributing

• bun install
• bun run dev to start theme preview of example.md
• Edit the example.md and style to see the changes
• bun run export to generate the preview PDF
• bun run screenshot to generate the preview PNG

License

MIT License - See LICENSE file for details.