DEV Community: Lauri Lännenmäki

How to create Dark Mode using only CSS

Lauri Lännenmäki — Thu, 03 Mar 2022 22:32:55 +0000

Dark Mode and dark interfaces are not a new thing as they have been a trend for many years. When Apple released a dark mode option with the iOS 13 update back in 2019, the trend took off.

Using modern CSS, you can create dark mode with a few lines of code.

Let's dive in!

📚 Content

Dark mode is more than a trend
Dark mode is accessibility
How to set up dark mode with CSS
- Create CSS Custom Properties (variables)
- Create conditional styling
- Apply styles
Demo and final code

✨ Bonus Content

Color-scheme meta tag and CSS property
How to test your code
- Google Chrome Dev Tools
- Device OS Settings

TL;DR;

You can create dark mode using only CSS Custom Properties aka CSS variables and CSS media feature prefers-color-scheme:



/* 1. Create global variables for text and background color */
:root {
  --color-text: black;
  --color-background: white;
}

/* 2. Add conditional styling for dark mode preference */
@media (prefers-color-scheme: dark) {
  /* Re-assign previous variables */
  :root {
    --color-text: white; /* black => white */
    --color-background: black; /* white => black */
  }
}

/* 3. Assign variables to page color and background */
body {
  color: var(--color-text);
  background-color: var(--color-background);
}

That's it 🔥 View my CSS Only Dark Mode Codepen.

Dark mode is more than a trend

Dark mode is not a design trend. Dark interfaces can be easier on the eyes and reduce eye strain and fatigue. They can actually help reduce the sensation of discomfort felt when staring at websites with light backgrounds.

Dark mode also saves your device's battery life. It can reduce battery usage, especially on mobile devices.

Dark mode is accessibility

Dark mode is also an accessibility (a11y) feature. It's about respecting your users and their preferences so they can use your website the way they like.

Besides responsive media queries, modern CSS has many cool media features and prefers-color-scheme is one of them. Quote from MDN Web Docs 👇

The prefers-color-scheme CSS media feature is used to detect if the user has requested a light or dark color theme. The user might indicate this preference through an operating system setting (e.g. light or dark mode) or a user agent setting.

Users can choose if they prefer light or dark mode from their operating system settings.

(macOS)

(iOS)

With CSS, you can serve the user the theme they prefer. Media queries are used to conditionally apply styles. Media feature prefers-color-scheme is a Media Query, so you write it like you'd write your breakpoints:



/* Breakpoint */
@media (min-width: 800px) {
  /* Add conditional styles here */
}

/* Prefers Color Scheme */
/* Dark */
@media (prefers-color-scheme: dark) {
  /* Add conditional styles here */
}
/* Light */
@media (prefers-color-scheme: light) {
  /* Add conditional styles here */
}

How to set up dark mode with CSS

Create CSS Custom Properties (variables)

To setup color styles, I recommend using variables to keep your code DRY (don't repeat yourself). If you aren't familiar with CSS variables, you can read about them from MDN Web Docs.

For the sake of this tutorial we keep things simple and use black and white as our colors. And we only style our text color and background color.



/* 1. Create global variables for text and background color */
:root {
  --color-text: black;
  --color-background: white;
}

Create conditional styling

Next, let's apply conditional styling for users who prefer dark mode. By using a media query, we re-assign previous variables with new inverted values.



/* 2. Add conditional styling for dark mode preference */
@media (prefers-color-scheme: dark) {
  /* Re-assign previous variables */
  :root {
    --color-text: white; /* black => white */
    --color-background: black; /* white => black */
  }
}

Apply styles

And finally, we apply the variables to our design:



/* 3. Assign variables to page color and background */
body {
  color: var(--color-text);
  background-color: var(--color-background);
}

Demo and final code

See the final effect in action of user changing between light and dark mode in OS settings:

👇 The final code in full.



/* 1. Create global variables for text and background color */
:root {
  --color-text: black;
  --color-background: white;
}

/* 2. Add conditional styling for dark mode preference */
@media (prefers-color-scheme: dark) {
  /* Re-assign previous variables */
  :root {
    --color-text: white; /* black => white */
    --color-background: black; /* white => black */
  }
}

/* 3. Assign variables to page color and background */
body {
  color: var(--color-text);
  background-color: var(--color-background);
}

You can view the code and play with it in my Codepen.

✨ Bonus Content

Color-scheme meta tag and CSS property

The color-scheme meta tag and CSS property takes care of two important things for you. This next quote is from Google Developers web.dev and I've taken the liberty to highlight some parts of it 👇

They both make your life as a developer easier by allowing you to opt your page in to theme-specific defaults of the user agent stylesheet, such as, for example, form controls, scroll bars, as well as CSS system colors. At the same time, this feature prevents browsers from applying any transformations on their own.

By the order of values, you can determine the default appearance. Here's the syntax for both CSS and the corresponding HTML meta tag:



:root {
  color-scheme: dark light;
}

(In the CSS example, the page author prefers dark theme.)



<head>
  <meta name="color-scheme" content="light dark">
</head>

(In the HTML example, the page author prefers light theme.)

It is recommended to specify the color-scheme via the meta tag, so the browser can adopt to the preferred scheme faster.

How to test your code

Google Chrome Dev Tools

You can test your code with Google Chrome Dev Tools.

Open up your Dev Tools Inspection panel by pressing Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS).
Click on the three dots in the upper right corner => select More tools => click Rendering.
From the Rendering tab you can find the emulation for prefers-colors-scheme.

See the screenshots below 👇

Device OS settings

As shown before, you can change the appearance from you device settings. Screenshots are from macOS and iOS. You can find the same settings from Android and Windows devices.

Resources and further reading

CSS Only Dark Mode Codepen by me
Color-scheme meta tag and CSS property at web.dev
CSS Media Feature prefers-color-scheme at MDN Web Docs
CSS Custom Properties aka CSS Variables at MDN Web Docs

Thank you 🙏

I hope you found this article helpful 🔥

You can follow me on Twitter for more CSS, Design System and Figma content 💪

Figma Plugin API: How to Load and Use Fonts

Lauri Lännenmäki — Sun, 06 Feb 2022 07:45:12 +0000

Working with Figma text through the Figma Plugin API is a lot trickier than you might think. All the text inside Figma files are nodes called TextNodes. Essentially, nodes are layers in Figma. With text nodes you have to think about mixed styles, missing fonts and loading fonts.

For now, we concentrate on loading fonts.

If you wish to change the content of a TextNode, you must load its font.

TL;DR

Here's one way of loading a font and manipulating text:



// Load font via async function
const myFontLoadingFunction = async () => {
  await figma.loadFontAsync({ family: "Work Sans", style: "Bold" })
}

// Another function where we use the loaded font
const myAnotherFunction = () => {
  // Create text layer
  const myTextLayer = figma.createText()
  // Set the font
  myTextLayer.fontName = { family: "Work Sans", style: "Bold" }
  // Set text to uppercase
  myTextLayer.textCase = "UPPER"
  // Set text content
  myTextLayer.characters = "This is my title"
  // Add text layer to current page in Figma
  figma.currentPage.appendChild(myTextLayer);
}

// Use font only after the Promise is resolved
myFontLoadingFunction().then(() => {
  myAnotherFunction()
})

That's basically it. If you want to know more about this subject, just keep on reading.

Glossary

About loading fonts
How to load fonts
What can you do with fonts and text

You can find the official Figma Plugin documentation page about TextNodes here but I believe the docs could be better and that's why I wrote this blog post.

About loading fonts

The docs tells us this important thing about text and fonts:

The important thing with text is that changing the content of a text node requires its font to be loaded and that fonts are not always available. If you attempt to change, say, fontName without first loading the font for that text node, the plugin will throw an exception.

I found out that the exception will look like this in your console.

So, basically every time you make changes to text content or its properties, you have to load its font. Only when you're changing properties like fill colour or stroke, you do not need to load the fonts.

How to load fonts

TextNodes have a property called fontName which is a javascript object that contains the font family and font style. The default font is { family: "Roboto", style: "Regular" }. In our example we want to use Work Sans, Bold.

(As a sidenote: You can load any font thats already accessible in the Figma editor. You cannot load fonts from the internet.)

The documentation says that "Loading a font is done via figma.loadFontAsync(fontname)" and maybe for someone that is enough but, as a designer, I was a bit confused when I tried it and it didn't work.



// Like in the docs => figma.loadFontAsync(fontname)
figma.loadFontAsync({ family: "Work Sans", style: "Bold" })

On it's own, this code isn't enough. This is when the error appears in the console. As we dive deeper into the docs we find this about the loadFontAsync property:

(loadFontAsync) Makes a font available in the plugin for use when creating and modifying text. Calling this function is necessary to modify any property of a text node that may cause the rendered text to change, including .characters, .fontSize, .fontName, etc.

And from it's signature (found in the docs) loadFontAsync(fontName: FontName): Promise<void> we can see that it returns a Promise. So, we must enchance our code by creating an "async/await" function:



const myFontLoadingFunction = async () => {
  await figma.loadFontAsync({ family: "Work Sans", style: "Bold" })
}

After the loadFontAsync Promise is resolved, we can use the then() method that returns a new Promise and when that is a success we can do what we initially wanted.



myFontLoadingFunction().then(() => {
  // Success!

  // Add your code here to do something with the loaded font!
})

You can read more about Promises and the then() from the MDN docs.

All the code once more:



// Load font via async function
const myFontLoadingFunction = async () => {
  await figma.loadFontAsync({ family: "Work Sans", style: "Bold" })
}

// Another function where we use the loaded font
const myAnotherFunction = () => {
  // Create text layer
  const myTextLayer = figma.createText()
  // Set the font
  myTextLayer.fontName = { family: "Work Sans", style: "Bold" }
  // Set text to uppercase
  myTextLayer.textCase = "UPPER"
  // Set text content
  myTextLayer.characters = "This is my title"
  // Add text layer to current page in Figma
  figma.currentPage.appendChild(myTextLayer);
}

// Use font only after the Promise is resolved
myFontLoadingFunction().then(() => {
  myAnotherFunction()
})

What can you do with fonts and text

After you have your fonts loaded you can use the following properties and functions of a TextNode:

characters = set/write your text content
fontSize = set font size
fontName = set font family and style/weight
textStyleId = set TextStyle using TextStyle id
textCase = set text casing to uppercase etc.
textDecoration = set decoration to underline/strikethrough
letterSpacing = set letter spacing in pixels or percents
lineHeight = set line height in pixels or percents
setRangeFontSize() = set font size to characters in range
setRangeFontName() = set font to characters in range
setRangeTextCase() = set text casing to characters in range
setRangeTextDecoration() = set text decoration to characters in range
setRangeLetterSpacing() = set letter spacing to characters in range
setRangeLineHeight() = set line height to characters in range
setRangeTextStyleId() = set TextStyle to characters in range

You can check out all the TextNode properties and functions here.

Have fun developing Figma plugins 🔥 I hope you found this article helpful!

Follow me on Twitter for more Figma, CSS and Design System content 💪

How to create responsive typography using CSS — Three different methods explained

Lauri Lännenmäki — Wed, 20 Jan 2021 20:52:14 +0000

Good typography is one of the key elements of a website. Let's take a look at three different methods on how to create responsive typography using CSS.

The three methods are:

Responsive typography using only media queries
Responsive typography using a CSS custom property as a multiplier
Responsive typography using the CSS clamp() function

TL;DR: Check out the final Codepen with all the methods. Resize the viewport to see the effect.

Why should you use responsive typography?

The web is used on various screen sizes. Your site has to work on mobile, tablet, laptop, desktop and basically everything in between so there's a lot to take into consideration.

All of the method examples below are simplified as they only cover three selectors and one breakpoint.

You can use this simple HTML to try out all the methods in this tutorial:

<h1>How to create responsive typography using CSS</h1>
<p>
  Vestibulum molestie sapien eget orci pellentesque, et aliquam lectus convallis. Phasellus neque velit, ultricies ut lacus at, finibus lobortis dui. Proin eget diam elit.
</p>
<h2>Three different methods explained</h2>
<p>
  Pellentesque sagittis nisl nec rhoncus porta. Quisque luctus turpis nec turpis consequat fermentum et vitae diam.
</p>

Let's dig in!

Method 1: Responsive typography using only media queries

This is the most basic method in our list.

Simply, declare your text styles and increase the font-size on bigger screens using a breakpoint:

/* Declare text styles */
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.5em;
}
p {
  font-size: 1em;
}

/* Increase font sizes by 1.5x on bigger screens */
@media (min-width: 48rem) {
  h1 {
    font-size: 3em;
  }
  h2 {
    font-size: 2.25em;
  }
  p {
    font-size: 1.5em;
  }
}

Check out the result from this Codepen. Resize the viewport to see the effect.

Using this method is totally fine and it does the job very well.

The downside is the large amount of code you have to write. The codebase gets larger with every new selector you need to add. You have to write the styles separately for every selector in each breakpoint.

In a real world you would probably have text selectors h1, h2, h3, h4, h5, h6, p and at least two breakpoints. At that point, this code is would've already gone from 20 lines to 67 lines. That's 3.35x increase in the amount of code.

The next method will show how to decrease the code amount and make it easier to maintain!

Method 2: Responsive typography using a CSS custom property as a multiplier

CSS custom properties (variables) are super powerful. In the previous method, we increased the font sizes manually one selector at a time. Now, we'll declare a multiplier variable for the font-sizes and only increase the value of the multiplier inside a breakpoint.

Let's look at the code example in full and then break it down:

/* Declare a font size multiplier variable */
:root {
  --text-multiplier: 1;
}

/* Increase the size of the multiplier on bigger screens */
@media (min-width: 48rem) {
  :root {
    --text-multiplier: 1.5;
  }
}

/* Declare text styles using calc() function and the multiplier */
h1 {
  font-size: calc(2em * var(--text-multiplier));
}
h2 {
  font-size: calc(1.5em * var(--text-multiplier));
}
p {
  font-size: calc(1em * var(--text-multiplier));
}

Check out the result from this Codepen. Resize the viewport to see the effect.

The first step is to declare a variable that we use to control our font size later on. We set the default value to 1.

:root {
  --text-multiplier: 1;
}

The second step is to increase the multiplier value inside a breakpoint. Unlike SASS variables, CSS custom properties can be used inside media queries.

@media (min-width: 48rem) {
  :root {
    --text-multiplier: 1.5;
  }
}

The last step is to declare our font-sizes but this time we use the calc() function so we can utilise our multiplier.

h1 {
  font-size: calc(2em * var(--text-multiplier));
}
h2 {
  font-size: calc(1.5em * var(--text-multiplier));
}
p {
  font-size: calc(1em * var(--text-multiplier));
}

As you can see, we only need to declare our font sizes once. This is a huge improvement compared to the first method.

Compared to the first method, we only have 17 lines of code compared to 20. If we would add four more selectors and one breakpoint, our code would only increase from 17 lines to 34. Remember that using the first method it would require 67 lines. Almost twice as much.

The decrease of code is due to our elegant way of using a CSS custom property as a multiplier. Adding another breakpoint takes only three lines of code because we don't have to modify our font sizes at all. The code is also a lot easier to maintain and modify.

Adding breakpoints is as simple as:

/* Add more breakpoints */
@media (min-width: 64rem) {
  --text-multiplier: 1.75;
}
@media (min-width: 80rem) {
  --text-multiplier: 2.0;
}

To the user, this methods looks exactly the same as the first but the code is much better.

Next up, we'll take a look at a new CSS clamp() function.

Method 3: Responsive typography using the CSS clamp() function

The clamp() function is pretty powerful! You can set a value using three parameters: a minimum value, a preferred value and a maximum value. Basically you'll have a 3-in-1 value!

Example declaration for responsive text using the clamp() function looks like this:

font-size: clamp(2rem, 5vw, 3rem);

This allows us to create responsive typography without any media queries. With only one line of code we set the minimum value (mobile), the maximum value (desktop) and the preferred value.

The font size will become fluid as it will always be the preferred value inside the min-max range. Very powerful!

To set the responsive typography for our demo, it is as simple as this:

/* Declare text styles */
h1, h2, p {
  /* Font minimum, preferred and maximum value */
  font-size: clamp(var(--min), var(--val), var(--max));
}

/* Font size variables */
h1 {
  --min: 2em; /* minimum value */
  --val: 5vw; /* preferred value = 5% viewport width */
  --max: 3em; /* maximum value */
}
h2 {
  --min: 1.5em;   /* minimum value */
  --val: 4vw;     /* preferred value = 4% viewport width */
  --max: 2.25em;  /* maximum value */
}
p {
  --min: 1em;   /* minimum value */
  --val: 2.5vw; /* preferred value = 2.5% viewport width */
  --max: 1.5em; /* maximum value */
}

Check out the result from this Codepen. Resize the viewport to see the effect.

If you look at the code, you'll see that by using CSS custom properties together with the clamp() function we are able to declare all the text styles at the same time with only on line of code.

After that, we just set the --min, --val and --max custom properties for each selector and we are done!

CSS custom properties can be scoped inside selectors so you can use the same custom properties with multiple selectors just like we have done here with our h1, h2 and p. These custom properties will not clash together even though they have the same name.

This method takes up 18 lines of code and with four more selectors and one breakpoint it would be 38 lines. So, it's slightly larger than on the second method but we get fluid typography in return.

Note: The clamp() function is pretty new, so you should check if it has the browser support you need from caniuse.com.

Wrap up

CSS is powerful!

In many cases, there's more than one way to achieve the desired result.

If you read this far, thank you! I hope you learned something new.

Here's the final Codepen with all the methods once more. Resize the viewport to see the effect.

Thank you 🙏

I hope you found this article helpful 🔥

You can follow me on Twitter for more CSS, Design System and Figma content 💪