Color and theme

Fire UI provides some basic colors and Fire UI supports night theme. To use only Fire UI color and theme features, copy and paste this stylesheet and style tag into your head element to load Fire UI color and theme CSS and JS.

<link rel="stylesheet" href="https://unpkg.com/@fire-ui/fire-ui@0.1.1/src/feature/Colors%20and%20Theme/color.css">
<script src="https://unpkg.com/@fire-ui/fire-ui@0.1.1/src/feature/Colors%20and%20Theme/color.js"></script>

Theme

Fire UI has light theme and dark theme. To use this inside your website, add theme attribute to body tag, with value light or dark. For example, <body theme="dark"> will make your website in dark mode. In contrast, <body theme="light"> will make your website in light mode. In case of switching theme, add switch-theme attribute into buttons.

Example:

You can switch theme of this website by clicking here and

<p>You can switch theme of this website by clicking <u switch-theme>here</u> and <button switch-theme class="theme-reverse btn">Here</button></p>

Colors

Note that you can customize colors. For more information, read Customize

Text colors class:

black-text
white-text
blue-text
red-text
yellow-text
green-text
purple-text

Special class:

theme-adjust (This class background color and color will adjust from page theme, click here to change theme)
theme-reverse (This class background color and color will reverse from page theme, click here to change theme)

Background color class

dark-background
light-background
black-background
white-background
blue-background
red-background
yellow-background
green-background
purple-background