From 82857ca13b78fea35087f9d967b99c8ce6a10cde Mon Sep 17 00:00:00 2001
From: Nicolas Phan <nicolas.van.phan@gmail.com>
Date: Thu, 26 May 2022 16:13:30 +0200
Subject: [PATCH] Fix syntax coloring and light/dark theme switching

---
 gitlab-pages/website/core/CodeExamples.js      |  1 +
 gitlab-pages/website/core/PrismLigoSyntaxes.js | 17 +++++++++++++++++
 gitlab-pages/website/src/pages/faq.js          |  7 ++-----
 gitlab-pages/website/src/pages/index.js        |  1 -
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/gitlab-pages/website/core/CodeExamples.js b/gitlab-pages/website/core/CodeExamples.js
index b38e6b4d9d..33c1913c83 100644
--- a/gitlab-pages/website/core/CodeExamples.js
+++ b/gitlab-pages/website/core/CodeExamples.js
@@ -2,6 +2,7 @@ import React from 'react';
 import Highlight, { defaultProps } from "prism-react-renderer";
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import Prism from './PrismLigoSyntaxes'
 import useThemeContext from '@theme/hooks/useThemeContext';
 import defaultTheme from 'prism-react-renderer/themes/palenight';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
diff --git a/gitlab-pages/website/core/PrismLigoSyntaxes.js b/gitlab-pages/website/core/PrismLigoSyntaxes.js
index e41744f5ab..ff50e34011 100644
--- a/gitlab-pages/website/core/PrismLigoSyntaxes.js
+++ b/gitlab-pages/website/core/PrismLigoSyntaxes.js
@@ -1,5 +1,22 @@
+import useThemeContext from '@theme/hooks/useThemeContext';
+import defaultTheme from 'prism-react-renderer/themes/palenight';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
 const {Prism} = require("prism-react-renderer");
 
+export const GetTheme = () => {
+  const {
+    siteConfig: {
+      themeConfig: {prism = {}},
+    },
+  } = useDocusaurusContext();
+  const {isDarkTheme} = useThemeContext();
+  const lightModeTheme = prism.theme || defaultTheme;
+  const darkModeTheme = prism.darkTheme || lightModeTheme;
+
+  return isDarkTheme ?  darkModeTheme : lightModeTheme;
+}
+
 // TODO : What's a better way to extend the Prism library with these syntaxes ?
 
 Prism.languages = {
diff --git a/gitlab-pages/website/src/pages/faq.js b/gitlab-pages/website/src/pages/faq.js
index de539e3fb3..ba8a187f16 100644
--- a/gitlab-pages/website/src/pages/faq.js
+++ b/gitlab-pages/website/src/pages/faq.js
@@ -2,11 +2,8 @@ import React from 'react';
 import ReactMarkdown from 'react-markdown';
 import Layout from '@theme/Layout';
 import Highlight, { defaultProps } from "prism-react-renderer";
-import defaultTheme from 'prism-react-renderer/themes/palenight';
-import Prism from '../../core/PrismLigoSyntaxes'
+import Prism, {GetTheme} from '../../core/PrismLigoSyntaxes'
 
-// TODO : Add light / dark theme instead of default one
-// TODO : Make Ligo syntaxes highlighting work in Markdown code block
 // TODO : Add filtering-by-tag function
 
 const QUESTIONS = [
@@ -87,7 +84,7 @@ const Question = ({question, answer, tags}) => (
             const language = match[1]
             const code = children[0]
             return (
-              <Highlight {...defaultProps} code={code} language={language} style={defaultTheme}>
+              <Highlight {...defaultProps} code={code} language={language} theme={GetTheme()}>
                 {/* This function was taken directly from the prism-react-renderer Github page README */}
                 {({ className, style, tokens, getLineProps, getTokenProps }) => (
                   <pre className={className} style={style}>
diff --git a/gitlab-pages/website/src/pages/index.js b/gitlab-pages/website/src/pages/index.js
index 09ed6771a0..81f497f1b9 100644
--- a/gitlab-pages/website/src/pages/index.js
+++ b/gitlab-pages/website/src/pages/index.js
@@ -2,7 +2,6 @@ import React from 'react';
 import Layout from '@theme/Layout';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import CodeExamples from '../../core/CodeExamples';
-import Prism from '../../core/PrismLigoSyntaxes'
 
 const FEATURES = [
   {