chore: add a Prism plugin to set code blocks theme

2 files changed, 49 insertions, 1 deletions

diff --git a/src/styles/base/_colors.scss b/src/styles/base/_colors.scss
index 5d945bb..a927368 100644
--- a/src/styles/base/_colors.scss
+++ b/src/styles/base/_colors.scss
@@ -66,3 +66,43 @@
   --color-token-yellow: #{var.$dark-theme_yellow};
   --color-token-orange: #{var.$dark-theme_orange};
 }
+
+pre[data-prismjs-color-scheme="light"] {
+  --color-bg: #{var.$light-theme_white};
+  --color-bg-secondary: #{var.$light-theme_white-dark};
+  --color-bg-tertiary: #{var.$light-theme_grey-bright};
+  --color-fg: #{var.$light-theme_black};
+  --color-fg-light: #{var.$light-theme_grey-dark};
+  --color-primary: #{var.$light-theme_blue};
+  --color-primary-darker: #{var.$light-theme_blue-darker};
+  --color-border: #{var.$light-theme_grey};
+  --color-border-dark: #{var.$light-theme_grey-dark};
+  --color-token-red: #{var.$light-theme_red};
+  --color-token-green: #{var.$light-theme_green};
+  --color-token-purple: #{var.$light-theme_purple};
+  --color-token-magenta: #{var.$light-theme_magenta};
+  --color-token-cyan: #{var.$light-theme_cyan};
+  --color-token-blue: #{var.$light-theme_blue};
+  --color-token-yellow: #{var.$light-theme_yellow};
+  --color-token-orange: #{var.$light-theme_orange};
+}
+
+pre[data-prismjs-color-scheme="dark"] {
+  --color-bg: #{var.$dark-theme_black};
+  --color-bg-secondary: #{var.$dark-theme_black-bright};
+  --color-bg-tertiary: #{var.$dark-theme_grey-darker};
+  --color-fg: #{var.$dark-theme_white};
+  --color-fg-light: #{var.$dark-theme_grey};
+  --color-primary: #{var.$dark-theme_blue};
+  --color-primary-darker: #{var.$dark-theme_blue-darker};
+  --color-border: #{var.$dark-theme_grey-dark};
+  --color-border-dark: #{var.$dark-theme_grey};
+  --color-token-red: #{var.$dark-theme_red};
+  --color-token-green: #{var.$dark-theme_green};
+  --color-token-purple: #{var.$dark-theme_purple};
+  --color-token-magenta: #{var.$dark-theme_magenta};
+  --color-token-cyan: #{var.$dark-theme_cyan};
+  --color-token-blue: #{var.$dark-theme_blue};
+  --color-token-yellow: #{var.$dark-theme_yellow};
+  --color-token-orange: #{var.$dark-theme_orange};
+}
diff --git a/src/styles/vendors/_prism.scss b/src/styles/vendors/_prism.scss
index 8328114..87eba2c 100644
--- a/src/styles/vendors/_prism.scss
+++ b/src/styles/vendors/_prism.scss
@@ -49,6 +49,11 @@
       }
     }
   }
+
+  .toolbar-item:nth-child(3) {
+    order: 3;
+    margin-left: var(--spacing-2xs);
+  }
 }
 
 pre[class*="language-"] {
@@ -56,6 +61,8 @@ pre[class*="language-"] {
   margin: var(--spacing-md) 0;
   padding: 0;
   position: relative;
+  background: var(--color-bg-secondary);
+  color: var(--color-fg);
   border: fun.convert-px(1) solid var(--color-border);
 
   > code {
@@ -235,7 +242,8 @@ pre.command-line {
   }
 }
 
-.copy-to-clipboard-button {
+.copy-to-clipboard-button,
+.prism-color-scheme-button {
   display: block;
   padding: 0 var(--spacing-xs);
   background: var(--color-bg);