slidev-theme-onecraft

A Capgemini Onecraft theme for Slidev by Yohann Ciurlik.

Usage

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

---
theme: onecraft
---

Learn more about how to use a theme.

Example

• See PDF exported version
• See sample implementation

Layouts

The theme currently has the following layouts:

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

Header and footer

By default any layout will not contain a header and a footer

But you can add this properties to add header and footer

---
themeConfig:
  logoHeader: 'logo_onecraft_fond_blanc.png' 
  footerLeft: 'Onecraft software expertise - Template Slidev - Avril 2025'
  footerRight: 'Capgemini 2025. All rights reserved'
---

Note that logos are located in the 'public/logos' folder.

Preview

Cover

Usage:

• Add cover in the layout field
• Specify the `logo' to show. Choose between :
  • logo_onecraft_fond_blanc.png,
  • logo_onecraft_fond_couleur.png,
  • logo_onecraft_noir.png
  • or any other logo you want
• Specify the background you want. Various options :
  • Use one of the 17 embedded backgrounds,
  • Specify a color using #272936 or rgb(x,y,z) value
  • Use custom background from your own folder or an URL

---
layout: cover
logo: 'logo_onecraft_fond_couleur.png'
background: "background8.jpeg"
---

Preview:

Agenda

It's not a specific layout but you can use the image-right layout to create a quick agenda

---
layout: image-right
image: 'bulb.jpg'
---

Preview:

Presenter

Usage:

• Use the presenter layout
• Specify your avatar using the presenterImage option

---
layout: 'presenter'
presenterImage: 'https://avatars.githubusercontent.com/u/107427?v=4'
--- 

Preview:

New Section

Usage:

• Use the new-section layout to switch to create a section

---
layout: new-section
---

Preview:

Text & Image

Usage :

• Use text-image layout
• USe the media property to specify the image to show
• Optionaly, use the reverse option
• Add a caption on the image using caption

---
layout: text-image
media: 'https://media.giphy.com/media/VkMV9TldsPd28/giphy.gif'
reverse: false
caption: 'It''s incredible'
---

Preview:

Text & Window

Usage :

• Use text-window layout
• Optionaly, use the reverse option
• Use ::window:: on the content to specify where you want to place the window content (see example.md)

---
layout: text-window
reverse: true
---

Preview:

Two columns

Usage :

• Use two-cols layout
• Use ::right:: on the content to specify the content to put on the right side

---
layout: two-cols
---

Preview:

Two thirds

Usage :

• Use two-thirds layout
• Use ::right:: on the content to specify the content to put on the right side

---
layout: two-thirds
---

Preview:

Others layouts / samples

See the example-export folder or example.md to find others layouts or samples.

Contributing

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

Thanks to

• Slidev for this awesome presentation tool for devs
• Alvaro Saburido for the Penguin theme
• Elio Struyf for The Unamed theme