[WIP] Dark mode

src/components/Assignments/SolutionsTable/SolutionsTable.less

@@ -21,3 +21,13 @@ table.solutionsTable td.noteRow {
 table.solutionsTable tbody:hover td {
   background-color: #f4f4f4;
 }
+
+[data-bs-theme=dark] {
+  table.solutionsTable tbody {
+    border-top: 1px solid var(--bs-card-border-color);
+  }
+
+  table.solutionsTable tbody:hover td {
+    background-color: var(--bs-secondary-bg);
+  }
+}

src/components/Groups/ResultsTable/ResultsTable.less

@@ -22,11 +22,20 @@
 }
 
 .bonusPoints {
-  color: green;
+  color: var(--bs-success);
 }
 
 .malusPoints {
-  color: red;
+  color: var(--bs-danger);
+}
+
+[data-bs-theme="dark"] {
+  .bonusPoints {
+    color: var(--bs-success-text-emphasis);
+  }
+  .malusPoints {
+    color: var(--bs-danger-text-emphasis);
+  }
 }
 
 .maxPointsRow {

src/components/forms/EditExerciseSimpleConfigForm/EditExerciseSimpleConfigForm.css

@@ -5,14 +5,26 @@
   border-bottom: 2px solid #ddd;
 }
 
+[data-bs-theme=dark] .configRow {
+  border-bottom: 2px solid var(--bs-secondary-border-subtle);
+}
+
 .configRow:nth-child(1) {
   background-color: #f4fcf4 !important;
 }
 
+[data-bs-theme=dark] .configRow:nth-child(1) {
+  background-color: #2b352c !important;
+}
+
 .configRow:nth-child(odd) {
   background-color: #F9F9F9;
 }
 
+[data-bs-theme=dark] .configRow:nth-child(odd) {
+  background-color: var(--bs-tertiary-bg);
+}
+
 .compilation {
   overflow: auto;
 }

src/components/forms/EditUserUIDataForm/EditUserUIDataForm.js

@@ -10,6 +10,7 @@
 import Explanation from '../../widgets/Explanation';
 import SubmitButton from '../SubmitButton';
 import { CheckboxField, SelectField, NumericTextField } from '../Fields';
+import OnOffCheckbox from '../OnOffCheckbox';
 
 const defaultPagesCaptions = defineMessages({
   dashboard: {

src/components/helpers/SourceCodeViewer/SourceCodeViewer.css

@@ -156,3 +156,61 @@ pre .sourceCodeViewerComments, code .sourceCodeViewerComments {
 .sourceCodeViewer.addComment .scvAddButton:hover::before {
   opacity: 1;
 }
+
+[data-bs-theme=dark] {
+  .sourceCodeViewer span[data-line] .linenumber {
+    background-color: #2b3035;
+    color: #b0b0b0;
+  }
+
+  .sourceCodeViewer span[data-line]:hover, .sourceCodeViewer span[data-line]:hover * {
+    background-color: #2b3035;
+  }
+
+  .sourceCodeViewer span[data-line]:hover .linenumber {
+    background-color: #343a40;
+  }
+
+  .sourceCodeViewer span[data-line-active] {
+    background-color: #333c1a;
+  }
+
+  .sourceCodeViewer span[data-line-active] .linenumber {
+    background-color: #495c1a;
+  }
+
+  .sourceCodeViewer span[data-line-active]:hover, .sourceCodeViewer span[data-line-active]:hover * {
+    background-color: #3d4420;
+  }
+
+  .sourceCodeViewer span[data-line-active]:hover .linenumber {
+    background-color: #5a6b1a;
+  }
+
+  .sourceCodeViewerComments {
+    background-color: #2b3035;
+  }
+
+  .sourceCodeViewerComments > div {
+    border: 1px solid #343a40;
+    background-color: var(--bs-card-bg);
+  }
+
+  .sourceCodeViewerComments > div.issue {
+    background-color: #3a2323;
+  }
+
+  .sourceCodeViewerComments > div.commentForm {
+    background-color: #23271a;
+  }
+
+  /* Markdown overrides */
+
+  .sourceCodeViewerComments > div > .recodex-markdown-container {
+    border-top: 1px solid #343a40;
+  }
+
+  .sourceCodeViewerComments > div.issue > .recodex-markdown-container {
+    border-top-color: #4a2a2a;
+  }
+}

src/components/helpers/SourceCodeViewer/SourceCodeViewer.js

@@ -2,12 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Prism as SyntaxHighlighter, createElement } from 'react-syntax-highlighter';
 import { lruMemoize } from 'reselect';
-import { vs } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import 'prismjs/themes/prism.css';
+import { prism, okaidia } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
 import ReviewCommentForm, { newCommentFormInitialValues } from '../../forms/ReviewCommentForm';
 import { getPrismModeFromExtension } from '../../helpers/syntaxHighlighting.js';
 import { getFileExtensionLC, canUseDOM } from '../../../helpers/common.js';
+import { UserUIDataContext } from '../../../helpers/contexts.js';
 
 import SourceCodeComment from './SourceCodeComment.js';
 import './SourceCodeViewer.css';
@@ -161,19 +161,23 @@ class SourceCodeViewer extends React.Component {
   render() {
     const { name, content = '', addComment } = this.props;
     return canUseDOM ? (
-      <SyntaxHighlighter
-        language={getPrismModeFromExtension(getFileExtensionLC(name))}
-        style={vs}
-        className={addComment && !this.state.activeLine ? 'sourceCodeViewer addComment' : 'sourceCodeViewer'}
-        showLineNumbers={true}
-        showInlineLineNumbers={true}
-        wrapLines={true}
-        wrapLongLines={false}
-        useInlineStyles={false}
-        lineProps={this.linePropsGenerator}
-        renderer={this.linesRenderer}>
-        {content}
-      </SyntaxHighlighter>
+      <UserUIDataContext.Consumer>
+        {({ darkTheme = false }) => (
+          <SyntaxHighlighter
+            language={getPrismModeFromExtension(getFileExtensionLC(name))}
+            style={darkTheme ? okaidia : prism}
+            className={addComment && !this.state.activeLine ? 'sourceCodeViewer addComment' : 'sourceCodeViewer'}
+            showLineNumbers={true}
+            showInlineLineNumbers={true}
+            wrapLines={true}
+            wrapLongLines={false}
+            useInlineStyles={true}
+            lineProps={this.linePropsGenerator}
+            renderer={this.linesRenderer}
+            customStyle={{ padding: '0em', margin: '0em', lineHeight: '1.2', background: 'none', fontSize: '0.9em' }}>
+            {content}
+          </SyntaxHighlighter>)}
+      </UserUIDataContext.Consumer>
     ) : (
       <></>
     );

src/components/layout/Layout/Layout.js

@@ -21,8 +21,10 @@ const Layout = ({
   relatedGroupId,
   memberGroups,
   fetchManyGroupsStatus,
-}) => (
-  <div className="app-wrapper overflow-visible">
+  colorTheme,
+}) => {
+  return (
+  <div className="app-wrapper overflow-visible text-body bg-body" data-bs-theme={colorTheme}>
     <Helmet defaultTitle={`${title}`} titleTemplate={`%s | ${title}`} />
     <Header
       isLoggedIn={isLoggedIn}
@@ -39,6 +41,7 @@ const Layout = ({
     <Footer version={process.env.VERSION} />
   </div>
 );
+};
 
 Layout.propTypes = {
   isLoggedIn: PropTypes.bool,
@@ -52,6 +55,7 @@ Layout.propTypes = {
   relatedGroupId: PropTypes.string,
   memberGroups: PropTypes.object.isRequired,
   fetchManyGroupsStatus: PropTypes.string,
+  colorTheme: PropTypes.string,
 };
 
 export default Layout;

src/components/layout/Navigation/Navigation.less

@@ -34,3 +34,7 @@
   color: var(--success);
   text-shadow: 0.1rem 0.1rem 0.3rem #aaa;
 }
+
+[data-bs-theme=dark] .links > strong {
+  text-shadow: 0.1rem 0.1rem 0.3rem #666;
+}

src/components/layout/PageContent/PageContent.js

@@ -27,7 +27,7 @@ const PageContent = ({ intl: { formatMessage }, title = '', windowTitle = null,
       <Helmet title={getMessage(windowTitle || title, formatMessage)} />
       {(title || icon) && (
         <div className="app-content-header">
-          <h1 className="m-0 px-3 text-dark h3">
+          <h1 className="m-0 px-3 text-body h3">
             {icon && (
               <span className="me-3 text-body-secondary">{typeof icon === 'string' ? <Icon icon={icon} /> : icon}</span>
             )}

src/components/widgets/Box/Box.js

@@ -59,7 +59,7 @@ class Box extends Component {
       title,
       flexTitle = false,
       description = null,
-      type = 'light',
+      type = null,
       solid = false,
       collapsable = false,
       noPadding = false,

src/components/widgets/InsetPanel/InsetPanel.less

@@ -14,6 +14,11 @@
 
 }
 
+[data-bs-theme=dark] .insetPanel {
+  background-color: var(--bs-secondary-bg);
+  border: 1px solid var(--bs-secondary-border-subtle);
+}
+
 .large {
   padding: 24px;
   border-radius: 5px;

src/containers/App/recodex.css

@@ -128,6 +128,10 @@ table.table.tbody-hover tbody:hover th.selected {
   background-color: rgba(128, 128, 128, 0.1);
   padding: 0.5rem;
 }
+[data-bs-theme=dark] .recodex-markdown-container pre {
+  border: 1px solid var(--bs-secondary-border-subtle);
+  background-color: var(--bs-secondary-bg);
+}
 
 /*
  * AdminLTE Enhancements and Overrides
@@ -259,15 +263,23 @@ a:focus {
  * Bootstrap Enhancements
  */
 code {
-  color: #072;
+  color: var(--success);
+}
+
+[data-bs-theme=dark] code {
+  color: var(--bs-success-text-emphasis);
 }
 
 .recodex-markdown-container code {
   white-space: pre-wrap;
 }
 
 .recodex-markdown-container code:not(pre > code) {
-  color: #072;
+  color: var(--success);
+}
+
+[data-bs-theme=dark] .recodex-markdown-container code:not(pre > code) {
+  color: var(--bs-success-text-emphasis);
 }
 
 .wider-tooltip {

src/containers/LayoutContainer/LayoutContainer.js

@@ -125,7 +125,8 @@ class LayoutContainer extends Component {
                 pendingFetchOperations={pendingFetchOperations}
                 relatedGroupId={relatedGroupId}
                 memberGroups={memberGroups}
-                fetchManyGroupsStatus={fetchManyGroupsStatus}>
+                fetchManyGroupsStatus={fetchManyGroupsStatus}
+                colorTheme={userUIData.darkTheme ? 'dark' : 'light' /* TODO: we might want to add a new option for global color theme, 'darkTheme' was originally used only for text editors */}>
                 {buildRoutes(pathname + search, isLoggedIn)}
               </Layout>
             </UrlContext.Provider>

src/containers/SisSupervisorGroupsContainer/SisSupervisorGroupsContainer.js

@@ -250,7 +250,7 @@ class SisSupervisorGroupsContainer extends Component {
                                         ) || a.course.code.localeCompare(b.course.code, locale)
                                     )
                                     .map(course => (
-                                      <Card key={course.course.code} className="card-light mb-3">
+                                      <Card key={course.course.code} className="mb-3">
                                         <Card.Header>
                                           <MyAccordionButton eventKey={course.course.code}>
                                             {course && (