(fix) cybertopia themes render correctly in shadow DOM (#4277)

* Make cybertopia themes compatible with shadow DOM

Author: hbgl

CHANGES.md

@@ -22,6 +22,10 @@ Documentation:
 
 - alphabetized languages + upper-cased BASIC in SUPPORTED_LANGUAGES.md [Adam Lui][]
 
+Themes:
+
+- Fix: cybertopia themes render correctly in shadow DOM [hbgl][]
+
 CONTRIBUTORS
 
 [Josh Marchand]: https://github.com/yHSJ
@@ -36,6 +40,7 @@ CONTRIBUTORS
 [Sebastiaan Speck]: https://github.com/sebastiaanspeck
 [Filip Hoffmann]: https://github.com/folospior
 [Kerry Shetline]: https://github.com/kshetline
+[hbgl]: https://github.com/hbgl
 
 ## Version 11.11.1
 

src/styles/cybertopia-cherry.css

@@ -4,7 +4,7 @@
   Repository: https://github.com/noraj/cybertopia-highlightjs
 */
 
-:root {
+:root, :host {
   --hljs-bg: #101010;
   --hljs-mono-1: #abb2bf;
   --hljs-mono-3: #5c6370;

src/styles/cybertopia-dimmer.css

@@ -4,7 +4,7 @@
   Repository: https://github.com/noraj/cybertopia-highlightjs
 */
 
-:root {
+:root, :host {
   --hljs-bg: #101010;
   --hljs-mono-1: #abb2bf;
   --hljs-mono-3: #5c6370;

src/styles/cybertopia-icecap.css

@@ -4,7 +4,7 @@
   Repository: https://github.com/noraj/cybertopia-highlightjs
 */
 
-:root {
+:root, :host {
   --hljs-bg: #101010;
   --hljs-mono-1: #abb2bf;
   --hljs-mono-3: #5c6370;

src/styles/cybertopia-saturated.css

@@ -4,7 +4,7 @@
   Repository: https://github.com/noraj/cybertopia-highlightjs
 */
 
-:root {
+:root, :host {
   --hljs-bg: #101010;
   --hljs-mono-1: #abb2bf;
   --hljs-mono-3: #5c6370;