How to invert the color of an element

Published Date
Sep 14, 2021
Tags
Design Tips
Author
Yusuf Giftworks

The Problem

Your Notion-Super site uses a system theme that alternates between dark and light mode, and you have monotone illustrations and callout icons on your site.

These illustrations and callout icons are in black color, and you do not want them to fade in the background when the site changes to dark mode.

The Solution

Invert the illustrations and callout icons with CSS.

Steps,

  • For images:
  • Inspect the illustrations and obtain the specific block ID. Or, if all of your images are monotone illustrations, use the class .notion-image. Use the CSS code below. The main CSS property is filter: invert(#%).

    /* If using block ID */
    
    @media (prefers-color-scheme: light) {
    	#block-ID {
    	  filter: invert(0%);
    	}
    }
    
    @media (prefers-color-scheme: dark) {
    	#block-ID {
    	  filter: invert(100%);
    	}
    }

/* If using .notion-image */

@media (prefers-color-scheme: light) {
	.notion-image {
	  filter: invert(0%);
	}
}

@media (prefers-color-scheme: dark) {
	.notion-image {
	  filter: invert(100%);
	}
}

  • For callout icons:
  • @media (prefers-color-scheme: light) {
    	.notion-callout__icon {
    	  filter: invert(0%);
    	}
    }
    
    @media (prefers-color-scheme: dark) {
    	.notion-callout__icon {
    	  filter: invert(100%);
    	}
    }

Remember to save the code.

— end

← Back

image