How to change the default color options on your Super site using CSS (background included).
While themes and simpler styling options are coming soon, CSS will work for now. To use the code snippets below head into your Super site settings (Cog icon) then click into the Code page. From here open the CSS tab and paste in the snippets.
Change the default background color
:root {
--color-bg-default: #000 !important;
}This will make the background black, but you can change the #000 to any hex color you'd like.
Change multiple colors at once
:root {
--color-bg-default: #000 !important;
--color-text-default: blue !important;
}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. Here's a full list:
: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);
}Place the CSS code above into: Super site settings (cog icon) > Code > CSS.
You can also read more in out technical documentation.
