Testing CSS Variables - ready for SWATCHES

HTML & CSS
1

I was curious to know how to incorporate CSS SWATCHES into my web pages. The idea is to set the CSS Variables to CSS SWATCHES and use the CSS Var variables in the CSS file.

I knocked up the following and set the CSS SWATCH Colours like the following:

    :root {
          --gff: RED;
          --dad: ORANGE;
          --mum: PINK;
          --son: LIGHTPINK;
          --bby: ROSE;
        }

Variable are abreviations of grandfather, father mother, son and baby which no doubt could be improved :slight_smile:

ONLINE DEMO

PHP Source flle that generates the web pages:

<?php declare(strict_types=1);
$title    = 'JB Testing CSS Variables';
$swatch   = getSwatch(); // function below
$heading  = getHeading($title, $swatch); // function below
$source   = highlight_file(__FILE__, TRUE);

# RENDER STARTS HERE >>>>>>>>>>>>>>>>
echo $header = <<< ____EOT
  $heading        
  <body>
    <header>
      <h1> $title </h1>
      <nav>
        <a href="?">             Default </a>
        <a href="?swatch=red">   Red </a>
        <a href="?swatch=blue">  Blue </a>
        <a href="?swatch=green"> Green </a>
      </nav>
    </header>  
____EOT;

  echo $MAIN = <<< ____EOT
    <main>
      <section>
        <h2> Just Testing Folks </h2>
        
        <p> 
          &lt;p&gt; Goes here &lt;/p&gt; 
        </p>  

        <dl> 
          <dt>
            &lt;dl&gt; Goes here &lt;/dl&gt; 
          </dt>
          <dd>
            &lt;dd&gt; Goes here &lt;/dd&gt; 
          </dd>  
        </dl>  

        <div> 
          &lt;div&gt; Goes here &lt;/div&gt; 
        </div>  

        <pre> 
          &lt;pre&gt; Goes here &lt;/pre&gt; 
        </pre>  
      </section>

      <section>
        <h2> Source: </h2>

        <div> 
          $source 
        </div>    
      </section>
  </main>
  
  <footer>
    &lt;footer&gt; Goes here &lt;/footer&gt; 
  </footer>  
____EOT;

  require'/var/www/footer-side.php'; 

echo'</body></html>';
# RENDER ENDS HERE >>>>>>>>>>>>>>>>>>>>>>>

// ONLY FUNCTIONS BELOW

# ======================================
function getHeading(string $title, string $swatch)
:string
{
  $result = <<< ______TMP
  <!DOCTYPE HTML><html lang = 'en-GB'>
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style> $swatch </style>
  <link type="text/css" href="style.css" media="screen" rel="stylesheet">
  <link rel="shortcut icon" href="./favicon.ico">
  <title> $title </title>
  </head>
______TMP;

  return $result;
}//

# ======================================
function getSwatch()
:string 
{
  $clrs = isset($_GET['swatch']) ? $_GET['swatch'] : 'DEFAULT';
  switch( strtoupper($clrs) ):
    case "RED" :
      $swatch = <<< ____EOT
        :root {
          --gff: RED;
          --dad: ORANGE;
          --mum: PINK;
          --son: LIGHTPINK;
          --bby: ROSE;
        }
____EOT;
    break;

    case "BLUE" :
      $swatch = <<< ____EOT
        :root {
          --gff: BLUE;
          --dad: LIGHTBLUE;
          --mum: AQUA;
          --son: AQUA;
          --bby: SKYBLUE;
        }
____EOT;
    break;

    case "GREEN" :
      $swatch = <<< ____EOT
        :root {
          --gff: GREEN;
          --dad: LIMEGREEN;
          --mum: LIGHTGREEN;
          --son: PALEGREEN;
          --bby: LAWNGREEN;
        }
____EOT;
    break;

    default:
      $swatch = <<< ____EOT
        :root {
          --gff: GRAY;
          --dad: SLATEGRAY;
          --mum: LIGHTGRAY;
          --son: DARKGRAY;
          --bby: SLATEGRAY;
        }
____EOT;
  endswitch; // ($clrs):

  return $swatch;
}//

I’m curious to know if this could be improve with JavaScript.

Edit:

Renamed and modified original file and added source,php instead of complicatiing the original web page.

2

What would you want it to do that it doesn’t do now? From what I can see, it seems to behave well enough. What do you think JavaScript might help with?

3

Some web developers are not familiar with PHP and may prefer switching SWATCHES using JavaScript rather than calling the same web page with get parameters .

4

You could do some localStorage stuff to set/read the swatch between page loads, but at the end of the day, i’d probably still do something like…

    #swatch[value="default"] + body {
          --gff: RED;
          --dad: ORANGE;
          --mum: PINK;
          --son: LIGHTPINK;
          --bby: ROSE;
        }
    #swatch[value="red"] + body {
  ....etc etc...

and then just

<input type='hidden' name='swatch' id='swatch' value="default">
<body>

on-the-fly changes then become changing #swatch’s value.
Maybe i don’t understand the power potential of CSS variables, but they sort of feel like PHP’s include. Just there to save typing and find/replacing time.

(PS: ROSE is not a standard web color. Did you perhaps mean MistyRose?)

5

Additional: Javascript can change the value of a CSS variable.

document.documentElement.style.setProperty('--gff',"BLUE");
(:root = document.documentElement);

6

I used to be a big fan of CSS TLA, Three Letter Acronyms used to declare parameters once only. This drastically reduced the CSS file size. Using CSS variables is similar and the demo shows how easy it is to toggle SWATCHES.

I have very little JavaScript knowledge and do not know how to create the required script. I find PHP is adequate most of the time especially since the script is generated server side by a fast processor. I avoid using JavaScript because it is bloated which affects rendering speed.

I’ve vague memories of a website that displayed demo pages for SWATCHES and unfortunately my searches have been fruitless. If anybody could post more aesthetic script I will be glad to upload the version.

7

I suppose JS would allow you to change the colour scheme without a page refresh.

I may be missing something, but it seems to me to be missing the point (or potential power) of CSS variables.
Like either most of the PHP or the CSS variables are redundant, since you are using PHP to spit out a different version of CSS dependant on a query string, you don’t really need CSS varialbes, just throw in a different CSS for each theme.
On the other hand, you could rely on CSS variables and do away with most of the PHP by simply changing the class on the body.

<body class="<?= htmlspecialchars($_GET['swatch'])?>">

Then static CSS using CSS variables to colour/style according to the parent class.

My point being, you don’t need (much) PHP pre-processing if you are utilising CSS variables to their potential.
Likewise, you don’t need any CSS variables if you are using PHP to pre-process your CSS output.

Getting back to the JS question, it would not be too difficult to make JS change the body class, then use CSS variables as I describe. You won’t need any PHP.

2 Likes
8

To make it clear, with the swatch name as a class on the body (via either PHP or JS) this is all you need:-

:root {    /* Default */
  --gff: GRAY;
  --dad: SLATEGRAY;
  --mum: LIGHTGRAY;
  --son: DARKGRAY;
  --bby: SLATEGRAY;
}

.red {
  --gff: RED;
  --dad: ORANGE;
  --mum: PINK;
  --son: LIGHTPINK;
  --bby: ROSE;
}

.blue {
  --gff: BLUE;
  --dad: LIGHTBLUE;
  --mum: AQUA;
  --son: AQUA;
  --bby: SKYBLUE;
}

.green {
  --gff: GREEN;
  --dad: LIMEGREEN;
  --mum: LIGHTGREEN;
  --son: PALEGREEN;
  --bby: LAWNGREEN;
}

/* The Rest of your CSS follows */

Then again, with the class on the body, it would be easy enough to do without CSS variables.

This topic reminded me of a CSS example I saw several years ago where the page style could be switched without refresh, with no JS, no PHP, no CSS variables. Just a pseudo class and the cascading nature of CSS.
https://htmldog.com/articles/drstrangeswitcher/example/#php

2 Likes
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.