diff --git a/src/app/components/elements/inputs/SchoolInput.tsx b/src/app/components/elements/inputs/SchoolInput.tsx
index e955cdd0e7..a95439de26 100644
--- a/src/app/components/elements/inputs/SchoolInput.tsx
+++ b/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}
/>
}
diff --git a/src/app/components/elements/panels/UserTheme.tsx b/src/app/components/elements/panels/UserTheme.tsx
index 3461c90906..821ee04425 100644
--- a/src/app/components/elements/panels/UserTheme.tsx
+++ b/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"}))}
/>)}
+
+ 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.
+
+ If you encounter any issues, particularly regarding legibility, please report them to us via the contact form for further investigation. Please include a link to the page containing the issue if possible.
+
>}
/>;
};
diff --git a/src/app/components/elements/sidebar/MyAccountSidebar.tsx b/src/app/components/elements/sidebar/MyAccountSidebar.tsx
index a1e84d1de4..7becbb8d1e 100644
--- a/src/app/components/elements/sidebar/MyAccountSidebar.tsx
+++ b/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