skip to content
walterra.dev

I turned on Disqus powered comments for this blog a while ago and noticed they were no longer working. I jumped into developer console and saw that the embedded Disqus code was throwing an error:

Uncaught Error: parseColor received unparseable color: oklch(...)

Turns out Disqus doesn’t play nice with colors specified in CSS using oklch(). My quick fix for now was reverting the colors in src/styles/global.css to RGB hex codes like this:

# broken oklch()
@theme {
  --color-global-bg: oklch(98.48% 0 0);
  --color-global-text: oklch(26.99% 0.0096 235.05);
  --color-link: oklch(55.44% 0.0431 185.69);
  --color-accent: oklch(55.27% 0.195 19.06);
  --color-accent-2: oklch(18.15% 0 0);
  --color-quote: oklch(55.27% 0.195 19.06);
}


...


&[data-theme="dark"] {
  color-scheme: dark;
  --color-global-bg: oklch(23.64% 0.0045 248);
  --color-global-text: oklch(83.54% 0 264);
  --color-link: oklch(70.44% 0.1133 349);
  --color-accent: oklch(70.91% 0.1415 163.7);
  --color-accent-2: oklch(94.66% 0 0);
  --color-quote: oklch(94.8% 0.106 136.49);
}


# working RBG hex code
@theme {
  --color-global-bg: #fafafa;
  --color-global-text: #22272a;
  --color-link: #567b76;
  --color-accent: #cb2a42;
  --color-accent-2: #121212;
  --color-quote: #cb2a42;
}


...


&[data-theme="dark"] {
  color-scheme: dark;
  --color-global-bg: #1d1f20;
  --color-global-text: #c9c9c9;
  --color-link: #d482ab;
  --color-accent: #2abc89;
  --color-accent-2: #ededed;
  --color-quote: #cdffb8;
}

It’s a temporary workaround hopefully until Disqus fixing their color parsing.