Primer CSS Theming Set Theme
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.
We will study Primer CSS theming in this tutorial. Primer CSS provides a variety of colour schemes for elements and tools. Depending on the active theme and colour mode, the website’s colour will change. The website has a light theme by default.
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_dimmed_contrast”|
<html data-color-mode="dark" data-dark-theme="dark_dimmed_contrast">
Example1: In the example that follows, we’ll simply add the property to the document root element to switch the theme of the website to the light mode.
Example2: In the example that follows, we’ll simply add the property to the document root element to switch the theme of the website to Dark mode.