Skip to content

Custom Theme

Vinicius Reif Biavatti edited this page Feb 21, 2022 · 3 revisions

Variables Source

The custom theme is available changing the variables in source file src/variables.scss. After change, you have to compile the project with gulp task. Take a look in Contributing page to check how to do this.

Default Font

There are two fonts to use in the project. Lucida Console and DOS. The Lucida Console font was already imported in almost every browser and doesn't need to has a specific file with this font configuration. The DOS font is other font available in the project, that can be found in the src/fonts folder. The DOS font is called by DOS VGA 437 and can be found to download at this link.

/* Font (Options: 'Lucida Console' or 'DOS') */
$font: 'Lucida Console';
$font-size: 18px;

Theme

There are theme css classes in the project but this classes are not used in the components. This is available to have default colors in you project to be more easy to control this. You can change this colors using your preferred colors.

/* Theme */
$primary: rgb(0, 0, 168);
$secondary: rgb(168, 168, 168);
$success: rgb(0, 168, 0);
$danger: rgb(168, 0, 0);
$warning: rgb(168, 168, 0);
$info: rgb(0, 168, 168);

To use these colors on your project, call the .primary, .secondary, .success, .danger, .warning or .info classes.

Clone this wiki locally