slidev-theme-the-unnamed - GitLite

KO | EN

gitlite — search

#redis #containers #electron #machine-learning #golang #generative-ai #http #vue #cli #web

slidev-theme-the-unnamed

(★ 69)

Slidev Theme - The unnamed

File Explorer

ZIP Download

- - publish.yml
- about-me.png
- center.png
- cover.png
- default.png
- section.png
- two-cols.png
- .gitkeep
- about-me.vue
- center.vue
- cover.vue
- default.vue
- section.vue
- two-cols.vue
- - theunnamed-dark-theme.json
- mermaid.ts
- shiki.ts
- code.css
- index.ts
- layout.css
- mermaid.css
- layoutHelper.ts
.gitignore
.npmignore
.npmrc
changelog.md
example.md
example2.md
LICENSE.md
package-lock.json
package.json
README.md

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

# Project Badges

NPM version Visit

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

A [Slidev](https://sli.dev/) theme based on the [The unnamed - VS Code theme](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-unnamed-theme) by [Elio Struyf](https://elio.dev).

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.

```yaml
---
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

![](https://raw.githubusercontent.com/estruyf/slidev-theme-the-unnamed/main/assets/cover.png)

**Usage**

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

### About me

![](https://raw.githubusercontent.com/estruyf/slidev-theme-the-unnamed/main/assets/about-me.png)

**Usage**

```yaml
---
layout: about-me

helloMsg: Hello!
name: <name>
imageSrc: <image url>
position: <left or right>
job: <job title>
line1: 
line2: 
social1: 
social2: 
social3: 
---
```

### Center

![](https://raw.githubusercontent.com/estruyf/slidev-theme-the-unnamed/main/assets/center.png)

**Usage**

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

### Section

![](https://raw.githubusercontent.com/estruyf/slidev-theme-the-unnamed/main/assets/section.png)

**Usage**

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

### Two columns

![](https://raw.githubusercontent.com/estruyf/slidev-theme-the-unnamed/main/assets/two-cols.png)

**Usage**

```yaml
---
layout: two-cols
---

# Left

This shows on the left

::right::

# Right

This shows on the right
```

### Default

![](https://raw.githubusercontent.com/estruyf/slidev-theme-the-unnamed/main/assets/default.png)

**Usage**

```yaml
---
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`.

```yaml
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.

<br />
<br />

[![Visitors](https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Fgithub.com%2Festruyf%2Fslidev-theme-the-unnamed&countColor=%23F141A8)](https://visitorbadge.io/status?path=https%3A%2F%2Fgithub.com%2Festruyf%2Fslidev-theme-the-unnamed)