antfu/themes

Official themes for Slidev

Slidev Themes

Official themes for Slidev.

Packages

Theme Gallery

package	version	author
@slidev/theme-default		Anthony Fu
@slidev/theme-seriph		Anthony Fu
@slidev/theme-shibainu		iiiiiiinès
@slidev/theme-bricks		iiiiiiinès
@slidev/theme-apple-basic		Jeremy Meissner

License

Code is licensed under MIT
Images and assets are licensed under CC BY-NC-SA 4.0

themes's Issues

`theme-apple-basic`, `intro-image-right`: text continues under the image

Describe the bug

When using theme-apple-basic with an intro-image-right layout, and the text (https://wiki.openstreetmap.org/wiki/Hungary/Vasútvonalak) on the left side (formatted as h1, h2 or p) is longer than the space allocated to it, it doesn't break but continues under the image. Therefore its last part is invisible.

To reproduce

Steps to reproduce the behavior:

1. Clone this repo
2. git checkout dev_main
3. git checkout 69e2479b
4. cd presentation
5. npx slidev
6. Go to slide 29

Desktop

• OS: macOS 14.4.1
• Browser: Safari 17.4.1
• Slidev version: v0.49.0-beta.4 (global)

Using UnoCSS instead of WindiCSS

Themes initialized with npm init slidev-theme come with a setup/windicss.ts. As slidev uses now UnoCSS by default I have the following questions:

1. How should a setup/unocss.ts be written?
2. Can I remove setup/windicss.ts?
3. Should I send PRs for replacing windicss with unocss inside this repo?

Font

Hey, I not success to get the default font from your theme, how activate it ?

Auto-installing theme fails due to wrong theme name

When I set theme: apple-basic in slides.md, the server asks:

The theme "@slidev/theme-apple-banisic" was not found in your project, do you want to install it now? › (Y/n)

This fails then of course because there is no theme-apple-banisic.
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@slidev%2ftheme-apple-banisic - Not found

Error: EPERM: operation not permitted, scandir '/Users/yws/.Trash'

'''
(base) yws@ywsdeMacBook-Pro ~ % sudo slidev
Password:
✔ The theme "@slidev/theme-seriph" was not found globally, do you want to install it now? … yes

added 5 packages in 3s
node:internal/process/promises:279
triggerUncaughtException(err, true /* fromPromise */);
^

[Error: EPERM: operation not permitted, scandir '/Users/yws/.Trash'] {
errno: -1,
code: 'EPERM',
syscall: 'scandir',
path: '/Users/yws/.Trash'
}
'''

When I installed slidev globally , it forced me to install the theme , after i installed it using sudo , a bug happen.

Seriph theme should load bold and italic styles as well

# **Welcome** to *Slidev*

Presentation slides for developers

results in the following rendering (just using the starter template):

It apparently shows fake boldface and italic fallbacks rather than the true glyphs the font is supposed to have.

Of course I can add a line in the style.css as follows to easily make them work:

@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

but considering it is one of the default themes, out-of-box support would be appreciated as well as appropriate.

two-cols layout is missing a gap between the two columns when code blocks are side by side

Hello! Not sure if this is the correct repo to report this, feel free to move the issue. I noticed a small theme problem using two-cols layouts. It seems that two code box get very close together when they are in their own columns.

---
layout: two-cols-header
---

# Exception Handling

::left::

```ruby
def divide(x, y)
  x / y
rescue ZeroDivisionError => e
  puts "Error: #{e.message}"
end
```

::right::

```ruby
class Person
  attr_accessor :name, :age

  def initialize(name, age)
    @name = name
    @age = age
  end
end

person = Person.new("Alice", 30)
```

---

This is what it looks like using the seriph theme. I haven't tried the other, but I guess they might have the same problem.

`theme-apple-basic`, `intro-image`: no `padding` due to `display: grid`

Steps to reproduce

1. Save slides.md with the following content:

---
theme: apple-basic
layout: intro-image
image: 'image-url'
---

<div class="absolute top-10">
  <span class="font-700">
    Author and Date
  </span>
</div>

<div class="absolute bottom-10">
  <h1>Presentation title</h1>
  <p>Presentation subtitle</p>
</div>

2. Open Slidev at localhost:3030.

Expected behaviour

The the slide is displayed like the one in README.md:

Actual behaviour

The text on the slide is displayed with no padding:

This is caused by the display: grid property of intro-image. It works fine if it's commented out:

Tested on the latest macOS Safari and Chrome.

cc @JeremyMeissner