Colores

Material for MkDocs aporta una configuración de colores basada en el tema Material de Google. Más allá de este estándar, podemos personalizar nuestras páginas web usando otros colores que sean de nuestro agrado.

Esquemas de color

Al conjunto de colores aplicado se le llama "esquema". Material for MkDocs incluye de serie dos esquemas de color, uno claro y otro oscuro, llamados default y slate respectivamente. Como su nombre indica, el esquema por defecto es el claro.

Si queremos un tema oscuro, podemos establecerlo en mkdocs.yml:

theme:
  name: material
  palette:
    scheme: slate

O si queremos optar por el color claro de forma explícita:

theme:
  name: material
  palette:
    scheme: default

Selector de paleta

Podemos hacer uso a la vez de ambos esquemas mencionados, el claro y el oscuro, mostrando en la cabecera del documento un selector en forma de icono sobre el que se pueda pulsar. Cada icono representa un esquema. En el archivo mkdocs.yml tenemos que escribir algo así como:

theme:
  name: material
  palette: 

  - scheme: default
      toggle:
        icon: material/toggle-switch-off-outline 
        name: Modo oscuro

  - scheme: slate 
      toggle:
        icon: material/toggle-switch
        name: Modo claro

Véase que, en este caso, el parámetro palette cambia de naturaleza, convirtiéndose en una lista de dos elementos:

theme:
  palette: 
  - scheme: default
  - scheme: slate 

Cada esquema lleva asociado un botón selector (toggle) con dos propiedades:

• name es el texto emergente que se muestra al pasar el ratón por el icono

• icon es uno de los proporcionados por Material for MkDocs, como vimos en el capítulo dedicado a iconos. Algunos de los más adecuados para este propósito pueden ser:

  • + – material/toggle-switch-off-outline +material/ toggle-switch
  • + – material/weather-sunny + material/weather-night
  • + – material/eye-outline + material/eye
  • + – material/lightbulb-outline + material/lightbulb
  • + – material/brightness-4 + material/brightness-7

Ajustar la paleta al sistema de forma automática

Podemos ajustar la paleta de colores a la configuración del ordenador donde se está visualizando la documentación, indicando el esquema a aplicar a cada caso:

theme:
  name: material
  palette:

    - media: "(prefers-color-scheme: light)" 
      scheme: default
      toggle:
        icon: material/toggle-switch-off-outline
        name: Modo oscuro

    - media: "(prefers-color-scheme: dark)" 
      scheme: slate
      toggle:
        icon: material/toggle-switch
        name: Modo claro

Cuando el usuario entra en el sitio web, se evalúa cada "media" y se toma el primer esquema que coincida con el sistema.

Color primario

Más allá de la selección de un esquema claro u obscuro, podemos cambiar el color de determinados elementos. El denominado color primario es aquel que se usa para la cabecera de la página web, así como elementos tales como los enlaces. Por defecto es  indigo , una especie de azul oscuro intenso. Podemos configurarlo:

theme:
  name: material
  palette:
    primary: indigo

...y cambiarlo por:

•   primary: red  
•   primary: ink  
•   primary: purple  
•   primary: deep purple  
•   primary: indigo  
•   primary: blue  
•   primary: light blue  
•   primary: cyan  
•   primary: teal  
•   primary: green  
•   primary: light green  
•   primary: lime  
•   primary: yellow  
•   primary: amber  
•   primary: orange  
•   primary: deep orange  
•   primary: brown  
•   primary: grey  
•   primary: blue grey  
•   primary: black  
•   primary: white  

Color de resalte

El Accent Color se usa para resaltar elementos con los que podemos interaccionar, como por ejemplo, al pasar el ratón por un enlace.

theme:
  name: material
  palette:
    accent: indigo

Por defecto es indigo. Puede ser:

red      pink    purple        deep purple
indigo   blue    light blue    cyan
teal     green   light green   lime
yellow   amber   orange        deep orange

Colores personalizados

¿Que hacer si ninguno de los colores estándar mencionados coincide con nuestro color corporativo? Material for MkDocs asocia cada color a un nombre identificador, lo que en el mundo de las páginas web se llama "variables CSS". Por ejemplo, el color primario se representa internamente mediante la variable md-primary-fg-color. De esta forma, en una hoja de estilos CSS podemos redefinir esa variable, asociándola a un nombre de color tomado del estándar CSS:

--md-primary-fg-color: crimson;

...o bien, usando códigos de color:

--md-primary-fg-color: #dc143c;

Para aquellos que sean neófitos en la sintaxis CSS, diremos que los colores se pueden representar mediante su nombre simbólico o su código de color. Ver referencia de nombres y códigos en:

https://www.w3.org/wiki/CSS/Properties/color/keywords

Vamos a aplicar nuestros colores favoritos modificando las variables de Material for MkDocs. En el archivo de configuración escribimos:

theme:
  name: material
  palette:
    primary: custom

Seguidamente tenemos que crear una hoja de estilos donde modificar los valores de las variables. Lo indicamos en la configuración:

extra_css:
  - estilos/mis_estilos.css

El siguiente paso es crear una carpeta /docs/estilos y poner allí nuestro archivo mis_estilos.css. Entre otras cosas, en el texto de ese archivo incluimos algo así como:

:root {
  --md-primary-fg-color:        #EE0F0F;
  --md-primary-fg-color--light: #ECB7B7;
  --md-primary-fg-color--dark:  #90030C;
}

Véase que aplicamos esta regla CSS a la clase genérica :root, que representa todo el documento. ¿Como averiguar los nombres del resto de variables? Podemos tomar como guía las definiciones de colores de Material for Mkdocs.

¿Cual es el código de cada color? Lo veremos a continuación.

Códigos de colores

¿Como es posible que cada color tenga un código? Para un recién llegado al mundo de las imágenes digitales, esto puede parecer sorprendente. A fin de cuentas, en la fotografía de un paisaje podemos tener millones de tonalidades, lo que aparentemente es difícil de catalogar. Pero no debemos olvidar que todo color es una combinación de otros tres básicos, rojo, verde y azul.

Imaginemos que la cantidad de cada color básico va de 0 a 100. Supongamos que queremos obtener un verde azulado     . Tendríamos:

• Rojo: 0
• Verde: 50, en una escala de 0 a 100
• Azul: 50, idem

Con lo que el verde azulado se indica como 0, 50, 50.

Los valores 0, 0, 0 para los tres colores básicos representan la ausencia de color, es decir, el negro. Por el contrario, los valores 100, 100, 100 representarían el blanco. La siguiente combinación:

• Rojo: 0
• Verde: 100, en una escala de 0 a 100
• Azul: 100, idem

Representaría un verde azulado más luminoso, un color conocido como cian     .

¿Cuantos colores podemos representar con este sistema? En principio podemos lograr 100 x 100 x 100 combinaciones de colores diferentes, es decir, un millón. Pero en el mundo de los fotografía digital, la cantidad de cada color básico se mide tomando valores de 0 a 255, lo que nos proporciona 16.777.216 millones de combinaciones, suficiente para el ojo humano, que según los estudios realizados, no llega a distinguir tantas tonalidades.

Por lo tanto:

• 255, 0, 0 representa un rojo puro     
• 0, 255, 0 representa el verde puro     
• 0, 0, 255 representa el azul     
• 0, 0, 0 representa el negro     
• 255, 255, 255, es el blanco

Representación hexadecimal

En el mundo de la informática, es costumbre representar los valores numéricos en sistema de numeración hexadecimal, en lugar del decimal, al que estamos habituados. En este cuaderno no vamos a hacer una introducción a los sistemas de numeración. Basta con saber que en hexadecimal se cuenta de dieciséis en dieciséis, y se utilizan los siguientes símbolos:

0 1 2 3 4 5 6 7 8 9 A B C D E F

Veamos una simple calculadora hexadecimal. Introduzca en la casilla superior un valor en sistema decimal o hexadecimal. Pulsando en alguno de los dos botones, se hace la conversión deseada y se muestra el resultado.

Introduzca valor:

Resultado:

Usando el sistema hexadecimal, en lugar de usar un rango de valores de 0 a 255, los colores básicos van de 0 a FF, con lo cual:

• FF, 0, 0 es el rojo     
• 0, FF, 0 es el verde     
• 0, 0, FF es el azul     
• 0, 0, 0 es el negro     
• FF, FF, FF es el blanco

Representando colores

Los códigos hexadecimales se pueden escribir en mayúsculas o minúsculas, y en las hojas de estilo van precedidos por un símbolo #. Para indicar un color se usan seis dígitos, los dos primeros para la cantidad de rojo, de 00 a FF, los dos siguientes para el verde, y los dos últimos para el azul. Por ejemplo, si queremos los párrafos de cabecera en rojo:

h1 {
  color: #ff0000;
}

Veamos varios ejemplos de colores:

Color		Código
rojo		#FF0000
verde		#00FF00
azul		#0000FF
amarillo		#FFFF00
cian		#00FFFF
fucsia		#FF00FF
negro		#000000
gris		#808080
gris claro		#C0C0C0
blanco		#FFFFFF
marrón		#800000
verde oscuro		#008000
azul oscuro		#000080
dorado		#808000
púrpura		#800080
verde azulado		#008080

Veamos una sencilla calculadora de códigos de color:

Pulse en el botón para seleccionar un color:



Código de color seleccionado: #000000
Rojo: #000000
Verde: #000000
Azul: #000000

Esta codificación se denomina RGB, abreviatura de los tres colores básicos, red, green y blue. Como alternativa, se pueden usar otras codificaciones, como es el caso de HSL, que también utiliza tres códigos para cada color, indicando los valores de Matiz, Saturación y Luminosidad. Véase artículo en la Wikipedia.

Dado que este cuaderno no es un tutorial de CSS, no profundizaremos en ello.

Colores de elementos

Más allá de los esquemas, y de la configuración de variables que representan colores, podemos asignar manualmente el color de un elemento o un grupo de elementos. Por ejemplo, si queremos un párrafo en color rojo, podemos escribir:

Texto en color rojo
{: style="color:red;"}

Recuérdese que, para aplicar reglas de estilo a un párrafo en formato markdown, tenemos que activar la extensión attr_list.

También podemos usar reglas de estilo en archivos de hojas de estilos:

• Para cambiar el color de los párrafos de cabeceras:

  .md-typeset h1 {color: SteelBlue; }
  
  .md-typeset h2 {color: CadetBlue; }
  
  .md-typeset h3 {color: CadetBlue; }
  

• Para cambiar el color de texto y color de fondo en las cabeceras de tablas:

  .md-typeset__table thead { color: white;
                             background-color: #5382B0;}
  

Vemos que Material for MkDocs define una clase md-typeset a la que pertenecen los textos del documento.

¡Cuidado! El uso de reglas CSS muy personalizadas puede entrar en conflicto con los esquemas generados por Material for MkDocs. Además, no tenemos garantía de que nuestro diseño sea compatible con futuras versiones del software. El "tuneado" de colores se debe hace de manera muy sobria, y asumiendo los posibles riesgos.