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. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
En este artículo, vamos a aprender sobre la tematización de Primer CSS. Primer CSS ofrece múltiples temas de color para componentes y utilidades. La página web cambiará de color según el tema activo y el modo de color. Por defecto, el tema claro se usa en la página web.
Primer Atributos de datos CSS:
| Tema | atributos de datos |
|---|---|
| Luz | datos-color-modo=”luz” datos-luz-tema=”luz” |
| Oscuro | datos-color-modo=”oscuro” datos-oscuro-tema=”oscuro” |
| oscuro atenuado | data-color-mode=”oscuro” data-dark-theme=”dark_dimmed” |
| Alto contraste oscuro | data-color-mode=”oscuro” data-dark-theme=”dark_high_contrast” |
Sintaxis:
<html data-color-mode="dark" data-dark-theme="dark_dimmed">
Nota: estos atributos deben agregarse al elemento raíz del documento <HTML> para usar en toda la página.
Ejemplo 1: En el siguiente ejemplo, vamos a cambiar el tema al modo oscuro de la página web simplemente incluyendo el atributo al elemento raíz del documento.
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>
Producción:
Ejemplo 2: En el siguiente ejemplo, vamos a cambiar el tema al modo ligero de la página web simplemente incluyendo el atributo al elemento raíz del documento.
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>
Producción:
Referencia : https://primer.style/css/support/theming#sync-to-the-system
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA