Change the default colors on your Super site

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

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: site site settings > options > global code injection > CSS.

Questions? Ask them in the code channel of our community space.

© Super Publishing Co — View this site in Notion ⚡️

Made with Super