chord-mark-themes v0.17.0

ChordMarkThemes

A set of SCSS themes to style chord-mark's HTML output. For now, they are only available as Sass files. Let me know if there is an interest in compiled CSS.

Installation

npm install chord-mark-themes

Usage

Set your bundler to support Sass files and import the themes in your code:

// load all themes
import '../node_modules/chord-mark-themes/scss/chordMarkThemes';

// load only a specific theme
import '../node_modules/chord-mark-themes/scss/themes/dark1';

Wrap ChordMark's output:

<div class="cmTheme-dark1">
	<!-- ChordMark's output goes here -->
</div>

Available themes

Utility classes

You can adjust the font size using one of the utilities classes below:

• cmSong--fontSize-5
• cmSong--fontSize-4
• cmSong--fontSize-3
• cmSong--fontSize-2
• cmSong--fontSize-1
• cmSong--fontSize1
• cmSong--fontSize2
• cmSong--fontSize3
• cmSong--fontSize4
• cmSong--fontSize5

They need to be added to the wrapper:

<div class="cmTheme-dark1 cmSong--fontSize-4">
	<!-- ChordMark's rendering goes here -->
</div>

Development

ChordMarkThemes comes with a playground to ease theme development. To launch, run:

npm run start

And open the playground in your browser.