Files
Verso/services/web/frontend/js/features/editor-left-menu/hooks/use-set-overall-theme.tsx
T
Rebeka DekanyandCopybot 69bc8a135b Bootstrap 3 cleanup from the IDE page - #2 (#24175)
* Remove skipLoadingStyleSheet

* Remove unused bootstrap-5 assignment from the Account settings page since it's archived

* Remove bsVersionIcon

* Remove bsVersion, bootstrapVersion and isBootstrap5 from elements on the IDE page

* Remove BS3Dropdown from the context menu

* Cleanup Bootstrap 3 related comment and type

GitOrigin-RevId: a67244eb78943ee84cc5f89bae164c0361e8fc13
2025-03-11 09:05:00 +00:00

44 lines
1.4 KiB
TypeScript

import { useCallback, useEffect } from 'react'
import _ from 'lodash'
import { saveUserSettings } from '../utils/api'
import { UserSettings } from '../../../../../types/user-settings'
import { useUserSettingsContext } from '@/shared/context/user-settings-context'
import getMeta from '@/utils/meta'
import { isIEEEBranded } from '@/utils/is-ieee-branded'
export default function useSetOverallTheme() {
const { userSettings, setUserSettings } = useUserSettingsContext()
const { overallTheme } = userSettings
const setOverallTheme = useCallback(
(overallTheme: UserSettings['overallTheme']) => {
setUserSettings(settings => ({ ...settings, overallTheme }))
},
[setUserSettings]
)
useEffect(() => {
// Sets the body's data-theme attribute for theming
const theme =
overallTheme === 'light-' && !isIEEEBranded() ? 'light' : 'default'
document.body.dataset.theme = theme
}, [overallTheme])
return useCallback(
(newOverallTheme: UserSettings['overallTheme']) => {
if (overallTheme !== newOverallTheme) {
const chosenTheme = _.find(
getMeta('ol-overallThemes'),
theme => theme.val === newOverallTheme
)
if (chosenTheme) {
setOverallTheme(newOverallTheme)
saveUserSettings('overallTheme', newOverallTheme)
}
}
},
[overallTheme, setOverallTheme]
)
}