Release dark mode!

src/app/components/elements/inputs/SchoolInput.tsx

@@ -1,7 +1,7 @@
 import React, {useCallback, useEffect, useState} from "react";
 import AsyncCreatableSelect from "react-select/async-creatable";
 import {School, ValidationUser} from "../../../../IsaacAppTypes";
-import {schoolNameWithPostcode, siteSpecific, validateUserSchool} from "../../../services";
+import {reactSelectDarkModeStyles, schoolNameWithPostcode, siteSpecific, validateUserSchool} from "../../../services";
 import throttle from "lodash/throttle";
 import classNames from "classnames";
 import {Immutable} from "immer";
@@ -128,6 +128,7 @@ export const SchoolInput = ({userToUpdate, setUserToUpdate, submissionAttempted,
                 loadOptions={searchSchoolsFn}
                 filterOption={() => true}
                 formatCreateLabel={(input) => `Use "${input}" as your school name`}
+                styles={reactSelectDarkModeStyles}
             />
         </React.Fragment>}
 

src/app/components/elements/panels/UserTheme.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import { DisplaySettings } from "../../../../IsaacAppTypes";
 import { MyAccountTab } from "./MyAccountTab";
-import { Label } from "reactstrap";
+import { Alert, Label } from "reactstrap";
 import { LightnessTheme, lightnessThemes, useLightnessTheme } from "../../../services/theme";
 import classNames from "classnames";
+import { Link } from "react-router-dom";
 
 interface UserThemeProps {
     setDisplaySettings: (ds: DisplaySettings | ((oldDs?: DisplaySettings) => DisplaySettings)) => void;
@@ -39,6 +40,12 @@ export const UserTheme = ({setDisplaySettings}: UserThemeProps) => {
                     onChange={() => setDisplaySettings?.(prev => ({...prev, DARK_MODE: theme.value === "dark"}))}
                 />)}
             </div>
+            <Alert color="warning" className="mt-4">
+                Please note that dark mode is a new and extensive feature and, as such, certain areas of the site may not yet be fully optimised for this theme. 
+                We also cannot guarantee e.g. AA accessibility compliance for dark mode at this time.
+                <br/><br/>
+                If you encounter any issues, particularly regarding legibility, please report them to us via the <Link to="/contact?subject=Dark%20mode%20issue">contact form</Link> for further investigation. Please include a link to the page containing the issue if possible.
+            </Alert>
         </>}
     />;
 };

src/app/components/elements/sidebar/MyAccountSidebar.tsx

@@ -3,7 +3,6 @@ import { ContentSidebarContext } from "../../../../IsaacAppTypes";
 import { ACCOUNT_TAB, ACCOUNT_TABS, ifKeyIsEnter } from "../../../services";
 import { StyledTabPicker } from "../inputs/StyledTabPicker";
 import { ContentSidebar, SidebarProps } from "../layout/SidebarLayout";
-import { FeatureFlag, useFeatureFlag } from "../../../services/featureFlag";
 
 interface MyAccountSidebarProps extends SidebarProps {
     editingOtherUser: boolean;
@@ -13,13 +12,11 @@ interface MyAccountSidebarProps extends SidebarProps {
 
 export const MyAccountSidebar = (props: MyAccountSidebarProps) => {
     const { editingOtherUser, activeTab, setActiveTab, ...rest } = props;
-    const isDarkModeFlag = useFeatureFlag(FeatureFlag.SCI_DARK_MODE);
     return <ContentSidebar buttonTitle="Account settings" data-testid="account-nav" {...rest}>
         <div className="section-divider mt-0"/>
         <h5>Account settings</h5>
         <ul>
             {ACCOUNT_TABS
-                .filter(tab => isDarkModeFlag || tab.tab !== ACCOUNT_TAB.theme)
                 .filter(tab => !tab.hidden && !(editingOtherUser && tab.hiddenIfEditingOtherUser))
                 .map(({tab, title}) => (
                     <li key={tab}>

src/app/services/constants.ts

@@ -1350,6 +1350,10 @@ export const reactSelectDarkModeStyles = siteSpecific({
         ...base,
         backgroundColor: "unset",
     }),
+    input: (base: CSSObjectWithLabel) => ({
+        ...base,
+        color: "var(--color-neutral-900)",
+    }),
     menu: (base: CSSObjectWithLabel) => ({
         ...base,
         backgroundColor: "var(--color-neutral-50)",

src/app/services/featureFlag.tsx

@@ -8,7 +8,6 @@ import { StyledTripleToggle } from "../components/elements/inputs/StyledMultiTog
 
 export enum FeatureFlag {
     _TEST_FEATURE = "_TEST_FEATURE", // used for testing; do not remove
-    SCI_DARK_MODE = "SCI_DARK_MODE",
     ASSIGNMENTS_V2 = "ASSIGNMENTS_V2",
 }
 
@@ -37,7 +36,6 @@ const useFlags = () : Record<FeatureFlag, boolean> => {
     return {
         // default values
         [FeatureFlag._TEST_FEATURE]: isNonProd,
-        [FeatureFlag.SCI_DARK_MODE]: false,
         [FeatureFlag.ASSIGNMENTS_V2]: false,
 
         // overrides

src/test/pages/MyAccount.cy.tsx

@@ -1,11 +1,10 @@
 import React from "react";
 import {mockUser} from "../../mocks/data";
 import { MyAccount } from "../../app/components/pages/MyAccount";
-import { ACCOUNT_TAB, ACCOUNT_TABS, isAda } from "../../app/services";
+import { ACCOUNT_TABS, isAda } from "../../app/services";
 
 describe("My Account", () => {
-    // TODO: Remove filter if/when we release dark mode beyond SCI_DARK_MODE
-    for (const tab of ACCOUNT_TABS.filter(tab => !(tab.tab === ACCOUNT_TAB.theme))) {
+    for (const tab of ACCOUNT_TABS) {
         if (!tab.hidden) {
             it(`should have no visual regressions on ${tab.title} page`, () => {
                 cy.mountWithStoreAndRouter(<MyAccount user={mockUser}/>, ["/account"]);