C’est variable ?

Variables SASS et CSS

  

Notes

 /* VARIABLES SASS */

    /* MEDIA QUERIES */
    $mq-small : 576px;
    $mq-medium : 768px;
    $mq-large : 992px;
    $mq-xlarge : 1200px;
    $mq-xxlarge : 1441px;


/* Theme switcher : dark -> light theme */

/* Light theme */
.light-theme{
    --color-primary: #0060df;
    --color-secondary: #fff;
    --color-accent: #fd6f53;
    --font-color: #000000;
    --font-color-light: rgba(0, 0, 0, 0.75); /* lighter */
    --links-color: var(--color-3);
    --border-color: #eaeaea;
}

/* Dark theme */
.dark-theme {
    --color-primary: #17ed90;
    /* --color-secondary: #2a2c2d; */
    --color-secondary: #000;
    --color-accent: #12cdea;
    --font-color: #ffffff;
    --font-color-light: rgba(255, 255, 255, 0.75); /* lighter */
    --links-color: var(--color-3);
    --border-color: #707070;
}

:root {
    
    /* COULEURS */
    /* Nuances de Gris */
    --gray-medium: rgba(0, 0, 0, .75);
    --gray-light: rgba(0, 0, 0, .5);
    --gray-xlight: rgba(0, 0, 0, .25);
    
    /* Liens */
    /* texte des boutons */
    --color-txt-btn: #fff;
    
    /* Couleurs -> Japp */
    --color-1: rgba(1, 25, 54, 1); /* Bleu Noir -> header, navbar ? */
    --color-2: #F9DC5C; /* Jaune */
    --color-3: #ED254E; /* Rouge Rose -> bouton survolé */
    --color-4: #C21F40; /* Rouge "pourpre" -> bouton par défaut */
    --color-5: #F4FFFD; /* Blanc "bleuté" -> fonds d'éléments ? */
    
    /* POLICES */
    
    --main-font: 'PT Serif', serif; /* PT Serif pour le CORPS de texte */
    --headings-font: 'Roboto', sans-serif; /* Roboto pour les TITRES */
    --custom-font: 'Eurostile', sans-serif; /* Adobe Font */

    /* Ombres */
    
    /* GRIS */
    --small-shadow : 0 .25rem .375rem rgba(0,0,0,.09);
    --shadow-default: 0px 10px 30px -10px rgba(151, 163, 184, 0.5);
    --medium-shadow : 0 14px 28px rgba(0, 0, 0, 0.015), 0 10px 10px rgba(0, 0, 0, 0.035);

    --light-shadow : 0 .5rem 1rem rgba(0,0,0,.15); /* cf .shadow Bootstrap */
    --xlight-shadow : 0 .25rem .5rem rgba(0,0,0,.15);
    --green-shadow : 0 .5rem 1rem rgba(0, 204, 153, 0.2); /* sur la base de vertsiders */
    --yellow-shadow : 0 .5rem 1rem rgba(255, 144, 0, 0.25); /* sur la base de --color-6 */
    --red-shadow : 0 .5rem 1rem rgba(238, 89, 65, 0.25); /* sur la base de --color-7 */
    
    /* RED */
    --red-shadow--default : 0px 10px 30px -10px rgba(237, 37, 78, 0.5);
    --red-shadow--hover :
        0px 10px 0px -10px rgba(237, 37, 78, 0.5),
        0px 20px 10px -20px rgba(237, 37, 78, 0.5),
        0px 30px 20px -25px rgba(237, 37, 78, 0.5),
        0px 40px 30px -30px rgba(237, 37, 78, 0.5),
        0px 50px 50px -35px rgba(237, 37, 78, 0.5);
        
        
    /* YELLOW */
    --yellow-shadow--default : 0px 10px 30px -10px rgba(249, 220, 92, 0.5);
    --yellow-shadow--hover :
        0px 10px 0px -10px rgba(249, 220, 92, 0.5),
        0px 20px 10px -20px rgba(249, 220, 92, 0.5),
        0px 30px 20px -25px rgba(249, 220, 92, 0.5),
        0px 40px 30px -30px rgba(249, 220, 92, 0.5),
        0px 50px 50px -35px rgba(249, 220, 92, 0.5);
    
    
    
    /* DEGRADES */
    
    --gradient-red-yellow :
        linear-gradient(
            50deg,
            rgba(194,31,64,1) 0%,
            rgba(237,37,78,1) 51%,
            rgba(249,220,92,1) 100%); 
    
    --gradient-to-black: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0),
            rgba(0, 0, 0, 1)
        ); /* background-image */
    
 
    --gradient-black-to-white: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 1),
            rgba(255, 255, 255, 0)
        ); /* background-image */
    
    --gradient-to-white: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 1)
        ); /* background-image */
    
        --gradient-to-gray: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 50%,
            rgba(238, 238, 238, 1)
        ); /* background-image */
    
    --gradient-green-white:
        linear-gradient(
            to bottom,
            rgba(0, 204, 153, 1),
            rgba(0, 204, 153, .75),
            rgba(0, 204, 153, .5),
            rgba(255, 255, 255, 0)
        ); /* background-image */
    
    --simple-gradient-green-white:
        linear-gradient(
            to bottom,
            rgba(0, 204, 153, 1),
            rgba(0, 204, 153, .5),
            rgba(255, 255, 255, 0)
        ); /* background-image */
    
    --gradient-green-yellow:
        linear-gradient(
            45deg,
            rgba(0,204,153,1) 0%,
            rgba(254,255,0,1) 100%
        ); 
    
    --gradient-yellow-red:
        linear-gradient(
            to right top,
            #ff9000,
            #fe811d,
            #fa732c,
            #f56637,
            #ee5941
        );
    
    --gradient-green-yellow-red:
        linear-gradient(
            to right top,
            #00cc99,
            #56c873,
            #82c24d,
            #a9b928,
            #ceab00,
            #df9f00,
            #ef9105,
            #fe811d,
            #fc7629,
            #f86c32,
            #f4623a,
            #ee5941
        );
    
    /* Colonnes */
    --grid-cols: repeat(2,1fr);
    
}
 

Notes

Où ça se trouve ?

Dans le fichier _variables.scss à la racine du dossier scss