add theme toggling depending on html data-bs-theme attribute

Hexlet · Jan 18, 2023 · 5c41ab0 · 5c41ab0
1 parent d518481
commit 5c41ab0
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 6 deletions.
diff --git a/resources/js/components/Editor.jsx b/resources/js/components/Editor.jsx
@@ -5,8 +5,11 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { changeContent } from '../slices/editorSlice.js';
 import codeTemplates from '../common/codeTemplates.js';
+import theme from '../common/currentTheme';
 
 import 'codemirror/lib/codemirror.css';
+import 'codemirror/theme/material-darker.css';
+import 'codemirror/theme/neat.css';
 import 'codemirror/addon/scroll/simplescrollbars.css';
 import 'codemirror/addon/scroll/simplescrollbars.js';
 import 'codemirror/addon/edit/closebrackets.js';
@@ -55,6 +58,7 @@ const Editor = () => {
     scrollbarStyle: 'overlay',
     lineNumbers: true,
     tabSize: 2,
+    theme: theme === 'dark' ? 'material-darker' : 'neat',
   };
 
   return loadingState === 'loading'

diff --git a/resources/js/components/Output.jsx b/resources/js/components/Output.jsx
@@ -3,7 +3,8 @@ import { useSelector } from 'react-redux';
 import { Alert } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import Highlight from 'react-syntax-highlighter';
-import { vs } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import { vs, vs2015 } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import theme from '../common/currentTheme';
 
 const statusToTypeMap = {
   success: 'success',
@@ -37,7 +38,12 @@ const Output = () => {
           <Alert className="m-3" variant={alertClassName}>
             {message}
           </Alert>
-          <Highlight className="flex-grow-1 m-0" language="vbnet" style={vs} showLineNumbers>
+          <Highlight
+            className="flex-grow-1 m-0"
+            language="vbnet"
+            style={theme === 'dark' ? vs2015 : vs}
+            showLineNumbers
+          >
             {output}
           </Highlight>
         </>

diff --git a/resources/js/components/TeacherSolution.jsx b/resources/js/components/TeacherSolution.jsx
@@ -1,14 +1,20 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import Highlight from 'react-syntax-highlighter';
-import { vs } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import { vs, vs2015 } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import theme from '../common/currentTheme';
 
 const TeacherSolution = () => {
   const { hasTeacherSolution, teacherSolutionCode } = useSelector((state) => state.exerciseInfo);
 
   return hasTeacherSolution ? (
     <div className="d-flex h-100">
-      <Highlight className="h-100" language="scheme" style={vs} showLineNumbers>
+      <Highlight
+        className="h-100"
+        language="scheme"
+        style={theme === 'dark' ? vs2015 : vs}
+        showLineNumbers
+      >
         {teacherSolutionCode}
       </Highlight>
     </div>

diff --git a/resources/js/components/Tests.jsx b/resources/js/components/Tests.jsx
@@ -1,14 +1,20 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import Highlight from 'react-syntax-highlighter';
-import { vs } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import { vs, vs2015 } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import theme from '../common/currentTheme';
 
 const Tests = () => {
   const { hasTests, testCode } = useSelector((state) => state.exerciseInfo);
 
   return hasTests ? (
     <div className="d-flex h-100">
-      <Highlight className="h-100" language="scheme" style={vs} showLineNumbers>
+      <Highlight
+        className="h-100"
+        language="scheme"
+        style={theme === 'dark' ? vs2015 : vs}
+        showLineNumbers
+      >
         {testCode}
       </Highlight>
     </div>