Cook med variabler

Har du altid drømt ikke at skulle tilpasse din CSS hver gang du genbruger en sektion med HEX kode i? Så kan du godt begynde at glæde dig.

Med denne tutorial kan du fremover skrive din CSS, som nedenstående – med farvevalg. Variablerne tager farverne fra Oplysninger.

				
					/* MEGET MERE DYNAMISK - VÆLG DEN VARIABEL DU VIL COOK MED */
.hvordan-skriver-du-det-i-css {
    background-color: var(--primaer);
    /* ELLER */
    background-color: var(--sekundaer);
    /* ELLER */
    background-color: var(--cta);
    /* ELLER */
    background-color: var(--moerk-bg);
    /* ELLER */
    background-color: var(--lys-bg);
    /* ELLER */
    background-color: var(--tekst);
}

Hvad skal du gøre?

Kopiér nedenstående kode og sæt det ind i functions.php, så virker det.

				
					add_action('wp_head', 'output_theme_color_variables', 5);

function output_theme_color_variables() {
    // Hent alle farver fra ACF options-siden
    $primaer       = get_field('primaer_', 'option')       ?: '#0d6efd';
    $sekundaer     = get_field('sekundaer_farve', 'option') ?: '#6c757d';
    $cta           = get_field('cta_farve', 'option')       ?: '#198754';     
    $moerk_bg      = get_field('mork_baggrund', 'option')   ?: '#212529';
    $lys_bg        = get_field('lys_baggrund', 'option')    ?: '#ffffff';
    $tekst         = get_field('tekst', 'option')           ?: '#212529';

    ?>
    <style id="theme-color-variables">
    :root {
        --primaer:       <?php echo esc_attr($primaer); ?>;
        --sekundaer:     <?php echo esc_attr($sekundaer); ?>;
        --cta:           <?php echo esc_attr($cta); ?>;
        --moerk-bg:      <?php echo esc_attr($moerk_bg); ?>;
        --lys-bg:        <?php echo esc_attr($lys_bg); ?>;
        --tekst:         <?php echo esc_attr($tekst); ?>;
    }
    </style>
    <?php
}