Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Está creado con el sistema de diseño de GitHub.
En este artículo, veremos Primer CSS Theming Sync to the System . Para sincronizar el tema del sitio web con el tema actual del sistema operativo, el atributo data-color-mode debe establecerse en automático y los atributos data-light-theme y data-dark-theme deben estar presentes. Los valores válidos de los atributos data-light-theme y data-dark-theme se proporcionan en la siguiente tabla.
| Atributo | Valores Válidos (Separados con la coma) |
|---|---|
| tema de luz de datos | luz |
| datos-oscuro-tema | oscuro, oscuro_atenuado, oscuro_alto_contraste |
Sintaxis:
<div data-color-mode="auto" data-light-theme="light"
data-dark-theme="dark_high_contrast">
...
</div>
Ejemplo 1: este ejemplo muestra el uso de los atributos anteriores para establecer el tema de la página en el tema del sistema operativo. El atributo data-light-theme se establece en light y el atributo data-dark-theme se establece en 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>
Producción:
Cuando el tema del sistema operativo se establece en luz:
Cuando el tema del sistema operativo está configurado en oscuro:
Ejemplo 2: este ejemplo muestra el uso de los atributos de tematización para sincronizar el tema con el sistema operativo. El atributo data-light-theme se establece en light y el atributo data-dark-theme se establece en 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>
Producción:
Cuando el tema del sistema operativo se establece en luz:
Cuando el tema del sistema operativo está configurado en oscuro:
Referencia: https://primer.style/css/support/theming#sync-to-the-system
Publicación traducida automáticamente
Artículo escrito por prakhara306 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA