01 - Colores

Paleta de colores

La paleta de colores contempla todos los colores usados, tanto en el modo oscuro, como en el claro. En el listado se muestra una muestra del color, el nombre de la variable global y el valor del color.

• antique-bronze: hsla(45, 98%, 21%, 1.00)
• blue-charcoal: hsla(210, 16%, 13%, 1.00)
• bright-sun: hsla(45, 99%, 61%, 1.00)
• brillant-lavender: hsla(300, 98%, 84%, 1.00)
• cola: hsla(45, 100%, 11%, 1.00)
• cream-brulee: hsla(45, 98%, 81%, 1.00)
• gallery: hsla(0, 0%, 94%, 1.00)
• gray-bush: hsla(269, 61%, 33%, 1.00)
• green: green
• iron: hsla(0, 0%, 84%, 1.00)
• light-blue: hsla(195, 53%, 79%, 1.00)
• lynch: hsla(212, 15%, 49%, 1.00)
• melrose: hsla(239, 97%, 87%, 1.00)
• milk-punch: hsla(45, 100%, 91%, 1.00)
• mine-shaft: hsla(0, 0%, 20%, 1.00)
• oxford-blue: hsl(212, 15.2%, 19.4%)
• roman: hsla(0, 65%, 60%, 1.00)
• silver: hsla(0, 0%, 75%, 1.00)
• voodoo: hsla(281, 21%, 29%, 1.00)
• white-smoke: hsla(120, 5%, 96%, 1.00)
• white: white

Light dark mode

Si el navegador soporta la función light-dark() este site proporciona colores específicos para cada modo (claro o oscuro), si el navegador no lo soporta solo se muestran los colores de el modo claro.

root: {
    color-scheme: light dark;
    --body-bg-color: light-dark( var(--white) ,var(--oxford-blue) );
}

Variables semánticas

Se han definido variables semánticas para aplicar los colores, adjudicando una variable de color definida en la paleta para el modo claro y otro para el modo oscuro

:root {
    --background-image-invert: 
        light-dark( 
            var(--gallery), 
            var(--gallery) 
        );
    --body-bg-color: 
        light-dark( 
            var(--white),
            var(--oxford-blue) 
        );
    --button-background: 
        light-dark( 
            var(--mine-shaft),
            var(--oxford-blue) 
        );
    --button-color: 
        light-dark( 
            var(--white-smoke),
            var(--silver) 
        );
    --button-background-hover: 
        light-dark( 
            var(--roman),
            var(--voodoo) 
        );
    --button-border: 
        light-dark( 
            var(--mine-shaft),
            var(--silver) 
        );
    --code-background: 
        light-dark( 
            var(--white-smoke),
            var(--blue-charcoal) 
        );
    --color-line: 
        light-dark( 
            var(--iron),
            var(--lynch) 
        );
    --color-shadow: 
        light-dark( 
            var(--iron),
            var(--lynch) 
        );
    --color-link: 
        light-dark( 
            var(--voodoo),
            var(--light-blue) 
        );
    --color-link-hover: 
        light-dark( 
            var(--roman),
            var(--melrose) 
        );
    --logo-color: 
        var(--color-link);
    --logo-hover: 
        var(--color-link-hover);
    --color-link-visited: 
        light-dark( 
            var(--gray-bush),
            var(--brillant-lavender) 
        );
    --color-text: 
        light-dark( 
            var(--mine-shaft),
            var(--silver) 
        );
    --color-warning-light: 
        light-dark( 
            var(--milk-punch),
            var(--cola) 
        );
    --color-warning: 
        light-dark( 
            var(--bright-sun),
            var(--antique-bronze) 
        );
    --color-warning-text: 
        light-dark( 
            var(--antique-bronze),
            var(--cream-brulee) 
        );
    --surface-1-background: 
        light-dark( 
            var(--gallery),
            var(--blue-charcoal) 
        );
    --surface-1-border: 
        light-dark( 
            var(--gallery),
            var(--blue-charcoal) 
        );
}