Class: ThemeSet

Constructor#

new ThemeSet(optsopt)#

Create a ThemeSet instance.

Parameters:

Name Type Attributes Description

opts

Object

Properties

Name	Type	Attributes	Default	Description
`cssNesting`	boolean	<optional>	true	Enable CSS nesting support.

Source: theme_set.js, line 34

Members#

cssNesting :boolean#

A boolean value indicating whether the theme set is enabling CSS nesting or not.

Type:

boolean

Source: theme_set.js, line 101

default :Theme|undefined#

An instance of default theme.

While running ThemeSet#pack, ThemeSet will use this theme when the definition of theme directive or the theme with specified name is not found.

By default, Marpit does not provide default theme (undefined).

Type:

Theme | undefined

Source: theme_set.js, line 53

metaType :Object#

The default type settings for theme metadata added by ThemeSet#add.

A key of object is the name of metadata and a value is the type which of String and Array. You have to set Array if the theme allows multi-time definitions in same meta key.

CODE

 /**
 * @theme example
 * @foo Single value
 * @foo allows only one string
 * @bar Multiple value 1
 * @bar Multiple value 2
 * @bar Multiple value 3
 * ...

CODE

 const themeSet = new ThemeSet()
 
themeSet.metaType = {
  foo: String,
  bar: Array,
}
 
themeSet.add(css)
 
console.log(themeSet.getThemeMeta('example', 'foo'))
// => 'allows only one string'
 
console.log(themeSet.getThemeMeta('example', 'bar'))
// => ['Multiple value 1', 'Multiple value 2', 'Multiple value 3']

Type:

Object

Source: theme_set.js, line 93

(readonly) size :number#

Return the number of themes.

Type:

number

Source: theme_set.js, line 112

Methods#

add(css) → {Theme}#

Add theme CSS from string.

Parameters:

Name	Type	Description
`css`	string	The theme CSS string.

Source: theme_set.js, line 124

Throws:

Will throw an error if the theme name is not specified by @theme metadata.

Returns:

A created Theme instance.

Type:: Theme

addTheme(theme)#

Add theme instance.

Parameters:

Name	Type	Description
`theme`	Theme	The theme instance.

Source: theme_set.js, line 140

Throws:

Will throw an error if the theme name is not specified.

clear()#

Removes all themes from a themeSet object.

Source: theme_set.js, line 153

delete(name) → {boolean}#

Remove a specific named theme from a themeSet object.

Parameters:

Name	Type	Description
`name`	string	The theme name to delete.

Source: theme_set.js, line 164

Returns:

Returns true if a theme in current ThemeSet existed and has been removed, or false if the theme does not exist.

Type:: boolean

get(name, fallbackopt) → {Theme|undefined}#

Returns a specific named theme.

Parameters:

Name	Type	Attributes	Default	Description
`name`	string			The theme name to get.
`fallback`	boolean	<optional>	false	If true, return instance's default theme or scaffold theme when specified theme cannot find.

Source: theme_set.js, line 178

Returns:

Returns specified or fallbacked theme, or undefined if fallback is false and the specified theme has not existed.

Type:: Theme | undefined

getThemeMeta(theme, meta) → {string|Array.<string>|undefined}#

Returns value(s) of specified metadata from a theme. It considers @import and @import-theme rules in getting meta value. On the other hand, the default theme specified by the instance is not considered.

To support metadata with array type, it will merge into a flatten array when the all of got valid values that includes imported themes are array.

Parameters:

Name	Type	Description
`theme`	string \| Theme	The theme name or instance.
`meta`	string	The meta name to get.

Source: theme_set.js, line 195

Returns:

Type:: string | Array.<string> | undefined

getThemeProp(theme, prop) → {*}#

Returns the value of specified property name from a theme. It considers @import and @import-theme rules in getting value.

It will fallback the reference object into the instance's default theme or scaffold theme when the specified theme is undefined.

Parameters:

Name	Type	Description
`theme`	string \| Theme	The theme name or instance.
`prop`	string	The property name to get.

Source: theme_set.js, line 225

Returns:

Type:: *

has(name) → {boolean}#

Returns a boolean indicating whether a specific named theme exists or not.

Parameters:

Name	Type	Description
`name`	string	The theme name.

Source: theme_set.js, line 243

Returns:

Returns true if a specific named theme exists, otherwise false.

Type:: boolean

pack(name, optsopt) → {string}#

Convert registered theme CSS into usable in the rendered markdown by Marpit#render.

This method is designed for internal use by Marpit class. Use Marpit#render instead unless there is some particular reason.

Parameters:

Name Type Attributes Description

name

string

The theme name. It will use the instance's default theme or scaffold theme when a specific named theme does not exist.

opts

Object

The option object passed by Marpit#render.

Properties

Name	Type	Attributes	Description
`after`	string	<optional>	A CSS string to append into after theme.
`before`	string	<optional>	A CSS string to prepend into before theme.
`containers`	Array.<Element>	<optional>	Container elements wrapping whole slide deck.
`containerQuery`	boolean \| string \| Array.<string>	<optional>	Enable CSS container query by setting `true`. You can also specify the name of container for CSS container query used by the `@container` at-rule in child elements.
`printable`	boolean	<optional>	Make style printable to PDF.
`inlineSVG`	Marpit~InlineSVGOptions	<optional>	Apply a hierarchy of inline SVG to CSS selector by setting `true`. (Experimental)

Source: theme_set.js, line 269

Returns:

The converted CSS string.

Type:: string

themes() → {Iterator.<Theme>}#

Returns a Iterator object that contains registered themes to current instance.

Source: theme_set.js, line 348

Returns:

Type:: Iterator.<Theme>

	/**
	* @theme example
	* @foo Single value
	* @foo allows only one string
	* @bar Multiple value 1
	* @bar Multiple value 2
	* @bar Multiple value 3
	* ...

	const themeSet = new ThemeSet()

	themeSet.metaType = {
	foo: String,
	bar: Array,
	}

	themeSet.add(css)

	console.log(themeSet.getThemeMeta('example', 'foo'))
	// => 'allows only one string'

	console.log(themeSet.getThemeMeta('example', 'bar'))
	// => ['Multiple value 1', 'Multiple value 2', 'Multiple value 3']