Logo
    Get started free
    Logo

    © Super Publishing Co —

    XInstagramDiscord

    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. 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:

    Place the CSS code above into: Super site settings (cog icon) > Code > CSS.

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

    icon

    Get started on your first site completely free

    $12/site/month afterwards.

    ⚡
    Create your site →

    No credit card required

    image
    :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);
    }