Skip to content

estruyf/slidev-theme-the-unnamed

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Nov 8, 2024
207ec9f · Nov 8, 2024

History

61 Commits
Mar 11, 2024
Nov 8, 2024
Feb 1, 2023
Nov 8, 2024
Nov 8, 2024
Jul 10, 2024
May 9, 2024
Feb 7, 2023
Jan 31, 2023
Feb 1, 2023
Jan 31, 2023
Nov 8, 2024
Nov 8, 2024
Nov 8, 2024
Nov 8, 2024
Nov 8, 2024

Repository files navigation

Slidev Theme - The unnamed

NPM version

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>
position: <left or right>
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)
  default-font-size: 1.1em

  center-headingBg: var(--slidev-theme-accents-blue)
  center-headingColor: var(--slidev-theme-accents-vulcan)
  center-background: var(--slidev-theme-background)
  center-font-size: 1.1em

  cover-headingBg: var(--slidev-theme-accents-teal)
  cover-headingColor: var(--slidev-theme-accents-vulcan)
  cover-background: var(--slidev-theme-background)
  cover-font-size: 1.1em

  section-headingBg: var(--slidev-theme-accents-lightblue)
  section-headingColor: var(--slidev-theme-accents-vulcan)
  section-background: var(--slidev-theme-background)
  section-font-size: 1.1em

  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)
  aboutme-font-size: 1.1em

  code-background: var(--slidev-theme-code-background)
  code-color: var(--slidev-theme-code-color)
  code-font-size: 1.1em

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



Visitors