Merge pull request #1475 from antonDedyaev/dark-theme

Fix #1470: prepare layout for dark theme
Hexlet · Jan 18, 2023 · 2316803 · 2316803
2 parents 5549141 + 5c41ab0
commit 2316803
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 12 deletions.
diff --git a/resources/js/common/currentTheme.js b/resources/js/common/currentTheme.js
@@ -0,0 +1 @@
+export default document.querySelector('html').dataset.bsTheme;
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>

diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss
@@ -1,5 +1,2 @@
-// Body
-$nav-tabs-link-active-bg: #fff;
-
 // Typography
-$font-family-sans-serif: 'Onest', sans-serif;
+$font-family-sans-serif: 'Onest', sans-serif;
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
@@ -8,6 +8,17 @@
 // NOTE: move if it will be necessary. It should be do for the site.
 // TODO grep and replace by .bd-gray-200
 // https://getbootstrap.com/docs/5.0/customize/color/
-.x-bg-gray-200 {
+.x-bg-gray {
     background: $gray-200;
 }
+
+@include color-mode(dark) {
+    .x-bg-gray {
+        background: $gray-800;
+    }
+    .hljs {
+        color: inherit;
+        background-color: inherit;
+    }
+}
+
diff --git a/resources/views/exercise/navigation.blade.php b/resources/views/exercise/navigation.blade.php
@@ -1,4 +1,4 @@
-<ul class="nav nav-tabs nav-fill rounded border-bottom-0 x-bg-gray-200 p-2 mb-4">
+<ul class="nav nav-tabs nav-fill rounded border-bottom-0 x-bg-gray p-2 mb-4">
     <li class="nav-item mb-0">
         <a href="{{ route('exercises.index') }}" @class(['nav-link', 'rounded', 'border-0', 'active' => Request::routeIs('exercises.index')]) >
             {{ __('layout.nav.exercises') }}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export default document.querySelector('html').dataset.bsTheme;