refactor(prism): rename color scheme attributes and remove prefix

4 files changed, 28 insertions, 35 deletions

diff --git a/src/components/MDX/CodeBlock/CodeBlock.tsx b/src/components/MDX/CodeBlock/CodeBlock.tsx
index 45a6176..0c66311 100644
--- a/src/components/MDX/CodeBlock/CodeBlock.tsx
+++ b/src/components/MDX/CodeBlock/CodeBlock.tsx
@@ -34,7 +34,7 @@ const CodeBlock = ({
 
   useEffect(() => {
     const allPre: NodeListOf<HTMLPreElement> = document.querySelectorAll(
-      'pre[data-prismjs-color-scheme'
+      'pre[data-prismjs-color-scheme-current]'
     );
     setCodeBlocks(allPre);
   }, [setCodeBlocks, router.asPath]);
diff --git a/src/styles/base/_colors.scss b/src/styles/base/_colors.scss
index a927368..4db97d9 100644
--- a/src/styles/base/_colors.scss
+++ b/src/styles/base/_colors.scss
@@ -67,7 +67,7 @@
   --color-token-orange: #{var.$dark-theme_orange};
 }
 
-pre[data-prismjs-color-scheme="light"] {
+pre[data-prismjs-color-scheme-current="light"] {
   --color-bg: #{var.$light-theme_white};
   --color-bg-secondary: #{var.$light-theme_white-dark};
   --color-bg-tertiary: #{var.$light-theme_grey-bright};
@@ -87,7 +87,7 @@ pre[data-prismjs-color-scheme="light"] {
   --color-token-orange: #{var.$light-theme_orange};
 }
 
-pre[data-prismjs-color-scheme="dark"] {
+pre[data-prismjs-color-scheme-current="dark"] {
   --color-bg: #{var.$dark-theme_black};
   --color-bg-secondary: #{var.$dark-theme_black-bright};
   --color-bg-tertiary: #{var.$dark-theme_grey-darker};
diff --git a/src/utils/plugins/prism-color-scheme.js b/src/utils/plugins/prism-color-scheme.js
index 93a8e7a..2632dd3 100644
--- a/src/utils/plugins/prism-color-scheme.js
+++ b/src/utils/plugins/prism-color-scheme.js
@@ -12,7 +12,7 @@
   /**
    *
    * @typedef {"dark" | "light" | "system"} Theme
-   * @typedef {Record<"color-scheme", Theme> & Record<"button-prefix" | "dark" | "light", string>} Settings
+   * @typedef {Record<"current", Theme> & Record<"dark" | "light", string>} Settings
    */
 
   var storage = {
@@ -90,12 +90,11 @@
   function getSettings(startElement) {
     /** @type Settings */
     var settings = {
-      'color-scheme': setDefaultTheme(),
-      dark: 'Dark Theme',
-      light: 'Light Theme',
-      'button-prefix': 'Toggle',
+      current: setDefaultTheme(),
+      dark: 'Toggle Dark Theme',
+      light: 'Toggle Light Theme',
     };
-    var prefix = 'data-prismjs-';
+    var prefix = 'data-prismjs-color-scheme-';
 
     for (var key in settings) {
       var attr = prefix + key;
@@ -134,17 +133,12 @@
   /**
    * Get the button content depending on current theme.
    *
-   * @param {string} prefix - The text prefix.
    * @param {Theme} theme - The current theme.
    * @param {Settings} settings - The plugin settings.
    * @returns {string} The button text.
    */
-  function getButtonContent(prefix, theme, settings) {
-    if (theme === 'dark') {
-      return `${prefix}${settings['light']}`;
-    }
-
-    return `${prefix}${settings['dark']}`;
+  function getButtonContent(theme, settings) {
+    return theme === 'dark' ? settings['light'] : settings['dark'];
   }
 
   /**
@@ -154,16 +148,12 @@
    * @param {Settings} settings - The plugin settings.
    */
   function updateButtonText(button, settings) {
-    var prefix = settings['button-prefix']
-      ? `${settings['button-prefix']} `
-      : '';
-    var theme = settings['color-scheme'];
-
-    if (theme === 'system') {
-      theme = getThemeFromSystem();
-    }
+    var theme =
+      settings['current'] === 'system'
+        ? getThemeFromSystem()
+        : settings['current'];
 
-    button.textContent = getButtonContent(prefix, theme, settings);
+    button.textContent = getButtonContent(theme, settings);
   }
 
   /**
@@ -173,7 +163,7 @@
    * @param {Theme} theme - The current theme.
    */
   function updatePreAttribute(pre, theme) {
-    pre.setAttribute('data-prismjs-color-scheme', theme);
+    pre.setAttribute('data-prismjs-color-scheme-current', theme);
   }
 
   /**
@@ -182,7 +172,9 @@
    * @param {Theme} theme - The new theme.
    */
   function switchTheme(theme) {
-    var allPre = document.querySelectorAll('pre[data-prismjs-color-scheme]');
+    var allPre = document.querySelectorAll(
+      'pre[data-prismjs-color-scheme-current]'
+    );
     allPre.forEach((pre) => {
       updatePreAttribute(pre, theme);
     });
@@ -201,14 +193,16 @@
         var button = mutatedPre.parentElement.querySelector(
           '.prism-color-scheme-button'
         );
-        var newTheme = mutatedPre.getAttribute('data-prismjs-color-scheme');
-        settings['color-scheme'] = newTheme;
+        var newTheme = mutatedPre.getAttribute(
+          'data-prismjs-color-scheme-current'
+        );
+        settings['current'] = newTheme;
         updateButtonText(button, settings);
       });
     });
     observer.observe(pre, {
       attributes: true,
-      attributeFilter: ['data-prismjs-color-scheme'],
+      attributeFilter: ['data-prismjs-color-scheme-current'],
     });
   }
 
@@ -226,18 +220,18 @@
     themeButton.className = 'prism-color-scheme-button';
     themeButton.setAttribute('type', 'button');
     updateButtonText(themeButton, settings);
-    updatePreAttribute(pre, settings['color-scheme']);
+    updatePreAttribute(pre, settings['current']);
     listenAttributeChange(pre, settings);
 
     themeButton.addEventListener('click', () => {
-      var newTheme = getNewTheme(settings['color-scheme']);
+      var newTheme = getNewTheme(settings['current']);
       switchTheme(newTheme);
       storage.set('prismjs-color-scheme', newTheme);
     });
 
     window.addEventListener('storage', (e) => {
       if (e.key === 'prismjs-color-scheme') {
-        const newTheme = JSON.parse(e.newValue);
+        var newTheme = JSON.parse(e.newValue);
         if (isValidTheme(newTheme)) updatePreAttribute(pre, newTheme);
       }
     });
diff --git a/src/utils/providers/prism.tsx b/src/utils/providers/prism.tsx
index 840f9d8..7a4221d 100644
--- a/src/utils/providers/prism.tsx
+++ b/src/utils/providers/prism.tsx
@@ -57,7 +57,7 @@ const getTheme = (key: string): PrismTheme | undefined => {
 };
 
 export const PrismThemeProvider: FC<PrismThemeProviderProps> = ({
-  attribute = 'data-prismjs-color-scheme',
+  attribute = 'data-prismjs-color-scheme-current',
   storageKey = 'prismjs-color-scheme',
   themes = ['dark', 'light', 'system'],
   children,
@@ -125,7 +125,6 @@ export const PrismThemeProvider: FC<PrismThemeProviderProps> = ({
         mutations.forEach((record) => {
           var mutatedPre = record.target as HTMLPreElement;
           var newTheme = mutatedPre.getAttribute(attribute) as PrismTheme;
-          console.log('here');
           setPrismTheme(newTheme);
         });
       });