Merge pull request #1480 from fey/dark-theme

add dark theme

.editorconfig

@@ -17,6 +17,9 @@ indent_size = 2
 [*.{js,jsx,scss}]
 indent_size = 2
 
+[*.{blade.php}]
+indent_size = 2
+
 [package.json]
 indent_size = 2
 

Dockerfile.render

@@ -13,4 +13,4 @@ RUN npm run prod
 
 RUN php artisan migrate:fresh --force --seed
 
-CMD [ "php artisan serve --host 0.0.0.0 --port 8000" ]
+CMD [ "php artisan serve --host 0.0.0.0 --port 80" ]

Makefile

@@ -21,7 +21,7 @@ start:
 	heroku local -f Procfile.dev
 
 start-app:
-	php artisan serve --host 0.0.0.0 --port 8000
+	php artisan serve --host 0.0.0.0
 
 start-frontend:
 	npm run watch

package.json

@@ -21,7 +21,7 @@
     "@popperjs/core": "^2.11.5",
     "@reduxjs/toolkit": "^1.6.2",
     "axios": "^0.25",
-    "bootstrap": "^5.2.3",
+    "bootstrap": "^5.3.0-alpha1",
     "codemirror": "^5.64.0",
     "highlight.js": "^11.x",
     "i18next": "^21.5.4",

resources/js/common/currentTheme.js

@@ -0,0 +1 @@
+export default document.querySelector('html').dataset.bsTheme;

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'

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>
         </>

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>

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>

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;

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;
+    }
+}
+

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') }}

resources/views/exercise/show.blade.php

@@ -96,14 +96,13 @@ class="btn btn-primary"
             <div id="codemirrorContainer"></div>
         </div>
     </div>
+@endsection
+@push('scripts')
     <script>
-      const userId = "{{ $authUser->id }}";
-      const exerciseId = "{{ $exercise->id }}";
-      const locale = "{{ LaravelLocalization::getCurrentLocale() }}";
-      window.sicpEditorData = { userId, exerciseId, locale };
+        const userId = "{{ $authUser->id }}";
+        const exerciseId = "{{ $exercise->id }}";
+        const locale = "{{ LaravelLocalization::getCurrentLocale() }}";
+        window.sicpEditorData = { userId, exerciseId, locale };
     </script>
-
-    @push('scripts')
     <script src="{{ mix('js/editor.js') }}" defer></script>
-    @endpush
-@endsection
+@endpush