Primer CSS Theming Set Theme - Coding

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

Reffered: https://www.geeksforgeeks.org

CSS

Related
Primer CSS Breakpoint Variables
Foundation CSS XY Grid Importing
Semantic-UI Grid Negative Margins
Foundation CSS Flex Grid Importing
Foundation CSS Float Grid Importing

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	8