Slide
A slide theme for Vivliostyle.
Use
In vivliostyle.config.js
:
module.exports = {
theme: '@vivliostyle/theme-slide',
};
Color theme of code blocks
This theme imports theme-prism
as a default color theme of code blocks. If you want to use other themes, please import the CSS like this.
module.exports = {
theme: [
'@vivliostyle/theme-slide',
{
specifier: '@vivliostyle/theme-base',
import: 'css/lib/prism/theme-okaidia.css',
},
],
};
Available theme CSS variables
:root {
--vs-theme--color-bg: #fff;
--vs-theme--color-body: #000;
--vs-theme--section-align-items: center;
--vs-theme--section-justify-content: center;
--vs-theme--h1-color: #212057;
--vs-theme--h2-color: #e84e39;
--vs-theme--h3-color: #e84e39;
--vs-theme--h4-color: #e84e39;
--vs-theme--anchor-color: #3498db;
--vs-theme--blockquote-mark-color: #d6a;
--vs-theme--table-heading-color-bg: rgb(0, 0, 0, 0.1);
--vs-theme--page-ref-call-color: forestgreen;
--vs-theme--page-ref-call-content: '(p.' target-counter(attr(href url), page) ')';
--vs-theme--max-inline-size-on-screen: 40rem;
/**
* Styles for cover pages
*/
--vs-theme--cover-page-color-bg: #212057;
--vs-theme--cover-page-color-body: #fff;
--vs-theme--cover-page-align-items: center;
--vs-theme--cover-page-justify-content: center;
/**
* Styles for image full pages
*/
--vs-theme--image-full-page-margin: 0;
--vs-theme--image-full-page-object-fit: cover;
}
Cover page
.cover
makes a special page that can be used for a cover slide.
# Title of the slide {.cover}
## John doe
# About this slide
......
Image full page
A paragraph with only one image will appear as an image covering the entire page.
Look at the image on next page!
![](./fullscreen.png)
License
CC0 1.0
Original author: Vivliostyle project team