diff --git a/specifyweb/frontend/js_src/css/main.css b/specifyweb/frontend/js_src/css/main.css index 1cd3266028e..43207039726 100644 --- a/specifyweb/frontend/js_src/css/main.css +++ b/specifyweb/frontend/js_src/css/main.css @@ -17,10 +17,12 @@ body.dark { color-scheme: dark; + @apply text-white; } body:not(.dark) { color-scheme: light; + @apply text-black; } body.no-rounded-corners *:not(.rounded-full) { @@ -101,7 +103,7 @@ [type='checkbox'], [type='radio'] { - @apply text-brand-200 dark:text-brand-400 cursor-pointer focus:border-none focus:!ring-2 + @apply text-brand-300 dark:text-brand-400 cursor-pointer focus:border-none focus:!ring-2 focus:!ring-offset-0; } @@ -192,7 +194,7 @@ } .icon { - @apply active:bg-brand-100 dark:active:bg-brand-500 + @apply active:bg-brand-100 dark:active:bg-brand-400 disabled:!cursor-not-allowed disabled:!text-gray-400 disabled:hover:!text-gray-400 disabled:dark:!text-neutral-600 disabled:hover:dark:!text-neutral-600; diff --git a/specifyweb/frontend/js_src/css/workbench.css b/specifyweb/frontend/js_src/css/workbench.css index 52f14c4859d..fc645696a2d 100644 --- a/specifyweb/frontend/js_src/css/workbench.css +++ b/specifyweb/frontend/js_src/css/workbench.css @@ -161,7 +161,7 @@ } .htCommentTextArea { - @apply cursor-auto dark:border-none dark:bg-neutral-800 dark:text-white; + @apply cursor-auto dark:border-none dark:bg-neutral-800 dark:text-white bg-black; } .htCommentCell:after { diff --git a/specifyweb/frontend/js_src/lib/components/AppResources/__tests__/__snapshots__/AppResourceDownload.test.tsx.snap b/specifyweb/frontend/js_src/lib/components/AppResources/__tests__/__snapshots__/AppResourceDownload.test.tsx.snap index f45483f7faa..c490e0bdae3 100644 --- a/specifyweb/frontend/js_src/lib/components/AppResources/__tests__/__snapshots__/AppResourceDownload.test.tsx.snap +++ b/specifyweb/frontend/js_src/lib/components/AppResources/__tests__/__snapshots__/AppResourceDownload.test.tsx.snap @@ -5,7 +5,7 @@ exports[`AppResourceDownload simple render 1`] = `
) : null diff --git a/specifyweb/frontend/js_src/lib/components/Core/SplashScreen.tsx b/specifyweb/frontend/js_src/lib/components/Core/SplashScreen.tsx index 56748d18d48..148061b9a5b 100644 --- a/specifyweb/frontend/js_src/lib/components/Core/SplashScreen.tsx +++ b/specifyweb/frontend/js_src/lib/components/Core/SplashScreen.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { useHueDifference } from '../../hooks/useHueDifference'; import { commonText } from '../../localization/common'; +import { useDarkMode } from '../Preferences/Hooks'; export function SplashScreen({ children, @@ -9,6 +10,7 @@ export function SplashScreen({ readonly children: React.ReactNode; }): JSX.Element { const hueDifference = useHueDifference(); + const isDarkMode = useDarkMode(); return (
@@ -27,7 +29,7 @@ export function SplashScreen({
diff --git a/specifyweb/frontend/js_src/lib/components/Forms/SubView.tsx b/specifyweb/frontend/js_src/lib/components/Forms/SubView.tsx index 72685a9e5b9..a71caf19b66 100644 --- a/specifyweb/frontend/js_src/lib/components/Forms/SubView.tsx +++ b/specifyweb/frontend/js_src/lib/components/Forms/SubView.tsx @@ -156,7 +156,7 @@ export function SubView({ ? '!ring-brand-300 dark:!ring-brand-400 ring-2 dark:!ring-2' : '' } - ${isOpen ? '!bg-brand-300 dark:!bg-brand-500' : ''}`} + ${isOpen ? '!bg-brand-400 dark:!bg-brand-400' : ''}`} title={relationship.label} onClick={handleToggle} > diff --git a/specifyweb/frontend/js_src/lib/components/Header/ExpressSearchTask.tsx b/specifyweb/frontend/js_src/lib/components/Header/ExpressSearchTask.tsx index e6dd2880290..d6ded3dd0a0 100644 --- a/specifyweb/frontend/js_src/lib/components/Header/ExpressSearchTask.tsx +++ b/specifyweb/frontend/js_src/lib/components/Header/ExpressSearchTask.tsx @@ -229,7 +229,7 @@ function TableResult({
diff --git a/specifyweb/frontend/js_src/lib/components/Header/Logo.tsx b/specifyweb/frontend/js_src/lib/components/Header/Logo.tsx index 9458f6e4128..c6a30634020 100644 --- a/specifyweb/frontend/js_src/lib/components/Header/Logo.tsx +++ b/specifyweb/frontend/js_src/lib/components/Header/Logo.tsx @@ -17,6 +17,7 @@ export function Logo({ 'appearance', 'customLogoCollapsed' ); + const [isSideBarLight] = userPreferences.use('general', 'ui', 'sidebarTheme'); const hueDifference = useHueDifference(); return ( @@ -36,7 +37,11 @@ export function Logo({ hover:animate-hue-rotate ${isCollapsed ? 'hidden' : ''} `} - src="/static/img/logo.svg" + src={ + isSideBarLight === 'light' + ? '/static/img/logo_dark.svg' + : '/static/img/logo.svg' + } style={{ filter: `hue-rotate(${hueDifference}deg)` }} /> @@ -213,7 +214,7 @@ export function MenuButton({ p-[1.4vh] ${ isActive - ? 'bg-brand-300 !text-white' + ? 'bg-brand-400 !text-white' : isSideBarDark ? 'text-white' : 'text-gray-700' diff --git a/specifyweb/frontend/js_src/lib/components/HomePage/index.tsx b/specifyweb/frontend/js_src/lib/components/HomePage/index.tsx index ce31c82e59c..77b3871a6ab 100644 --- a/specifyweb/frontend/js_src/lib/components/HomePage/index.tsx +++ b/specifyweb/frontend/js_src/lib/components/HomePage/index.tsx @@ -6,7 +6,8 @@ import { commonText } from '../../localization/common'; import { welcomeText } from '../../localization/welcome'; import { Submit } from '../Atoms/Submit'; import { SearchForm } from '../Header/ExpressSearchTask'; -import { defaultWelcomePageImage } from '../Preferences/Renderers'; +import { getDefaultWelcomePageImage } from '../Preferences/Renderers'; +import { useDarkMode } from '../Preferences/Hooks'; import { userPreferences } from '../Preferences/userPreferences'; import { ReactLazy } from '../Router/ReactLazy'; @@ -73,17 +74,24 @@ function WelcomeScreenContent(): JSX.Element { function DefaultSplashScreen(): JSX.Element { const hueDifference = useHueDifference(); + const isDarkMode = useDarkMode(); return (
- {/* The two following gradients in the divs are here to apply a fade out effect on the image */} + {/* The following gradients in the divs are here to apply a fade out effect on the image */} + {/* Left fade */}
+ {/* Right fade */}
+ {/* Top fade */} +
+ {/* Bottom fade */} +
); } diff --git a/specifyweb/frontend/js_src/lib/components/Molecules/AutoComplete.tsx b/specifyweb/frontend/js_src/lib/components/Molecules/AutoComplete.tsx index 3bbd1a6bea0..cf3efbe00d3 100644 --- a/specifyweb/frontend/js_src/lib/components/Molecules/AutoComplete.tsx +++ b/specifyweb/frontend/js_src/lib/components/Molecules/AutoComplete.tsx @@ -43,7 +43,7 @@ const getScrollParent = (node: Element | undefined): Element => : getScrollParent(node.parentElement ?? undefined); const optionClassName = (isActive: boolean, isSelected: boolean) => ` - p-0.5 active:bg-brand-100 dark:active:bg-brand-500 + p-0.5 active:bg-brand-100 dark:active:bg-brand-400 disabled:cursor-default rounded ${isSelected ? 'text-brand-300' : ''} ${isActive ? 'bg-gray-100 dark:bg-neutral-800' : ''} `; diff --git a/specifyweb/frontend/js_src/lib/components/Molecules/Dialog.tsx b/specifyweb/frontend/js_src/lib/components/Molecules/Dialog.tsx index 238058c94d4..062df72597c 100644 --- a/specifyweb/frontend/js_src/lib/components/Molecules/Dialog.tsx +++ b/specifyweb/frontend/js_src/lib/components/Molecules/Dialog.tsx @@ -514,7 +514,7 @@ export function Dialog({ >
{resolvedIcon === undefined ? undefined : ( - {resolvedIcon} + {resolvedIcon} )}

{header} diff --git a/specifyweb/frontend/js_src/lib/components/Molecules/index.tsx b/specifyweb/frontend/js_src/lib/components/Molecules/index.tsx index b891bd4e4b6..2e184c4e572 100644 --- a/specifyweb/frontend/js_src/lib/components/Molecules/index.tsx +++ b/specifyweb/frontend/js_src/lib/components/Molecules/index.tsx @@ -35,7 +35,7 @@ export const loadingBar = (
diff --git a/specifyweb/frontend/js_src/lib/components/Preferences/ApplyPreferences.tsx b/specifyweb/frontend/js_src/lib/components/Preferences/ApplyPreferences.tsx index 53fe05f9811..3bc6cdf3e06 100644 --- a/specifyweb/frontend/js_src/lib/components/Preferences/ApplyPreferences.tsx +++ b/specifyweb/frontend/js_src/lib/components/Preferences/ApplyPreferences.tsx @@ -105,11 +105,6 @@ export function SetCssVariables(): null { 'appearance', 'accentColor4' ), - accentColor5: userPreferences.get( - 'general', - 'appearance', - 'accentColor5' - ), saveButtonColor: userPreferences.get( 'general', darkMode ? 'buttonDark' : 'buttonLight', @@ -264,12 +259,6 @@ export function SetCssVariables(): null { [prefs.accentColor4] ); - React.useEffect( - () => - document.body.style.setProperty('--accent-color-500', prefs.accentColor5), - [prefs.accentColor5] - ); - React.useEffect( () => document.body.style.setProperty( diff --git a/specifyweb/frontend/js_src/lib/components/Preferences/Renderers.tsx b/specifyweb/frontend/js_src/lib/components/Preferences/Renderers.tsx index a1d25e5ff3e..3ca38acdb82 100644 --- a/specifyweb/frontend/js_src/lib/components/Preferences/Renderers.tsx +++ b/specifyweb/frontend/js_src/lib/components/Preferences/Renderers.tsx @@ -234,7 +234,12 @@ export type WelcomePageMode = | 'default' | 'embeddedWebpage' | 'taxonTiles'; -export const defaultWelcomePageImage = '/static/img/splash_screen.svg'; + +export function getDefaultWelcomePageImage(isDarkMode: boolean): string { + return isDarkMode + ? '/static/img/splash_screen_dark.svg' + : '/static/img/splash_screen.svg'; +} const welcomePageModes: PreferenceItem = { title: preferencesText.content(), requiresReload: false, diff --git a/specifyweb/frontend/js_src/lib/components/Preferences/UserDefinitions.tsx b/specifyweb/frontend/js_src/lib/components/Preferences/UserDefinitions.tsx index 9b3b997ed3b..314b8243482 100644 --- a/specifyweb/frontend/js_src/lib/components/Preferences/UserDefinitions.tsx +++ b/specifyweb/frontend/js_src/lib/components/Preferences/UserDefinitions.tsx @@ -344,7 +344,7 @@ export const userPreferenceDefinitions = { title: preferencesText.accentColor1(), requiresReload: false, visible: true, - defaultValue: '#ffcda3', + defaultValue: '#d4d8bf', renderer: ColorPickerPreferenceItem, container: 'label', }), @@ -352,7 +352,7 @@ export const userPreferenceDefinitions = { title: preferencesText.accentColor2(), requiresReload: false, visible: true, - defaultValue: '#ff9742', + defaultValue: '#a4af83', renderer: ColorPickerPreferenceItem, container: 'label', }), @@ -360,7 +360,7 @@ export const userPreferenceDefinitions = { title: preferencesText.accentColor3(), requiresReload: false, visible: true, - defaultValue: '#ff811a', + defaultValue: '#74914A', renderer: ColorPickerPreferenceItem, container: 'label', }), @@ -368,15 +368,7 @@ export const userPreferenceDefinitions = { title: preferencesText.accentColor4(), requiresReload: false, visible: true, - defaultValue: '#d15e00', - renderer: ColorPickerPreferenceItem, - container: 'label', - }), - accentColor5: definePref({ - title: preferencesText.accentColor5(), - requiresReload: false, - visible: true, - defaultValue: '#703200', + defaultValue: '#598137', renderer: ColorPickerPreferenceItem, container: 'label', }), @@ -396,7 +388,7 @@ export const userPreferenceDefinitions = { title: preferencesText.saveButtonColor(), requiresReload: false, visible: isLightMode, - defaultValue: '#ff811a', + defaultValue: '#598137', renderer: ColorPickerPreferenceItem, container: 'label', }), @@ -412,7 +404,7 @@ export const userPreferenceDefinitions = { title: preferencesText.warningButtonColor(), requiresReload: false, visible: isLightMode, - defaultValue: '#f97316', + defaultValue: '#598137', renderer: ColorPickerPreferenceItem, container: 'label', }), @@ -420,7 +412,7 @@ export const userPreferenceDefinitions = { title: preferencesText.infoButtonColor(), requiresReload: false, visible: isLightMode, - defaultValue: '#1d4ed8', + defaultValue: '#0074B5', renderer: ColorPickerPreferenceItem, container: 'label', }), @@ -428,7 +420,7 @@ export const userPreferenceDefinitions = { title: preferencesText.successButtonColor(), requiresReload: false, visible: isLightMode, - defaultValue: '#166534', + defaultValue: '#596c32', renderer: ColorPickerPreferenceItem, container: 'label', }), @@ -457,7 +449,7 @@ export const userPreferenceDefinitions = { title: preferencesText.saveButtonColor(), requiresReload: false, visible: isDarkMode, - defaultValue: '#ff811a', + defaultValue: '#77AA49', renderer: ColorPickerPreferenceItem, container: 'label', }), @@ -473,7 +465,7 @@ export const userPreferenceDefinitions = { title: preferencesText.warningButtonColor(), requiresReload: false, visible: isDarkMode, - defaultValue: '#f97316', + defaultValue: '#77AA49', renderer: ColorPickerPreferenceItem, container: 'label', }), @@ -481,7 +473,7 @@ export const userPreferenceDefinitions = { title: preferencesText.infoButtonColor(), requiresReload: false, visible: isDarkMode, - defaultValue: '#1d4ed8', + defaultValue: '#0074B5', renderer: ColorPickerPreferenceItem, container: 'label', }), diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Edit.tsx b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Edit.tsx index 11c2a5b9e95..8f96b00da26 100644 --- a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Edit.tsx +++ b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Edit.tsx @@ -205,11 +205,13 @@ function QueryExport({ } > setName(value)} /> diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/FieldFilterSpec.tsx b/specifyweb/frontend/js_src/lib/components/QueryBuilder/FieldFilterSpec.tsx index 271bb2c1bcc..dbeee8416a3 100644 --- a/specifyweb/frontend/js_src/lib/components/QueryBuilder/FieldFilterSpec.tsx +++ b/specifyweb/frontend/js_src/lib/components/QueryBuilder/FieldFilterSpec.tsx @@ -208,8 +208,10 @@ export function QueryInputField({ // The :after pseudo element sets the width data-value={value} > - {/* This invisible input is used to set the height */} - + {/* This invisible element is used only to set height */} + +   + diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx index 7925fc32b19..131ceeffe90 100644 --- a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx +++ b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx @@ -180,7 +180,7 @@ function FormatSelect({ ) : showSingular || availableFormatters.length > 1 ? ( <> ( + count: (_displaySize) => ( { @@ -156,9 +166,19 @@ function DateSplit({ }} /> ), - length: (type) => ( + length: (_displayType) => ( ), - direction: (direction) => ( + direction: (_displayDirection) => (