Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/McShelby/reveal-themeoverride

A reveal.js 3.x / 4.x plugin to easily change themes of reveal.js and its syntax highlightning.
https://github.com/McShelby/reveal-themeoverride

plugin reveal-js revealjs theme themes

Last synced: 14 days ago
JSON representation

A reveal.js 3.x / 4.x plugin to easily change themes of reveal.js and its syntax highlightning.

Host: GitHub
URL: https://github.com/McShelby/reveal-themeoverride
Owner: McShelby
License: mit
Created: 2018-06-07T15:38:48.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2020-05-19T17:37:57.000Z (over 4 years ago)
Last Synced: 2024-10-12T22:33:34.447Z (about 1 month ago)
Topics: plugin, reveal-js, revealjs, theme, themes
Language: JavaScript
Homepage:
Size: 22.5 KB
Stars: 6
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# ThemeOverride

A [reveal.js](https://github.com/hakimel/reveal.js/) 3.x / 4.x plugin to easily change themes of reveal.js and its syntax highlightning.

## Installation

Copy this repository into the plugin folder of your reveal.js presentation, ie ```plugin/themeoverride```.

Add the plugin to the initialization of your presentation, as below.

### reveal 4.x

```javascript

// ..
Reveal.initialize({
// ...
plugins: [
// ..
ThemeOverride,
]
});
```

### reveal 3.x

```javascript
Reveal.initialize({
// ...
dependencies: [
// ...
{ src: 'plugin/themeoverride/themeoverride.js', async: true },
]
});
```

For **reveal 3.x only** you may need to edit your HTML file to be able to override themes.

- The `````` element of the reveal.js theme needs an ```id``` attribute of ```theme```.
- The `````` element of the syntax highlighting theme needs an ```id``` attribute of ```highlight-theme```.

```html

...

...

```

The value for this ```id``` is not configurable. It must be ```theme``` and ```highlight-theme``` respectivly otherwise the plugin will not find the stylesheets in your presentation file.

### Remark

Please remember that no other syntax highlightning themes besides ```zenburn.css``` are shipped with the standard reveal.js package. You may want to install further highlight.js themes from [https://highlightjs.org/](https://highlightjs.org/) into the same directory as the shipped themes.

## Usage

After installation theme settings are allowed in different places. The theme applied to your presentation is the first found from the following list:

1. URI parameter
1. Configuration options
1. `````` element

### Configuration

You can configure some aspects of the plugin by adding the following options to your reveal configuration. Note that all configuration values are optional and will default to the settings from your link elements.

Configuration options are useful if you have further plugins installed like [AltMode](https://github.com/McShelby/reveal-altmode) to toggle between different themes during your live presentation.

```javascript
Reveal.initialize({
// ...

// Overrides the theme set in element by the
// given value.
// If your presentation was copied from the reveal.js demo.html,
// everything just works.
// Otherwise you need to set id="theme" on reveal.js theme
// element.
theme: 'serif',

// Overrides the syntax highlightning theme set in element
// by the given value.
// For reveal 4.x, if your presentation was copied from the reveal.js
// demo.html, everything just works.
// For reveal 3.x this only works if you set id="highlight-theme"
// on the element.
highlightTheme: 'monokai',
});
```

### URI parameter

URI parameter come in handy if you just want to try out new themes without editing your presentation file.

```
http://example.com/demo.html?theme=serif&highlightTheme=monokai
```

### Theme values

Values for themes may contain one of the following:

- a style name (eg. ```serif```). The plugin will append ```.css``` to the name and tries to access the file from the theme directory of reveal.js or the syntax highlightning theme directory relative to your reveal.js installation.

- a stylesheet filename (eg. ```serif.css```). The plugin will try to access the file from the theme directory of reveal.js or or the syntax highlightning theme directory relative to your reveal.js installation.

- a relative path with filename (eg. ```dist/theme/serif.css```). The plugin will try to access the file relative to your reveal.js installation.

## API

### CSS

To apply style overrides depending on the displayed themes, the plugin will add data attributes with the names of the active themes as values to the `````` element like:

```html
...

...
```

### Javascript

The plugin API is accessible from the global ```ThemeOverride``` object.

```javascript
// Change a config value at runtime
ThemeOverride.configure({
// Takes the same options as for configuration
theme: 'serif.css',
highlightTheme: 'monokai',
});
```

## License

[MIT licensed](https://en.wikipedia.org/wiki/MIT_License).