Open In App

Primer CSS Theming Set Theme

Improve
Improve
Like Article
Like
Save
Share
Report

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:

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_dimmed_contrast”

 

Syntax:

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

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"> Themer settings </h1>
            <h3>Primer CSS | Light Theme</h3>
        </div>
        <div class="container-lg clearfix">
            <div>
                <h2><b>What is Themer settings?.</b></h2> <br><br>
                <h4>We have to provide a variety of services for 
                      you to learn, for Tutorials, Millions of Articles,
                    Live, Online and Classroom Courses, Frequent
                    Coding Competitions, Webinars by Industry Experts,
                      Internship opportunities and Job Opportunities
                    Knowledge</h2>
            </div>
        </div>
    </center>
</body>
  
</html>


Output:

 

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.

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"> Themer settings </h1>
            <h3>Primer CSS | Dark Theme</h3>
        </div>
        <div class="container-lg clearfix">
            <div>
                <h2><b>What is Themer settings?.</b></h2> <br><br>
                <h4>We have to provide a variety of services for 
                      you to learn, for Tutorials, Millions of Articles,
                    Live, Online and Classroom Courses, Frequent
                    Coding Competitions, Webinars by Industry Experts,
                      Internship opportunities and Job Opportunities
                    Knowledge</h2>
            </div>
        </div>
    </center>
</body>
  
</html>


Output:

 

Reference: https://primer.style/css/support/theming



Last Updated : 07 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads