Primer CSS Theming

Last Updated : 02 Jun, 2022

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:

Theme	data attributes
Light	data-color-mode=”light” data-light-theme=”light”
Dark	data-color-mode=”dark” data-dark-theme=”dark”
Dark Dimmed	data-color-mode=”dark” data-dark-theme=”dark_dimmed”
Dark High Contrast	data-color-mode=”dark” data-dark-theme=”dark_high_contrast”

Syntax:

<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.

HTML

<!DOCTYPE html> 
<html data-color-mode="dark" data-dark-theme="dark"> 
  
<head> 
    <title>Primer CSS | Dark Theme</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
  
<body > 
    <center> 
        <div class="m-4"> 
            <h1 class="color-fg-success"> GeeksforGeeks </h1> 
            <h3>Primer CSS | Dark Theme</h3> 
        </div> 
        <div class="container-lg clearfix"> 
            <div > 
                <h2><b>What is GeeksforGeeks used for?</b></h2> <br><br> 
                <h4>We provide a variety of services for  
                  you to learn, thrive and also have fun!  
                  Free Tutorials, Millions of Articles,  
                  Live, Online and Classroom Courses,  
                  Frequent Coding Competitions, Webinars  
                  by Industry Experts, Internship opportunities  
                  and Job Opportunities. Knowledge is power!</h2> 
            </div>         
        </div> 
    </center> 
</body> 
</html> 

Output:

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.

HTML

<!DOCTYPE html> 
<html data-color-mode="light" data-dark-theme="light"> 
  
<head> 
    <title>Primer CSS | Light Theme</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
  
<body > 
    <center> 
        <div class="m-4"> 
            <h1 class="color-fg-success"> GeeksforGeeks </h1> 
            <h3>Primer CSS | Light Theme</h3> 
        </div> 
        <div class="container-lg clearfix"> 
            <div > 
                <h2><b>What is GeeksforGeeks used for?</b></h2> <br><br> 
                <h4>We provide a variety of services for you to learn, 
                  thrive and also have fun! Free Tutorials, Millions of  
                  Articles, Live, Online and Classroom Courses, Frequent  
                  Coding Competitions, Webinars by Industry Experts,  
                  Internship opportunities and Job Opportunities.  
                  Knowledge is power!</h2> 
            </div>         
        </div> 
    </center> 
</body> 
</html> 