šŸŒˆ

Changing default Notion colors

How to change the default color options on your Notion website (background included). While themes and simpler styling options are coming soon, CSS will work for now. Place the code snippets below into the snippet injection box in your site settings.

āš”

This feature only works on the Static method

Change the default background color

<style>
  :root {
    --color-bg-default: #000 !important;
  }
</style>

This will make the background black, but you can change the #000 to any hex color you'd like.

Change multiple colors at once

Want to change the default background and text color?

<style>
  :root {
    --color-bg-default: #000 !important;
    --color-text-default: blue !important;
  }
</style>

This will make the default background black and default text color blue. You can put any valid CSS color name here, or use hex or rgb color codes.

All available colors

You can override all of Notion's default colors you want. Here's a full list.

<style>
  :root {
    --color-text-default: #37352f;
    --color-text-default-light: rgba(55,53,47,0.6);
    --color-text-gray: #9b9a97;
    --color-text-brown: #64473a;
    --color-text-orange: #d9730d;
    --color-text-yellow: #dfab01;
    --color-text-green: #0f7b6c;
    --color-text-blue: #0b6e99;
    --color-text-purple: #6940a5;
    --color-text-pink: #ad1a72;
    --color-text-red: #e03e3e;
    --color-bg-default: #fff;
    --color-bg-gray: #ebeced;
    --color-bg-brown: #e9e5e3;
    --color-bg-orange: #faebdd;
    --color-bg-yellow: #fbf3db;
    --color-bg-green: #ddedea;
    --color-bg-blue: #ddebf1;
    --color-bg-purple: #eae4f2;
    --color-bg-pink: #f4dfeb;
    --color-bg-red: #fbe4e4;
    --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);
    --color-pill-default: rgba(206,205,202,0.5);
    --color-pill-gray: hsla(45,2%,60%,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);
    --color-ui-hover-bg: rgba(55,53,47,0.08);
  }
</style>

Need some help? Ask a question in our community portal.