0.16.2 • Published 3 months ago
chord-mark-themes v0.16.2
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 |
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.
0.16.1
3 months ago
0.16.2
3 months ago
0.16.0
5 months ago
0.15.0
5 months ago
0.14.0
1 year ago
0.13.0
1 year ago
0.13.0-beta.5
1 year ago
0.13.0-beta.6
1 year ago
0.13.0-beta.4
1 year ago
0.13.0-beta.1
1 year ago
0.13.0-beta.2
1 year ago
0.13.0-beta.0
1 year ago
0.13.0-beta.3
1 year ago
0.12.0
2 years ago
0.11.0
2 years ago
0.11.0-beta.1
2 years ago
0.11.0-beta.0
2 years ago
0.10.0
2 years ago
0.10.0-beta.6
2 years ago
0.10.0-beta.5
2 years ago
0.10.0-beta.3
2 years ago
0.9.1
2 years ago
0.9.0
2 years ago