estruyf / slidev-theme-the-unnamed

Slidev Theme - The unnamed

Slidev Theme - The unnamed

A Slidev theme based on the The unnamed - VS Code theme by Elio Struyf.

The unnamed theme allows you to fully customize its colors to fit your brand.

Usage

Add the following frontmatter to your slides.md. Start Slidev then it will prompt you to install the theme automatically.

---
theme: the-unnamed
---

Layouts

The theme currently has the following layouts:

• default
• cover
• center
• section
• two-cols
• about-me
• and the ones from Slidev itself

Cover

Usage

---
layout: cover
background: <image url or HEX or rbg or rgba> (optional)
---

About me

Usage

---
layout: about-me

helloMsg: Hello!
name: <name>
imageSrc: <image url>
job: <job title>
line1: 
line2: 
social1: 
social2: 
social3: 
---

Center

Usage

---
layout: center
background: <image url or HEX or rbg or rgba> (optional)
---

Section

Usage

---
layout: section
background: <image url or HEX or rbg or rgba> (optional)
---

Two columns

Usage

---
layout: two-cols
---

# Left

This shows on the left

::right::

# Right

This shows on the right

Default

Usage

---
layout: default
background: <image url or HEX or rbg or rgba> (optional)
---

Cusomizations

You can customize the theme by adding the following frontmatter to your slides.md.

themeConfig:
  color: "#F3EFF5"
  background: "#161C2C"

  code-background: "#0F131E"
  code-border: "#242d34"

  accents-teal: "#44FFD2"
  accents-yellow: "#FFE45E"
  accents-red: "#FE4A49"
  accents-lightblue: "#15C2CB"
  accents-blue: "#5EADF2"
  accents-vulcan: "#0E131F"

  header-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

  default-headingBg: var(--slidev-theme-accents-yellow)
  default-headingColor: var(--slidev-theme-accents-vulcan)
  default-background: var(--slidev-theme-background)

  center-headingBg: var(--slidev-theme-accents-blue)
  center-headingColor: var(--slidev-theme-accents-vulcan)
  center-background: var(--slidev-theme-background)

  cover-headingBg: var(--slidev-theme-accents-teal)
  cover-headingColor: var(--slidev-theme-accents-vulcan)
  cover-background: var(--slidev-theme-background)

  section-headingBg: var(--slidev-theme-accents-lightblue)
  section-headingColor: var(--slidev-theme-accents-vulcan)
  section-background: var(--slidev-theme-background)

  aboutme-background: var(--slidev-theme-color)
  aboutme-color: var(--slidev-theme-background)
  aboutme-helloBg: var(--slidev-theme-accents-yellow)
  aboutme-helloColor: var(--slidev-theme-background)
  aboutme-nameColor: var(--slidev-theme-accents-red)

Info: we made it possible to change all the accent colors, or define your own colors per type of slide.