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

| Theme | CSS class | Description | | ------ | --------------- | ---------------------------------------------------------------------------------- | | Dark 1 | cmTheme-dark1 | Based on Chord Chart Studio color scheme | | Dark 2 | cmTheme-dark2 | Based on Dracula color scheme | | Dark 3 | cmTheme-dark3 | Also based on Dracula color scheme | | Print | cmTheme-print | Can be used to display a print preview | | Text | cmTheme-text | Can be used to display a text file preview |

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.