Theme
Be a canvas for users to tailor their visual experience, promoting inclusivity and user satisfaction.
Themes
We offer a variety of themes to cater to different design preferences and requirements. Our themes are designed to be flexible, using pre-defined colors themes, allowing you to easily switch between them and customize your application's appearance. Here's an overview of the themes we offer and how you can utilize them in your projects.
Default Theme
To use the default theme, simply include the Plus UI library in your project. All components will automatically adopt the default theme settings that indigo 600 as primary color.
Please check Plus UI 's color palette, color variables, and color tokens to see default color settings.
Pre-defined Theme Colors
Plus UI offers 22 pre-defined theme colors with dark and light mode settings as below, giving you a wide range of options to choose from for your application's design.
Our color logic is based on the Tailwind Color Palette, which ensures a consistent and comprehensive range of colors. This palette includes various shades for each color, allowing for greater flexibility and precision in your design.
Installation via CDN
To include the @plusui/theme package in your project using a CDN, simply add the following line to your HTML file within the <head> tag:
This method allows you to quickly integrate the theme without the need for additional tools or build steps.
Using Different Themes
The @plusui/theme package provides flexibility in how you use themes. Depending on your requirements, you can choose to use all themes or a specific theme.
1. Using All Themes
To utilize all available themes, you should include the index.css file from the dist directory using the CDN link provided above.
You can then set the theme dynamically in your HTML by using the data-theme attribute on the <body> tag. For example:
Replace theme-name with the desired theme. Additionally, you can use any of the 22 colors available in Tailwind CSS as a theme names on color pallette. For example:
2. Using a Specific Theme
If you only need a specific theme, you can include the corresponding CSS file directly. For example, to use only the red theme, add the following line to your HTML file:
Customizing Colors
The @plusui/theme package works seamlessly with @plusui/core, allowing you to customize the primary colors of all components. To change the primary colors, ensure you have @plusui/core installed in your project and follow its documentation to adjust the primary color settings.
You now have the information needed to install and use the @plusui/theme package via CDN. You can easily switch between all available themes or select a specific theme for your project.
Using Multiple Themes
Light & Dark Mode
Plus UI supports both light and dark modes, enabling you to provide a better user experience by adapting to different lighting conditions and user preferences. Switching between light and dark modes is seamless and can be controlled programmatically or based on the user's system settings.
Light Mode
Light mode is ideal for environments with ample ambient light, providing high visibility and readability. It features a light background with dark text, ensuring that content stands out clearly.
To enable light mode, you can apply the following class to your HTML element:
Dark Mode
Dark mode is perfect for low-light environments, reducing eye strain and conserving device battery life. It uses a dark background with light text, offering a modern and sleek appearance.
The dark theme works by taking the light theme’s color tokens and “flipping” the scale so 100 becomes 900, 200 becomes 800, 300 becomes 700, etc.
To enable dark mode, you can apply the following class to your HTML element:
Last updated
