chore(prism): translate color scheme toggle button

5 files changed, 48 insertions, 2 deletions

diff --git a/src/components/MDX/CodeBlock/CodeBlock.tsx b/src/components/MDX/CodeBlock/CodeBlock.tsx
index 0c66311..2f9715d 100644
--- a/src/components/MDX/CodeBlock/CodeBlock.tsx
+++ b/src/components/MDX/CodeBlock/CodeBlock.tsx
@@ -1,5 +1,8 @@
 import { settings } from '@utils/config';
-import { translateCopyButton } from '@utils/helpers/prism';
+import {
+  translateCopyButton,
+  translateToggleButton,
+} from '@utils/helpers/prism';
 import { useRouter } from 'next/router';
 import Prism from 'prismjs';
 import { ReactChildren, useEffect } from 'react';
@@ -28,6 +31,7 @@ const CodeBlock = ({
 
   useEffect(() => {
     translateCopyButton(locale, intl);
+    translateToggleButton(locale, intl);
   }, [intl, locale]);
 
   const { setCodeBlocks } = usePrismTheme();
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 7bd1f2f..536f1e7 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -15,6 +15,10 @@
     "defaultMessage": "Blog: development, open source - {websiteName}",
     "description": "BlogPage: SEO - Page title"
   },
+  "/5es0M": {
+    "defaultMessage": "Toggle Dark Theme",
+    "description": "Prism: toggle dark theme button text"
+  },
   "/IirIt": {
     "defaultMessage": "Legal notice",
     "description": "LegalNoticePage: page title"
@@ -283,6 +287,10 @@
     "defaultMessage": "Search",
     "description": "SearchPage: breadcrumb item"
   },
+  "Tzpiwn": {
+    "defaultMessage": "Toggle Light Theme",
+    "description": "Prism: toggle light theme button text"
+  },
   "U++A+B": {
     "defaultMessage": "{readingTime, plural, =0 {# minutes} one {# minute} other {# minutes}}",
     "description": "PostMeta: reading time value"
diff --git a/src/i18n/fr.json b/src/i18n/fr.json
index a826053..0b9b8f6 100644
--- a/src/i18n/fr.json
+++ b/src/i18n/fr.json
@@ -15,6 +15,10 @@
     "defaultMessage": "Blog : développement, libre et open-source - {websiteName}",
     "description": "BlogPage: SEO - Page title"
   },
+  "/5es0M": {
+    "defaultMessage": "Utiliser le thème sombre",
+    "description": "Prism: toggle dark theme button text"
+  },
   "/IirIt": {
     "defaultMessage": "Mentions légales",
     "description": "LegalNoticePage: page title"
@@ -283,6 +287,10 @@
     "defaultMessage": "Recherche",
     "description": "SearchPage: breadcrumb item"
   },
+  "Tzpiwn": {
+    "defaultMessage": "Utiliser le thème clair",
+    "description": "Prism: toggle light theme button text"
+  },
   "U++A+B": {
     "defaultMessage": "{readingTime, plural, =0 {# minute} one {# minute} other {# minutes}}",
     "description": "PostMeta: reading time value"
diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index d00d939..feb672a 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -13,7 +13,11 @@ import { ArticleMeta, ArticleProps } from '@ts/types/articles';
 import { settings } from '@utils/config';
 import { getFormattedPaths } from '@utils/helpers/format';
 import { loadTranslation } from '@utils/helpers/i18n';
-import { addPrismClasses, translateCopyButton } from '@utils/helpers/prism';
+import {
+  addPrismClasses,
+  translateCopyButton,
+  translateToggleButton,
+} from '@utils/helpers/prism';
 import { usePrismTheme } from '@utils/providers/prism';
 import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
@@ -37,6 +41,7 @@ const SingleArticle: NextPageWithLayout<ArticleProps> = ({ post }) => {
 
   useEffect(() => {
     translateCopyButton(locale, intl);
+    translateToggleButton(locale, intl);
   }, [intl, locale]);
 
   const { setCodeBlocks } = usePrismTheme();
diff --git a/src/utils/helpers/prism.ts b/src/utils/helpers/prism.ts
index 7f10dc9..1004a84 100644
--- a/src/utils/helpers/prism.ts
+++ b/src/utils/helpers/prism.ts
@@ -61,3 +61,24 @@ export const translateCopyButton = (locale: string, intl: IntlShape) => {
     article.setAttribute('data-prismjs-copy-error', errorText);
   });
 };
+
+/**
+ * Translate the PrismJS color-scheme button.
+ */
+export const translateToggleButton = (locale: string, intl: IntlShape) => {
+  const articles = document.getElementsByTagName('article');
+  const darkTheme = intl.formatMessage({
+    defaultMessage: 'Toggle Dark Theme',
+    description: 'Prism: toggle dark theme button text',
+  });
+  const lightTheme = intl.formatMessage({
+    defaultMessage: 'Toggle Light Theme',
+    description: 'Prism: toggle light theme button text',
+  });
+
+  Array.from(articles).forEach((article) => {
+    article.setAttribute('lang', locale);
+    article.setAttribute('data-prismjs-color-scheme-dark', darkTheme);
+    article.setAttribute('data-prismjs-color-scheme-light', lightTheme);
+  });
+};