Fonts and colors themes settings the website for a better reading experience
npm install @honkit/honkit-plugin-fontsettings@honkit/honkit-plugin-fontsettings is a fork of [Gitbook/plugin-fontsettings]@2.0.0.
This plugin adds font settings button in the HonKit website.
This is a default plugin and it can be disabled using a book.json configuration:
```
{
plugins: ["-fontsettings"]
}
This plugin can be configured in the book.json:
Default configuration is:
`js`
{
"pluginsConfig": {
"fontsettings": {
"theme": 'white', // 'sepia', 'night' or 'white',
"family": 'sans', // 'serif' or 'sans',
"size": 2 // 1 - 4
}
}
}
This plugin exposes the following API to easily allow new themes to manage the plugin behavior.
All API functions are called using the prefix gitbook.fontsettings., for instance gitbook.fontsettings.enlargeFontSize().
#### Font manipulation
##### gitbook.fontsettings.enlargeFontSize()
Increases the font size of the document by one. Max value is 4.
##### gitbook.fontsettings.reduceFontSize()
Decreases the font size of the document by one. Min value is 1.
#### Font families
Each font family should be described as:
`js`
var fontFamily = {
config: 'sans', // name of the font family in book.json for your theme
text: 'Sans', // display name of the font family in menu
id: 0 // the id appended to the CSS class for this font-family
};
The text property will be used to display the font-family name in the fontsettings dropdown menu.
The config property allows you to let the users of your theme choose a default font family in their book.json. You will have to handle setting the chosen font family in your theme's frontend JavaScript.
For instance:
`json`
// book.json
{
plugins: ["my-theme"],
pluginsConfig: {
"my-theme": {
"font-family": "sans"
}
}
}
`js
// my-theme.js
require('gitbook', function(gitbook) {
var FONT_FAMILIES = [
{
config: 'sans',
text: 'Sans',
id: 0
},
{
config: 'serif',
text: 'Serif',
id: 1
}
];
gitbook.events.on('start', function(e, config) {
// Read configuration
var themeConfig = config['my-theme'],
defaultFont = themeConfig['font-family'];
// Initialize new font families
gitbook.fontsettings.setFamilies(FONT_FAMILIES);
// Set to configured font-family
gitbook.fontsettings.setFamily(defaultFont);
});
});
`
The id property lets you define a specific id to use for your CSS rules as explained below.
##### CSS rules
The CSS class font-family- The CSS rules for the font-family can then easily be defined using the parent selector ##### Managing the font families ##### Returns the currently set font families. By default, the font families are: ##### Set the new font families configuration, as an array of font family objects, used by the gitbook.fontsettings.setFamilies(FONT_FAMILIES); This will recreate the fontsettings menu to reflect the changes. ##### Takes a font-family This will basically apply the CSS class with the corresponding family #### Color themes Setting and manipulating color themes follow the exact same rules as font families. Here are the default value for the color themes in the plugin: ##### CSS rules The applied CSS classes for color themes will be in the form: Caution: No CSS class for color theme with For instance, using the default color themes: will result in the following HTML state for the root element: While: will reset the HTML state for the root element: ##### Managing the color themes ##### Returns the currently set color themes. By default, the font families are: ##### Set the new color themes configuration, as an array of font family objects, used by the gitbook.fontsettings.setThemes(COLOR_THEMES); This will recreate the fontsettings menu to reflect the changes. ##### Takes a color theme This will basically apply the CSS class with the corresponding theme Apache-2.0 (same as [Gitbook/plugin-fontsettings]) [Gitbook/plugin-fontsettings]: https://github.com/GitbookIO/plugin-fontsettings will be applied to the theme book's root element when a font family is selected in the menu..book.font-family-:`CSS`
.book.font-family-
font-family: 'My Awesome Font';
}gitbook.fontsettings.getFamilies()`js`
// Default font families
var FAMILIES = [
{
config: 'serif',
text: 'Serif',
id: 0
},
{
config: 'sans',
text: 'Sans',
id: 1
}
];gitbook.fontsettings.setFamilies()plugin-fontsettings in the form:`js`
var FONT_FAMILIES = [
{
config: 'sans',
text: 'Sans',
id: 0
},
{
config: 'serif',
text: 'Serif',
id: 1
}
];gitbook.fontsettings.setFamily()config key as an argument and updates the font-family used for this book.id: .font-family-.`js`
// Default themes
var THEMES = [
{
config: 'white',
text: 'White',
id: 0
},
{
config: 'sepia',
text: 'Sepia',
id: 1
},
{
config: 'night',
text: 'Night',
id: 2
}
];.color-theme-.id: 0 will be applied. Basically, the first color theme corresponds to your default theme's colors.`js`
gitbook.fontsettings.setTheme('night');`HTML
``js`
gitbook.fontsettings.setTheme('white');`HTML
`gitbook.fontsettings.getFamilies()`js`
// Default themes
var THEMES = [
{
config: 'white',
text: 'White',
id: 0
},
{
config: 'sepia',
text: 'Sepia',
id: 1
},
{
config: 'night',
text: 'Night',
id: 2
}
];gitbook.fontsettings.setThemes()plugin-fontsettings in the form:`js`
var COLOR_THEMES = [
{
config: 'light',
text: 'Light',
id: 0
},
{
config: 'dark',
text: 'Dark',
id: 1
}
];gitbook.fontsettings.setTheme()config key as an argument and updates the color theme used for this book.id: .color-theme-, or remove the applied CSS class if the selected theme id is 0`.License
[gitbook-tester]: https://github.com/todvora/gitbook-tester
[honkit-tester]: https://github.com/vowstar/honkit-tester