Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sebald/spectacle-theme-nova
:nail_care: Nova theme for Spectacle
https://github.com/sebald/spectacle-theme-nova
color-theme nova spectacle syntax-highlighting theme
Last synced: 3 months ago
JSON representation
:nail_care: Nova theme for Spectacle
- Host: GitHub
- URL: https://github.com/sebald/spectacle-theme-nova
- Owner: sebald
- License: mit
- Created: 2016-11-09T19:15:15.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-09-13T15:07:34.000Z (over 7 years ago)
- Last Synced: 2024-10-19T22:28:50.275Z (4 months ago)
- Topics: color-theme, nova, spectacle, syntax-highlighting, theme
- Language: JavaScript
- Homepage: https://sebald.github.io/spectacle-theme-nova
- Size: 1.57 MB
- Stars: 19
- Watchers: 3
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.org/sebald/spectacle-theme-nova) [](https://www.npmjs.com/package/spectacle-theme-nova)
A theme for [Spectacle](https://github.com/FormidableLabs/spectacle) based on the awesome [Nova](http://www.trevordmiller.com/nova/) color theme by [Trevor D. Miller](https://github.com/trevordmiller), [Adam Christiansen](https://twitter.com/AC_Design) and [Merrick Christensen](https://github.com/iammerrick) :sparkling_heart:
#### [Here is an example presentation using the theme.](https://sebald.github.io/spectacle-theme-nova)
## Installation
```
npm install spectacle-theme-nova
```
## Usage
```jsx
import { Spectacle, Deck, Slide } from 'spectacle';
import createTheme from 'spectacle-theme-nova';
const theme = createTheme();
const Presentation = () => (
...
);
```
- You can choose between the regular Nova colors and a bright (inversed) version. The later will be generated if you call `createTheme` with `'avon'` as argument.
- It is possible to overwrite any setting with your custom styles by passing an object as second argument to the `createTheme` function.
**Example:**
```jsx
// Get the "bright" Nova theme
const theme = createTheme('avon');
```
```jsx
// Color the background in slategray
const customStyles = {
global: {
body: { background: 'slategray' }
}
};
const theme = createTheme(null, customStyles);
```
For further information you can also check out the example from this repo.
You'll find the source code [here]():
### Important Note
By default the package exposes the "raw" un-transpiled files. Meaning, all fonts and styles are not bundled. This allows you to do whatever you want with the files when you bundle your presentation.
For example, if you're using [Melodrama](https://github.com/sebald/melodrama) to build your presentation, all fonts can be extracted to have better performance.
If you want a **bundled version** import `'spectacle-theme-nova/bundle'` instead.
## Syntax Highlighting
This theme includes a custom color theme for [PrismJS](https://github.com/PrismJS/prism). Because not everyone might need syntax highlighting you have to import it yourself:
```js
import 'spectacle-theme-nova/syntax/prism.nova.css';
```
By default PrismJS doesn't have a different color for *globals* or certain *statement* (like `return` or `if`). But the Nova color theme does make those distinctions. In order to have a "better" syntax highlighting you can use some custom highlighting. Currently there is support for:
- JavaScript: `import 'spectacle-theme-nova/syntax/prism-javascript'`
- TypeScript: `import 'spectacle-theme-nova/syntax/prism-typescript'`
You can check out the difference between the highlighting in the below picture.
