Open In App

Primer CSS Theming Sync to the System

Last Updated : 06 May, 2022
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 color. It is created with GitHub’s design system.

In this article, we will see Primer CSS Theming Sync to the System. To sync the theme of the website with the current theme of the operating system, the data-color-mode attribute should be set to auto, and the data-light-theme and data-dark-theme attributes should be present. The valid values of data-light-theme and data-dark-theme attributes are given in the table below.

Attribute Valid Values (Separated with the comma)
data-light-theme light
data-dark-theme dark, dark_dimmed, dark_high_contrast

Syntax:

<div data-color-mode="auto" data-light-theme="light" 
    data-dark-theme="dark_high_contrast"> 
    ... 
</div>

Example 1: This example shows the use of the above attributes to set the theme of the page to the theme of the OS. The data-light-theme attribute is set to light and the data-dark-theme attribute is set to dark.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>Theming sync to the system - Primer CSS</title>
    <link href=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css"
        rel="stylesheet" />
</head>
  
<body data-color-mode="auto" data-light-theme="light" 
    data-dark-theme="dark">
    <div class="text-center">
        <h2 style="color:green">GeeksforGeeks</h2>
        <h4>Primer CSS - Theming sync to the system</h4>
    </div>
  
    <div class="d-flex flex-justify-center">
        <div>
            <h3 class="p-3">Theme Synced to system</h3>
            <button class="btn">Button 1</button>
            <button class="btn">Button 2</button>
            <button class="btn">Button 3</button>
        </div>
    </div>
</body>
  
</html>


Output:

When OS theme is set to light:

 

When OS theme is set to dark:

 

Example 2: This example shows the use of the theming attributes to sync the theme with OS. The data-light-theme attribute is set to light and the data-dark-theme attribute is set to dark_dimmed.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>Theming sync to the system - Primer CSS</title>
    <link href=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css"
        rel="stylesheet" />
</head>
  
<body data-color-mode="auto" data-light-theme="light" 
    data-dark-theme="dark_dimmed">
      
    <div class="text-center">
        <h2 style="color:green">GeeksforGeeks</h2>
        <h4>Primer CSS - Theming sync to the system</h4>
    </div>
  
    <div class="d-flex flex-justify-center">
        <div>
            <h3 class="p-3">Theme Synced to system</h3>
            <button class="btn">Button 1</button>
            <button class="btn">Button 2</button>
            <button class="btn">Button 3</button>
        </div>
    </div>
</body>
  
</html>


Output:

When OS theme is set to light:

 

When OS theme is set to dark:

 

Reference: https://primer.style/css/support/theming#sync-to-the-system



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads