Extension and CSS not working

[Explosion-Scratch]

The extension just isn't working. The options page lets me select a theme, then I reload notion, and... Nothing. No idea what's going on. I also tried using stylus and testing some of the themes from the extension (I looked through the code and found the CSS), this CSS does absolutely nothing:

:root {
  --bg: #161b22;
  --bg-light: #161b22;
  --bg-lighter: #0d1117;
  --fg: #ffffffe6;
  --fg-light: #8b949e;
  --fg-lighter: var(--fg-light);
  --main: #1f6feb;
  --hover: #30363d;
  --border: #30363d;
  --selection: #2eaadc40;
  --gray: #838789;
  --brown: #894500;
  --orange: #e38c00;
  --yellow: #f1e05a;
  --green: #238636;
  --blue: #58a6ff;
  --purple: #a371f7;
  --pink: #e255a1;
  --red: #e34c26;
  --bg-gray: #7e80814d;
  --bg-brown: #6a2b00ad;
  --bg-orange: #ff9900a6;
  --bg-yellow: #c7b133b0;
  --bg-green: #52c54d63;
  --bg-blue: #005a9285;
  --bg-purple: #5a319459;
  --bg-pink: #ff50ad85;
  --bg-red: #7a14149f;
}

So no idea why it's not working =|

Also, user agent:

Mozilla/5.0 (X11; CrOS x86_64 14440.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.100.4807.0 Safari/537.36

[yudax42]

Hello! in order to properly apply the theme, you need to first choose in Notion settings light or dark, then select the theme from light or dark variants in the Notion Themes web extension.

[yudax42]

to apply Dark themes you need to switch to dark mode from the Notion settings

[Explosion-Scratch]

No themes are working

[yudax42]

Make sure you add the complete CSS code

/* Elements: [SideBar, popup]*/
.notion-dark-theme *[style*="background: rgb(63, 68, 71)"],
.notion-dark-theme *[style*="background-color: rgb(64, 68, 71)"] {
  background: var(--bg-lighter) !important;
}

/* Elements: [Background, CollectionViewSwitcherHeader ] */
.notion-dark-theme *[style*="background: rgb(47, 52, 55)"],
.notion-dark-theme *[style*="background-color: rgb(47, 52, 55)"],
.notion-dark-theme
  div[style*="background: linear-gradient(rgba(47, 52, 55, 0) 0px, rgb(47, 52, 55) 10px, rgb(47, 52, 55) 100%)"] {
  background: var(--bg) !important;
}

/* Collection blocks light background */
.notion-dark-theme *[style*="background: rgb(55, 60, 63)"],
.notion-dark-theme *[style*="background: rgba(255, 255, 255, 0.6)"] {
  background: var(--bg-lighter) !important;
}

/* Firefox collection white background fix */

.notion-dark-theme
  div[style*="rgba(0, 0, 0, 0) linear-gradient(rgba(47, 52, 55, 0) 0px, rgb(47, 52, 55) 10px, rgb(47, 52, 55) 100%) repeat scroll 0% 0%"] {
  background: none !important;
}

/* Collection block at click background */

.notion-dark-theme *[style*="background: rgb(88, 91, 93)"],
.notion-dark-theme *[style*="background: rgb(61, 66, 69)"] {
  background: var(--bg-light) !important;
}

/* Elements: [SVG fill gray] */
.notion-dark-theme *[style*="fill: rgba(202, 204, 206, 0.6)"] {
  fill: var(--fg-lighter) !important;
}

/* Elements: [SVG fill blue] */
.notion-dark-theme *[style*="fill:#2EAADC"] {
  fill: var(--main) !important;
}

/* Elements: [Text, Table of content] */
/* .notion-dark-theme *[style*="color: rgba(255, 255, 255, 0.9)"] {
  color: var(--fg) !important;
} */
.notion-dark-theme *[style*="color: rgb(159, 164, 169)"] {
  color: var(--fg-light) !important;
}
/* ligther text */
.notion-dark-theme *[style*="color: rgba(25, 23, 17, 0.6)"] {
  color: var(--fg-lighter) !important;
}

/* blue color */
.notion-dark-theme *[style*="color: rgb(46, 170, 220)"],
.notion-dark-theme *[style*="color:#2EAADC"] {
  color: var(--main) !important;
}

/* Elements: [Main Button,Main button at hover]  */
.notion-dark-theme div[style*="background: rgb(0, 141, 190)"],
.notion-dark-theme div[style*="background: rgb(46, 170, 220)"] {
  background: var(--main) !important;
}
.notion-dark-theme div[style*="background: rgb(6, 156, 205)"]:hover {
  background: var(--bg-lighter) !important;
}

/* hover background */
.notion-dark-theme div[style*="background: rgba(255, 255, 255, 0.1)"] {
  background: var(--hover) !important;
}

/* collection view border*/
.notion-dark-theme *[style*="border: 1px solid rgb(63, 66, 69)"] {
  border: 1px solid var(--border) !important;
}
.notion-dark-theme *[style*="border-right: 1px solid rgb(60, 63, 67)"],
.notion-dark-theme *[style*="border-right: 1px solid rgb(63, 66, 69)"] {
  border-right: 1px solid var(--border) !important;
}
.notion-dark-theme *[style*="border-bottom: 1px solid rgb(63, 66, 69)"] {
  border-bottom: 1px solid var(--border) !important;
}
.notion-dark-theme *[style*="border-top: 1px solid rgb(63, 66, 69)"] {
  border-top: 1px solid var(--border) !important;
}

/* scrollbar */
.notion-dark-theme .notion-scroller::-webkit-scrollbar {
  width: 0.4rem;
  height: 0.4rem;
  background: var(--bg);
}
.notion-dark-theme .notion-scroller::-webkit-scrollbar * {
  background: transparent;
}
.notion-dark-theme .notion-scroller::-webkit-scrollbar-thumb {
  background: var(--bg-lighter) !important;
  cursor: pointer;
  border-radius: 1.6rem;
}
.notion-dark-theme .notion-scroller::-webkit-scrollbar-track {
  background: var(--bg) !important;
}

/* Selection */
.notion-dark-theme *::selection,
.notion-selectable-halo {
  background: var(--selection) !important;
}

/* Text background, blocks background, tags background */
.notion-dark-theme *[style*="background:rgba(60, 65, 68, 1)"],
.notion-dark-theme *[style*="background: rgb(60, 65, 68)"],
.notion-dark-theme *[style*="background: rgb(71, 76, 80)"] {
  background: var(--bg-gray) !important;
}
.notion-dark-theme *[style*="background:rgba(76, 61, 53, 1)"],
.notion-dark-theme *[style*="background: rgb(76, 61, 53)"],
.notion-dark-theme *[style*="background: rgb(92, 71, 61)"] {
  background: var(--bg-brown) !important;
}
.notion-dark-theme *[style*="background:rgba(85, 59, 41, 1)"],
.notion-dark-theme *[style*="background: rgb(85, 59, 41)"],
.notion-dark-theme *[style*="background: rgb(136, 84, 44)"] {
  background: var(--bg-orange) !important;
}
.notion-dark-theme *[style*="background:rgba(79, 64, 41, 1)"],
.notion-dark-theme *[style*="background: rgb(79, 64, 41)"],
.notion-dark-theme *[style*="background: rgb(146, 118, 63)"] {
  background: var(--bg-yellow) !important;
}
.notion-dark-theme *[style*="background:rgba(46, 68, 58, 1)"],
.notion-dark-theme *[style*="background: rgb(46, 68, 58)"],
.notion-dark-theme *[style*="background: rgb(50, 82, 65)"] {
  background: var(--bg-green) !important;
}
.notion-dark-theme *[style*="background:rgba(45, 66, 86, 1)"],
.notion-dark-theme *[style*="background: rgb(45, 66, 86)"],
.notion-dark-theme *[style*="background: rgb(42, 78, 107)"] {
  background: var(--bg-blue) !important;
}
.notion-dark-theme *[style*="background:rgba(69, 58, 91, 1)"],
.notion-dark-theme *[style*="background: rgb(69, 58, 91)"],
.notion-dark-theme *[style*="background: rgb(83, 68, 116)"] {
  background: var(--bg-purple) !important;
}
.notion-dark-theme *[style*="background:rgba(81, 56, 77, 1)"],
.notion-dark-theme *[style*="background: rgb(81, 56, 77)"],
.notion-dark-theme *[style*="background: rgb(106, 59, 99)"] {
  background: var(--bg-pink) !important;
}
.notion-dark-theme *[style*="background:rgba(94, 52, 54, 1)"],
.notion-dark-theme *[style*="background: rgb(94, 52, 54)"],
.notion-dark-theme *[style*="background: rgb(122, 54, 59)"] {
  background: var(--bg-red) !important;
}
/*Text colors && Quotes*/
.notion-dark-theme *[style*="color:rgba(159, 164, 169, 1)"],
.notion-dark-theme *[style*="color: rgb(159, 164, 169)"] {
  color: var(--gray) !important;
}
.notion-dark-theme *[style*="color:rgba(212, 150, 117, 1)"],
.notion-dark-theme *[style*="color: rgb(212, 150, 117)"] {
  color: var(--brown) !important;
}
.notion-dark-theme *[style*="color:rgba(217, 133, 56, 1)"],
.notion-dark-theme *[style*="color: rgb(217, 133, 56)"] {
  color: var(--orange) !important;
}
.notion-dark-theme *[style*="color:rgba(201, 145, 38, 1)"],
.notion-dark-theme *[style*="color: rgb(201, 145, 38)"] {
  color: var(--yellow) !important;
}
.notion-dark-theme *[style*="color:rgba(113, 178, 131, 1)"],
.notion-dark-theme *[style*="color: rgb(113, 178, 131)"] {
  color: var(--green) !important;
}
.notion-dark-theme *[style*="color:rgba(102, 170, 218, 1)"],
.notion-dark-theme *[style*="color: rgb(102, 170, 218)"] {
  color: var(--blue) !important;
}
.notion-dark-theme *[style*="color:rgba(176, 152, 217, 1)"],
.notion-dark-theme *[style*="color: rgb(176, 152, 217)"] {
  color: var(--purple) !important;
}
.notion-dark-theme *[style*="color:rgba(223, 132, 209, 1)"],
.notion-dark-theme *[style*="color: rgb(223, 132, 209)"] {
  color: var(--pink) !important;
}
.notion-dark-theme *[style*="color:rgba(234, 135, 140, 1)"],
.notion-dark-theme *[style*="color: rgb(234, 135, 140)"] {
  color: var(--red) !important;
}

[Explosion-Scratch]

Oops! Sorry! Thanks! 😃 It seems that your extension doesn't add this CSS though.

[yudax42]

Sure! No problem. Could you please take a screenshot of the extension options page and also the console tab of your browser?