Posted in webdev

2:50 am, September 23, 2019

CSS Quickies: CSS Variables - Or how you create a 🌞white/🌑dark theme easily - DEV Community 👩‍💻👨‍💻

<div data-article-id="167188" id="article-body" itemprop="articleBody" readability="235.18447204969">
<h3>
<a name="what-is-css-quickes" href="#what-is-css-quickes" class="anchor">
</a>
What is CSS Quickes?
</h3>

I started to ask my beloved community on Instagram: "what CSS properties are confusing for you?"

In "CSS Quickies" I will explain one CSS property in depth. These are community requested properties. If you also confused about a CSS property, then write to me on <a href="https://www.instagram.com/lampewebdev/" style="color: inherit; text-decoration: none;" name="readabilityLink-1">Instagram</a><a href="#readabilityFootnoteLink-1" class="readability-DoNotFootnote" style="color: inherit;">[1]</a> or <a href="https://twitter.com/lampewebdev" style="color: inherit; text-decoration: none;" name="readabilityLink-2">Twitter</a><a href="#readabilityFootnoteLink-2" class="readability-DoNotFootnote" style="color: inherit;">[2]</a> or down below in the comments! I answer all questions.

I'm also live streaming while coding on <a href="https://www.twitch.tv/lampewebdev/" style="color: inherit; text-decoration: none;" name="readabilityLink-3">twitch.tv</a><a href="#readabilityFootnoteLink-3" class="readability-DoNotFootnote" style="color: inherit;">[3]</a> if you want to spend some fun time or you can ask me any question!

<h3>
<a name="lets-talk-about-raw-custom-properties-endraw-aka-raw-css-variables-endraw-" href="#lets-talk-about-raw-custom-properties-endraw-aka-raw-css-variables-endraw-" class="anchor">
</a>
Let's talk about <code>Custom properties</code> aka <code>CSS Variables</code>.
</h3>

Finally! If you ever have worked with CSS and wanted to keep your design consistent? Or was it more like at some pages, your website had different padding, margin or colors?

Maybe you wanted to implement a dark theme? It was possible, but now it has become easier!

Of course, if you have used LESS or SASS, then you know variables, and now they are finally supported natively. 😁

Let's have a look at it!

<h4>
<a name="defining-a-css-variable" href="#defining-a-css-variable" class="anchor">
</a>
Defining a CSS variable
</h4>

You define a CSS variable with prefixing a CSS property with <code>--</code>. Let's look at some examples.

<div class="highlight" readability="11"><pre class="highlight css"><code>:root{
--example-color: #ccc;
--example-align: left;
--example-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
</code></pre></div>

Your first question is: "What is that ':root' pseudo-class?". Good question! The <code>:root</code> pseudo-class is as you would use the <code>html</code> selector except that the specificity is higher of the ':root' pseudo-class. This means that if you set properties in the <code>:root</code> pseudo-class it will win over the <code>html</code> selector.

Okay, the rest is pretty simple. The custom property <code>--example-color</code> has the value of <code>#ccc</code>. When we use the custom property, for example, on the <code>background-color</code> property, the background of that element will be a light gray. Cool right?

You can give the custom property, aka CSS variable every value you could give any other property in CSS. It is okay to use <code>left</code> for example or <code>10px</code> and so on.
<h4>
<a name="using-css-variables" href="#using-css-variables" class="anchor">
</a>
Using CSS variables
</h4>

Now that we know how to set CSS variables, we need to learn how to use them!

For this, we need to learn the <code>var()</code> function. The <code>var()</code> can have two arguments. The first argument needs to be a custom property. If the custom property is not valid, you want to have a fallback value. To achieve this, you simply need to set the second argument of the <code>var()</code> function. Let's look at an example.

<div class="highlight" readability="8"><pre class="highlight css"><code>:root{
--example-color: #ccc;
}

.someElement {
background-color: var(--example-color, #d1d1d1);
}
</code></pre></div>

This should be now pretty straightforward for you to understand. We are setting the <code>--example-color</code> to <code>#ccc</code> and then we are using it in <code>.someElement</code> to set the background color. If something goes wrong and our <code>--example-color</code> is not valid, we have a fallback value of <code>#d1d1d1</code>.

What happens if you don't set a fallback value and your custom variable is invalid? The browser then will act as if this property was not specified and do its regular job.

<h4>
<a name="tips-and-tricks" href="#tips-and-tricks" class="anchor">
</a>
Tips and tricks
</h4>

<h5>
<a name="multiple-fallback-values" href="#multiple-fallback-values" class="anchor">
</a>
Multiple fallback values
</h5>

What if you want to have multiple fallback values? So you would think you could do the following:

<div class="highlight" readability="9"><pre class="highlight css"><code>.someElement {
background-color: var(--first-color, --second-color, white);
}
</code></pre></div>

This will not work. After the first comma <code>var()</code> treats everything even the commas as a value. The browser would change this into <code>background-color: --second-color, white;</code>. This is not what we want.

To have multiple values, we can simply call <code>var()</code> inside a <code>var()</code>. Here comes an example:

<div class="highlight" readability="9"><pre class="highlight css"><code>.someElement {
background-color: var(--first-color, var(--second-color, white));
}
</code></pre></div>

Now this would produce our desired outcome. When both <code>--first-color</code> and <code>--second-color</code> are invalid then the browser will set the background to <code>white</code>.

<h5>
<a name="what-if-my-fallback-value-needs-a-comma" href="#what-if-my-fallback-value-needs-a-comma" class="anchor">
</a>
What if my fallback value needs a comma?
</h5>

What to do if for example, you want to set a <code>font-family</code> in in the fallback value and you need to specify more then one font? Looking back at the tip before this should be now straight forward. We simply write it with the commas. Example time:

<div class="highlight" readability="10"><pre class="highlight css"><code>.someElement {
font-family: var(--main-font, "lucida grande" , tahoma, Arial);
}
</code></pre></div>

Here we can see the after the first comma the <code>var()</code> function treats everything like one value.

<h5>
<a name="setting-and-getting-custom-properties-in-javascript" href="#setting-and-getting-custom-properties-in-javascript" class="anchor">
</a>
Setting and getting custom properties in Javascript
</h5>

In more complex apps and websites, you will javascript for state management and rendering. You also can get and set custom properties with javascript. Here is how you can do it:

<div class="highlight" readability="10"><pre class="highlight javascript"><code> const element = document.querySelector('.someElement');
// Get the custom propety
element.style.getPropertyValue("--first-color");
// Set a custom propety
element.style.setProperty("--my-color", "#ccc");
</code></pre></div>

We can get and set the custom properties like any other property. Isn't that cool?

<h4>
<a name="making-a-theme-switcher-with-custom-variables" href="#making-a-theme-switcher-with-custom-variables" class="anchor">
</a>
Making a theme switcher with custom variables
</h4>

Let's first have a look at what we will do here:

<h5>
<a name="the-html-markup" href="#the-html-markup" class="anchor">
</a>
The HTML markup
</h5>

Really nothing special here. We will use CSS <code>grid</code> to center the content that's why we have a <code>.grid</code> class on our first element the <code>.content</code> and <code>.demo</code> Classes are just for styling. The two crucial classes here are <code>.theme-container</code> and <code>.theme.switcher</code>.
<h5>
<a name="the-javascript-code" href="#the-javascript-code" class="anchor">
</a>
The Javascript code
</h5>

<div class="highlight" readability="11"><pre class="highlight javascript"><code>const checkbox = document.querySelector(".theme-switcher");

checkbox.addEventListener("change", function() {
const themeContainer = document.querySelector(".theme-container");
if (themeContainer && this.checked) {
themeContainer.classList.add("light");
} else {
themeContainer.classList.remove("light");
}
});
</code></pre></div>

First we are selecting our <code>.theme-switcher</code> input and the <code>.theme-container</code> element. Then we are adding an event listener that listens if a change happens. This means that every time you click on the input, the callback for that event listener will run. In the <code>if</code> clause we are checking if there is a <code>.themeContainer</code> and if the checkbox input is checked. When this check is true, we are adding the <code>.light</code> class to the <code>.themeContainer</code> and if it is false, we are removing it.

Why are we removing and adding the <code>.light</code> Class? We will answer this now.
<h5>
<a name="the-css-code" href="#the-css-code" class="anchor">
</a>
The CSS code
</h5>

Since this code is lengthy, I will show it to you step by step!

<div class="highlight" readability="7"><pre class="highlight css"><code>.grid {
display: grid;
justify-items: center;
align-content: center;
height: 100vh;
width: 100vw;
}
</code></pre></div>

Lets first center our content. We are doing this with css <code>grid</code>. We will cover the <code>grid</code> feature in another CSS quickies!

<div class="highlight" readability="29"><pre class="highlight plaintext"><code>:root {
/ light /
--c-light-background: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);
--c-light-checkbox: #fce100;
/ dark /
--c-dark-background:linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
--c-dark-checkbox: #757575;
}
</code></pre></div>

This is a lot of code and numbers but actually we are not doing much here. We are preparing our custom properties to be used for our theme. <code>--c-dark-</code> and <code>--c-light-</code> is what I have chosen to prefix my custom properties. We have defined a light and a dark theme here. For our example we just need the <code>checkbox</code> color and the <code>background</code> property which is a gradient in our demo.

<div class="highlight" readability="11"><pre class="highlight css"><code>.theme-container {
--c-background: var(--c-dark-background);
--c-checkbox: var(--c-dark-checkbox);
background: var(--c-background);
background-blend-mode: multiply,multiply;
transition: 0.4s;
}
.theme-container.light {
--c-background: var(--c-light-background);
--c-checkbox: var(--c-light-checkbox);
background: var(--c-background);
}
</code></pre></div>

Here comes an integral part of the code. We now see why we named the <code>.theme-container</code> How we did. It is our entrance to have now global custom variables. We don't want to use the specific custom variables. What we want is to use global custom variables. This is why we are setting <code>--c-background</code>. From now on, we will only use our global custom variables. Then we are setting the <code>background</code>.

<div class="highlight" readability="9"><pre class="highlight css"><code>.demo {
font-size: 32px;
}

/ The switch - the box around the slider /
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

/ Hide default HTML checkbox /
.switch .theme-switcher {
opacity: 0;
width: 0;
height: 0;
}
</code></pre></div>

This is just some boilerplate code to set our style. In the <code>.demo</code> selector, we are setting the <code>font-size</code>. This is the size of our symbols for the toggle. In the <code>.switch</code> selector the <code>height</code> and <code>width</code> is how long and wide the element behind our toggle symbol is.

<div class="highlight" readability="10"><pre class="highlight css"><code>/ The slider /
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--c-checkbox);
transition: 0.4s;
}

.slider:before {
position: absolute;
content: "🌑";
height: 0px;
width: 0px;
left: -10px;
top: 16px;
line-height: 0px;
transition: 0.4s;
}

.theme-switcher:checked + .slider:before {
left: 4px;
content: "🌞";
transform: translateX(26px);
}
</code></pre></div>

Here we can finally see our custom properties in action besides using them directly in the <code>.theme.container</code> and again a lot of boilerplate code. As you can see, the toggle symbols are simple Unicode symbols. This is why the toggle will look different on every OS and mobile phone vendor. You have to keep this in mind. Important to know here is that in the <code>.slider:before</code> Selector, we are moving our symbol around with the <code>left</code> and <code>top</code> properties. We are doing that also in the <code>.theme-switcher:checked + .slider:before</code> but only with the <code>left</code> property.

<div class="highlight" readability="7"><pre class="highlight css"><code>/ Rounded sliders /
.slider.round {
border-radius: 34px;
}
</code></pre></div>

This again is just for styling. To make our switch rounded on the corners.

That is it! We now have a theme switcher which is extendable. ✌😀

It would help me if you could do the following for me! Go to <a href="https://twitch.tv/lampewebdev" style="color: inherit; text-decoration: none;" name="readabilityLink-4">Twitch</a><a href="#readabilityFootnoteLink-4" class="readability-DoNotFootnote" style="color: inherit;">[4]</a> and leave a follow for me! If just a few people would do that, then this would mean the world to me! ❤❤❤😊

👋Say Hallo! <a href="https://www.instagram.com/lampewebdev/" style="color: inherit; text-decoration: none;" name="readabilityLink-5">Instagram</a> | <a href="https://twitter.com/lampewebdev" style="color: inherit; text-decoration: none;" name="readabilityLink-6">Twitter</a> | <a href="https://www.linkedin.com/in/michael-lazarski-25725a87" style="color: inherit; text-decoration: none;" name="readabilityLink-7">LinkedIn</a> | <a href="https://medium.com/@lampewebdevelopment" style="color: inherit; text-decoration: none;" name="readabilityLink-8">Medium</a> | <a href="https://dev.to/twitchlivestreams/lampewebdev" style="color: inherit; text-decoration: none;" name="readabilityLink-9">Twitch</a> | <a href="https://www.youtube.com/channel/UCYCe4Cnracnq91J0CgoyKAQ" style="color: inherit; text-decoration: none;" name="readabilityLink-10">YouTube</a><a href="#readabilityFootnoteLink-5" class="readability-DoNotFootnote" style="color: inherit;">[5]</a><a href="#readabilityFootnoteLink-6" class="readability-DoNotFootnote" style="color: inherit;">[6]</a><a href="#readabilityFootnoteLink-7" class="readability-DoNotFootnote" style="color: inherit;">[7]</a><a href="#readabilityFootnoteLink-8" class="readability-DoNotFootnote" style="color: inherit;">[8]</a><a href="#readabilityFootnoteLink-9" class="readability-DoNotFootnote" style="color: inherit;">[9]</a><a href="#readabilityFootnoteLink-10" class="readability-DoNotFootnote" style="color: inherit;">[10]</a>

</div><div id="readability-footnotes"><h3>References</h3><ol id="readability-footnotes-list"><li><a href="#readabilityLink-1" title="Jump to Link in Article">^</a> <a href="https://www.instagram.com/lampewebdev/" name="readabilityFootnoteLink-1">Instagram</a> (www.instagram.com)</li><li><a href="#readabilityLink-2" title="Jump to Link in Article">^</a> <a href="https://twitter.com/lampewebdev" name="readabilityFootnoteLink-2">Twitter</a> (twitter.com)</li><li><a href="#readabilityLink-3" title="Jump to Link in Article">^</a> <a href="https://www.twitch.tv/lampewebdev/" name="readabilityFootnoteLink-3">twitch.tv</a> (www.twitch.tv)</li><li><a href="#readabilityLink-4" title="Jump to Link in Article">^</a> <a href="https://twitch.tv/lampewebdev" name="readabilityFootnoteLink-4">Twitch</a> (twitch.tv)</li><li><a href="#readabilityLink-5" title="Jump to Link in Article">^</a> <a href="https://www.instagram.com/lampewebdev/" name="readabilityFootnoteLink-5">Instagram</a> (www.instagram.com)</li><li><a href="#readabilityLink-6" title="Jump to Link in Article">^</a> <a href="https://twitter.com/lampewebdev" name="readabilityFootnoteLink-6">Twitter</a> (twitter.com)</li><li><a href="#readabilityLink-7" title="Jump to Link in Article">^</a> <a href="https://www.linkedin.com/in/michael-lazarski-25725a87" name="readabilityFootnoteLink-7">LinkedIn</a> (www.linkedin.com)</li><li><a href="#readabilityLink-8" title="Jump to Link in Article">^</a> <a href="https://medium.com/@lampewebdevelopment" name="readabilityFootnoteLink-8">Medium</a> (medium.com)</li><li><a href="#readabilityLink-9" title="Jump to Link in Article">^</a> <a href="https://dev.to/twitchlivestreams/lampewebdev" name="readabilityFootnoteLink-9">Twitch</a> (dev.to)</li><li><a href="#readabilityLink-10" title="Jump to Link in Article">^</a> <a href="https://www.youtube.com/channel/UCYCe4Cnracnq91J0CgoyKAQ" name="readabilityFootnoteLink-10">YouTube</a> (www.youtube.com)</li></ol></div>

keywords software development, inclusive, community,engineering,webdev, css, javascript, beginners

No Items Found.

Add Comment

Other Items in webdev

Hugo Font Awesome Icons [ Icons ] - CSS Bundle Daily Dev Tips CSS Background Patterns by MagicPattern GitHub - ganlanyuan/tiny-slider: Vanilla javascript slider for all purposes. GitHub - jonasstrehle/supercookie: ⚠️ Browser fingerprinting via favicon! URL-encoder for SVG Bootstrap Icons · Official open source SVG icon library for Bootstrap GitHub - kognise/water.css: A drop-in collection of CSS styles to make simple websites just a little nicer Toggle light and dark themes in Bootstrap - DEV Deploy your Publish website for free on GitHub Pages - DEV Bootstrap · The most popular HTML, CSS, and JS library in the world. GitHub - diegocard/awesome-html5: A curated list of awesome HTML5 resources Fixing PHP SQLite database is locked warning - Unable to execute statement: database is locked [ php ] - KruXoR openstreetmap.org 50 Developer tools to make your life a little easier https://www.mrlacey.com/2020/07/youve-only-added-two-lines-why-did-that.html?m=1 GitHub - ForEvolve/bootstrap-dark: Bootstrap 4 dark theme that supports togging dark/light themes as well. There is no fluff, it changes the color of Bootstrap and that's it, no new thing to learn or unlearn, just Bootstrap, but Dark! Responsive Web Design Online Testing - isResponsive Trianglify.io · Low Poly Pattern Generator Grid.js - Advanced table plugin HEAD - A free guide to <head> elements Roots | Modern WordPress Development Tools A Local Dev Tool For Every Project | Lando new.css Synchronized responsive testing, development, inspection | Vanamco Gold Price Charts Widgets | GoldBroker.com Trianglify.io · Low Poly Pattern Generator Special tags that Google understands - Search Console Help 404 Error Page Codepen ScrollMagic ♥ Demo AOS - Animate on scroll library Font Awesome v4.7.0 - Icon Search Tool Carbon Offers — LowEndTalk Featherlight – The ultra slim jQuery lightbox. Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs HEAD - A free guide to <head> elements API Blueprint | API Blueprint Filtering Data Client-Side: Comparing CSS, jQuery, and React | CSS-Tricks CSS Quickies: CSS Variables - Or how you create a 🌞white/🌑dark theme easily - DEV Community 👩‍💻👨‍💻 Responsive Slider Timeline Colormind - the AI powered color palette generator Get Waves – Create SVG waves for your next design Nuxt.js - The Vue.js Framework CodeSandbox: Online Code Editor Tailored for Web Application Development Hover.css - A collection of CSS3 powered hover effects Live.js - One script closer to Designing in the Browser Color this sofa! – SVG + Blend Mode trick You Might Not Need jQuery

Other Categories in Linx

ai apps articles cloud apps code coffee factorio games hardware health iphone lists minecraft music pi security stock images stock images tech vpn web dev web developer websites windows ai android api apps articles asp audio australia bio bitcoin blog books bootstrap career charts code editors codepens cooking css css animations daily linx data day trips design design elements drawing education emulators entrepreneur factorio fitness flowcharts fonts foobar2000 themes games hardware headphones health home automation html templates icons itunes javascript jquery js linux mac maps media mhx minecraft misc money motivation music network news nginx os osrs pantheon parenting phone phones php pi products programming radio random reading reddit rs3 runescape seo shopping sqlite stock images storage tax tech technology text formatting tools trains video video editor videos wallpapers weather web web design web development web sites webdev windows wine wordpress workout youtube

Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Latest News

## 🚀 AI Giants Hit Bullseye: Anthropic & OpenAI Achieve Product-Market Fit Anthropic and OpenAI have reached a significant milestone, finding product-market fit with their AI technologies, which means their products effectively meet the needs of their customers, driving growth and adoption. This achievement showcases the practical value of their innovations, enabling businesses and individuals to leverage AI for enhanced productivity and efficiency. With this alignment of product and market needs, these companies are poised to transform industries and shape the future of technology.

CSS Quickies: CSS Variables - Or how you create a 🌞white/🌑dark theme easily - DEV Community 👩‍💻👨‍💻

Add Comment

Other Items in webdev

Other Categories in Linx

Search Linx

Latest from Linx

Welcome

Random Quote

Latest News

Latest Articles

Code

Links

Quick Links

Quick Links

Sections