How to create a light and dark mode switch for your site

How to create a light and dark mode switch for your site

Published Date
Oct 1, 2021
Tags
Design Tips
Author
Yusuf Giftworks

Introduction

In this post, we will learn how to create keyboard shortcuts that will operate as a light/dark mode switch for your Notion-Super site. This post is for Notion-Super users, but is theoretically applicable to any kind of website.

Note that this method only works on desktop, where visitors have access to their keyboard. We'll learn how to create a visible switch that works on both desktop and mobile in a future post.

If you'd like to try a live demo, visit this site on desktop, yusuf.is/who and press 'L' and 'D' on your keyboard.

Step 1

CSS script

Head over to the code section of your site on Super. This could be the global site code or the individual page code, depending on where you want the theme switch to be.

Select your situation,

  • If you do not have your own light and dark themes CSS code yet, you can simply copy the code below and paste it to the CSS code section of your site.
  • Code
    • The code below will render your site in light mode by default. If you'd like to default it to dark mode, simply cut the " , :root " in the " [data-theme="light"], :root " and paste it to " [data-theme="dark"] ".
    [data-theme="light"], :root {
    /* text, headings */
      --color-text-default: rgb(55, 53, 47);
    /* media caption */
      --color-text-default-light: rgba(55, 53, 47, 0.6);
    /* text, quote, toggle, callout colors */
      --color-text-gray: rgb(155, 154, 151);
      --color-text-brown: rgb(100, 71, 58);
      --color-text-orange: rgb(217, 115, 13);
      --color-text-yellow: rgb(223, 171, 1);
      --color-text-green: rgb(15, 123, 108);
      --color-text-blue: rgb(11, 110, 153);
      --color-text-purple: rgb(105, 64, 165);
      --color-text-pink: rgb(173, 26, 114);
      --color-text-red: rgb(224, 62, 62);
    /* text, quote, toggle background colors */
      --color-bg-default: rgb(255, 255, 255);
      --color-bg-gray: rgb(235, 236, 237);
      --color-bg-brown: rgb(233, 229, 227);
      --color-bg-orange: rgb(250, 235, 221);
      --color-bg-yellow: rgb(251, 243, 219);
      --color-bg-green: rgb(221, 237, 234);
      --color-bg-blue: rgb(221, 235, 241);
      --color-bg-purple: rgb(234, 228, 242);
      --color-bg-pink: rgb(244, 223, 235);
      --color-bg-red: rgb(251, 228, 228);
    /* callout background colors */
      --color-bg-gray-light: rgba(235, 236, 237, 0.3);
      --color-bg-brown-light: rgba(233, 229, 227, 0.3);
      --color-bg-orange-light: rgba(250, 235, 221, 0.3);
      --color-bg-yellow-light: rgba(251, 243, 219, 0.3);
      --color-bg-green-light: rgba(221, 237, 234, 0.3);
      --color-bg-blue-light: rgba(221, 235, 241, 0.3);
      --color-bg-purple-light: rgba(234, 228, 242, 0.3);
      --color-bg-pink-light: rgba(244, 223, 235, 0.3);
      --color-bg-red-light: rgba(251, 228, 228, 0.3);
    /* tags (multi-select, select) colors */
      --color-pill-default: rgba(206, 205, 202, 0.5);
      --color-pill-gray: rgba(155, 154, 151, 0.4);
      --color-pill-brown: rgba(140, 46, 0, 0.2);
      --color-pill-orange: rgba(245, 93, 0, 0.2);
      --color-pill-yellow: rgba(233, 168, 0, 0.2);
      --color-pill-green: rgba(0, 135, 107, 0.2);
      --color-pill-blue: rgba(0, 120, 223, 0.2);
      --color-pill-purple: rgba(103, 36, 222, 0.2);
      --color-pill-pink: rgba(221, 0, 129, 0.2);
      --color-pill-red: rgba(255, 0, 26, 0.2);
    /* gallery, board cards color when hovered */
      --color-ui-hover-bg: rgba(55, 53, 47, 0.08);
      --color-ui-hover-bg-light: rgba(55, 53, 47, 0.03);
    /* gallery, board cards background color */
      --color-card-bg: rgb(255, 255, 255);
      --color-accent-bg: rgb(46, 170, 220);
    /* horizontal divider, card border */
      --color-border-default: rgba(235, 236, 237, 0.8);
      --color-border-dark: rgba(55, 53, 47, 0.16);
    }
    
    [data-theme="dark"] {
    /* text, headings */
      --color-text-default: rgba(255,255,255,0.9);
    /* media caption */
      --color-text-default-light: rgba(255, 255, 255, 0.9);
    /* text, quote, toggle, callout colors */
      --color-text-gray: rgba(151, 154, 155, 0.95);
      --color-text-brown: #937264;
      --color-text-orange: #FFA344;
      --color-text-yellow: #FFDC49;
      --color-text-green: #4DAB9A;
      --color-text-blue: #529CCA;
      --color-text-purple: #9A6DD7;
      --color-text-pink: #E255A1;
      --color-text-red: #FF7369;
    /* text, quote, toggle background colors */
      --color-bg-default: #2f3437;
      --color-bg-gray: #454B4E;
      --color-bg-brown: #434040;
      --color-bg-orange: #594A3A;
      --color-bg-yellow: #59563B;
      --color-bg-green: #354C4B;
      --color-bg-blue: #364954;
      --color-bg-purple: #443F57;
      --color-bg-pink: #533B4C;
      --color-bg-red: #594141;
    /* callout background colors */
      --color-bg-gray-light: rgba(69, 75, 78, 0.3);
      --color-bg-brown-light: rgba(67, 64, 64, 0.3);
      --color-bg-orange-light: rgba(89, 74, 58, 0.3);
      --color-bg-yellow-light: rgba(89, 86, 59, 0.3);
      --color-bg-green-light: rgba(53, 76, 75, 0.3);
      --color-bg-blue-light: rgba(120, 162, 187, 0.3);
      --color-bg-purple-light: rgba(68, 63, 87, 0.3);
      --color-bg-pink-light: rgba(83, 59, 76, 0.3);
      --color-bg-red-light: rgba(89, 65, 65, 0.3);
    /* tags (multi-select, select) colors */
      --color-pill-default: rgba(206, 205, 202, 0.5);
      --color-pill-gray: rgba(151,154,155,0.5);
      --color-pill-brown: rgba(147,114,100,0.5);
      --color-pill-orange: rgba(255,163,68,0.5);
      --color-pill-yellow: rgba(255,220,73,0.5);
      --color-pill-green: rgba(77,171,154,0.5);
      --color-pill-blue: rgba(82,156,202,0.5);
      --color-pill-purple: rgba(154,109,215,0.5);
      --color-pill-pink: rgba(226,85,161,0.5);
      --color-pill-red: rgba(255,115,105,0.5);
    /* gallery, board cards color when hovered */
      --color-ui-hover-bg: rgb(71,76,80);
      --color-ui-hover-bg-light: rgb(71,76,80);
    /* gallery, board cards background color */
      --color-card-bg: #2f3437;
      --color-accent-bg: #364954;
    /* horizontal divider, card border */
      --color-border-default: rgb(69, 75, 78);
      --color-border-dark: rgb(69, 75, 78);
    }
  • If you already have your own custom light and dark themes CSS code, I'll explain how to integrate it.
  • Explanation
    • Copy the code below and insert your light and dark themes accordingly.
    • The code below will render your site in light mode by default. If you'd like to default it to dark mode, simply cut the " , :root " in the " [data-theme="light"], :root " and paste it to " [data-theme="dark"] ".
    [data-theme="light"], :root {
    	/* add your light theme CSS code here */
    }
    
    [data-theme="dark"] {
    	/* add your dark theme CSS code here */
    }
  • If you already have a custom CSS code, but you do not have any light or dark theme CSS code, copy the code below and paste it at the top of your CSS code.
  • Code
    • The code below will render your site in light mode by default. If you'd like to default it to dark mode, simply cut the " , :root " in the " [data-theme="light"], :root " and paste it to " [data-theme="dark"] ".
    [data-theme="light"], :root {
    /* text, headings */
      --color-text-default: rgb(55, 53, 47);
    /* media caption */
      --color-text-default-light: rgba(55, 53, 47, 0.6);
    /* text, quote, toggle, callout colors */
      --color-text-gray: rgb(155, 154, 151);
      --color-text-brown: rgb(100, 71, 58);
      --color-text-orange: rgb(217, 115, 13);
      --color-text-yellow: rgb(223, 171, 1);
      --color-text-green: rgb(15, 123, 108);
      --color-text-blue: rgb(11, 110, 153);
      --color-text-purple: rgb(105, 64, 165);
      --color-text-pink: rgb(173, 26, 114);
      --color-text-red: rgb(224, 62, 62);
    /* text, quote, toggle background colors */
      --color-bg-default: rgb(255, 255, 255);
      --color-bg-gray: rgb(235, 236, 237);
      --color-bg-brown: rgb(233, 229, 227);
      --color-bg-orange: rgb(250, 235, 221);
      --color-bg-yellow: rgb(251, 243, 219);
      --color-bg-green: rgb(221, 237, 234);
      --color-bg-blue: rgb(221, 235, 241);
      --color-bg-purple: rgb(234, 228, 242);
      --color-bg-pink: rgb(244, 223, 235);
      --color-bg-red: rgb(251, 228, 228);
    /* callout background colors */
      --color-bg-gray-light: rgba(235, 236, 237, 0.3);
      --color-bg-brown-light: rgba(233, 229, 227, 0.3);
      --color-bg-orange-light: rgba(250, 235, 221, 0.3);
      --color-bg-yellow-light: rgba(251, 243, 219, 0.3);
      --color-bg-green-light: rgba(221, 237, 234, 0.3);
      --color-bg-blue-light: rgba(221, 235, 241, 0.3);
      --color-bg-purple-light: rgba(234, 228, 242, 0.3);
      --color-bg-pink-light: rgba(244, 223, 235, 0.3);
      --color-bg-red-light: rgba(251, 228, 228, 0.3);
    /* tags (multi-select, select) colors */
      --color-pill-default: rgba(206, 205, 202, 0.5);
      --color-pill-gray: rgba(155, 154, 151, 0.4);
      --color-pill-brown: rgba(140, 46, 0, 0.2);
      --color-pill-orange: rgba(245, 93, 0, 0.2);
      --color-pill-yellow: rgba(233, 168, 0, 0.2);
      --color-pill-green: rgba(0, 135, 107, 0.2);
      --color-pill-blue: rgba(0, 120, 223, 0.2);
      --color-pill-purple: rgba(103, 36, 222, 0.2);
      --color-pill-pink: rgba(221, 0, 129, 0.2);
      --color-pill-red: rgba(255, 0, 26, 0.2);
    /* gallery, board cards color when hovered */
      --color-ui-hover-bg: rgba(55, 53, 47, 0.08);
      --color-ui-hover-bg-light: rgba(55, 53, 47, 0.03);
    /* gallery, board cards background color */
      --color-card-bg: rgb(255, 255, 255);
      --color-accent-bg: rgb(46, 170, 220);
    /* horizontal divider, card border */
      --color-border-default: rgba(235, 236, 237, 0.8);
      --color-border-dark: rgba(55, 53, 47, 0.16);
    }
    
    [data-theme="dark"] {
    /* text, headings */
      --color-text-default: rgba(255,255,255,0.9);
    /* media caption */
      --color-text-default-light: rgba(255, 255, 255, 0.9);
    /* text, quote, toggle, callout colors */
      --color-text-gray: rgba(151, 154, 155, 0.95);
      --color-text-brown: #937264;
      --color-text-orange: #FFA344;
      --color-text-yellow: #FFDC49;
      --color-text-green: #4DAB9A;
      --color-text-blue: #529CCA;
      --color-text-purple: #9A6DD7;
      --color-text-pink: #E255A1;
      --color-text-red: #FF7369;
    /* text, quote, toggle background colors */
      --color-bg-default: #2f3437;
      --color-bg-gray: #454B4E;
      --color-bg-brown: #434040;
      --color-bg-orange: #594A3A;
      --color-bg-yellow: #59563B;
      --color-bg-green: #354C4B;
      --color-bg-blue: #364954;
      --color-bg-purple: #443F57;
      --color-bg-pink: #533B4C;
      --color-bg-red: #594141;
    /* callout background colors */
      --color-bg-gray-light: rgba(69, 75, 78, 0.3);
      --color-bg-brown-light: rgba(67, 64, 64, 0.3);
      --color-bg-orange-light: rgba(89, 74, 58, 0.3);
      --color-bg-yellow-light: rgba(89, 86, 59, 0.3);
      --color-bg-green-light: rgba(53, 76, 75, 0.3);
      --color-bg-blue-light: rgba(120, 162, 187, 0.3);
      --color-bg-purple-light: rgba(68, 63, 87, 0.3);
      --color-bg-pink-light: rgba(83, 59, 76, 0.3);
      --color-bg-red-light: rgba(89, 65, 65, 0.3);
    /* tags (multi-select, select) colors */
      --color-pill-default: rgba(206, 205, 202, 0.5);
      --color-pill-gray: rgba(151,154,155,0.5);
      --color-pill-brown: rgba(147,114,100,0.5);
      --color-pill-orange: rgba(255,163,68,0.5);
      --color-pill-yellow: rgba(255,220,73,0.5);
      --color-pill-green: rgba(77,171,154,0.5);
      --color-pill-blue: rgba(82,156,202,0.5);
      --color-pill-purple: rgba(154,109,215,0.5);
      --color-pill-pink: rgba(226,85,161,0.5);
      --color-pill-red: rgba(255,115,105,0.5);
    /* gallery, board cards color when hovered */
      --color-ui-hover-bg: rgb(71,76,80);
      --color-ui-hover-bg-light: rgb(71,76,80);
    /* gallery, board cards background color */
      --color-card-bg: #2f3437;
      --color-accent-bg: #364954;
    /* horizontal divider, card border */
      --color-border-default: rgb(69, 75, 78);
      --color-border-dark: rgb(69, 75, 78);
    }
    
    /* After this line is your own custom CSS code */

Remember to click 'Save' once you're done.

Step 2

JavaScript code

Next, we'll create the keyboard shortcuts that will act as the theme switcher. To do this, we will need to write (read copy and paste) some code.

Copy the code below to the head section of your site, and click 'Save'. That's it.

<script>
	/* Change Theme */
	document.addEventListener("keydown", function(event) {
	  if (event.key === "d") {
	    document.documentElement.setAttribute('data-theme', 'dark');
	        localStorage.setItem('theme', 'dark');
	  }
	});
	document.addEventListener("keydown", function(event) {
	  if (event.key === "l") {
	    document.documentElement.setAttribute('data-theme', 'light');
	        localStorage.setItem('theme', 'light');
	  }
	});
</script>

Give it a test on your live site.

Pretty cool, huh?

Follow me on Twitter for more Notion-Super design hacks and tips.

Consider tipping me if you found this content useful.

Thanks, and take care.

— End

← Back

image