Primer CSS Theming
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and colour. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.
In this article, we are going to learn about Primer CSS theming. Multiple colour themes for components and utilities are offered by Primer CSS. The webpage will change its colour based on the active theme and colour mode. By default light theme is used on the webpage.
Primer CSS Data attributes:
|Dark Dimmed||data-color-mode=”dark” data-dark-theme=”dark_dimmed”|
|Dark High Contrast||data-color-mode=”dark” data-dark-theme=”dark_high_contrast”|
<html data-color-mode="dark" data-dark-theme="dark_dimmed">
Note: These attributes should be added to the document root element <HTML> to use on the entire page.
Example 1: In the following example, we are going to change the theme to the dark mode of the web page by just including the attribute to the document root element.
Example 2: In the following example, we are going to change the theme to the light mode of the web page by just including the attribute to the document root element.
Please Login to comment...