diff --git a/client/branded/src/components/panel/TabbedPanelContent.fixtures.ts b/client/branded/src/components/panel/TabbedPanelContent.fixtures.ts
index b9560854dd90..1c1a4d94fe4e 100644
--- a/client/branded/src/components/panel/TabbedPanelContent.fixtures.ts
+++ b/client/branded/src/components/panel/TabbedPanelContent.fixtures.ts
@@ -25,7 +25,6 @@ export const panels: Panel[] = [
 export const panelProps: React.ComponentPropsWithoutRef<typeof TabbedPanelContent> = {
     repoName: 'git://github.com/foo/bar',
     fetchHighlightedFileLineRanges: () => of([]),
-    isLightTheme: true,
     platformContext: {} as any,
     settingsCascade: { subjects: null, final: null },
     telemetryService: NOOP_TELEMETRY_SERVICE,
diff --git a/client/branded/src/components/panel/TabbedPanelContent.tsx b/client/branded/src/components/panel/TabbedPanelContent.tsx
index c474bfaa9b4c..5ac9685c3aff 100644
--- a/client/branded/src/components/panel/TabbedPanelContent.tsx
+++ b/client/branded/src/components/panel/TabbedPanelContent.tsx
@@ -10,7 +10,6 @@ import { FetchFileParameters } from '@sourcegraph/shared/src/backend/file'
 import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
 import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import {
     Button,
     useObservable,
@@ -29,7 +28,7 @@ import { EmptyPanelView } from './views/EmptyPanelView'
 
 import styles from './TabbedPanelContent.module.scss'
 
-interface TabbedPanelContentProps extends PlatformContextProps, SettingsCascadeProps, TelemetryProps, ThemeProps {
+interface TabbedPanelContentProps extends PlatformContextProps, SettingsCascadeProps, TelemetryProps {
     repoName?: string
     fetchHighlightedFileLineRanges: (parameters: FetchFileParameters, force?: boolean) => Observable<string[][]>
 }
diff --git a/client/branded/src/search-ui/input/CodeMirrorQueryInput.tsx b/client/branded/src/search-ui/input/CodeMirrorQueryInput.tsx
index de5f24d4c016..2bf417801f15 100644
--- a/client/branded/src/search-ui/input/CodeMirrorQueryInput.tsx
+++ b/client/branded/src/search-ui/input/CodeMirrorQueryInput.tsx
@@ -28,7 +28,7 @@ import { Filter } from '@sourcegraph/shared/src/search/query/token'
 import { appendContextFilter } from '@sourcegraph/shared/src/search/query/transformer'
 import { fetchStreamSuggestions as defaultFetchStreamSuggestions } from '@sourcegraph/shared/src/search/suggestions'
 import { RecentSearch } from '@sourcegraph/shared/src/settings/temporary/recentSearches'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
+import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
 import { isInputElement } from '@sourcegraph/shared/src/util/dom'
 
 import { createDefaultSuggestions, singleLine } from './codemirror'
@@ -93,7 +93,6 @@ export const CodeMirrorMonacoFacade: React.FunctionComponent<CodeMirrorQueryInpu
     globbing,
     onEditorCreated,
     interpretComments,
-    isLightTheme,
     className,
     preventNewLine = true,
     placeholder,
@@ -296,7 +295,6 @@ export const CodeMirrorMonacoFacade: React.FunctionComponent<CodeMirrorQueryInpu
     return (
         <>
             <CodeMirrorQueryInput
-                isLightTheme={isLightTheme}
                 onEditorCreated={editorCreated}
                 patternType={patternType}
                 interpretComments={interpretComments}
@@ -313,7 +311,7 @@ export const CodeMirrorMonacoFacade: React.FunctionComponent<CodeMirrorQueryInpu
 
 const EMPTY: any[] = []
 
-interface CodeMirrorQueryInputProps extends ThemeProps, SearchPatternTypeProps {
+interface CodeMirrorQueryInputProps extends SearchPatternTypeProps {
     value: string
     onEditorCreated?: (editor: EditorView) => void
     // Whether comments are parsed and highlighted
@@ -327,12 +325,14 @@ interface CodeMirrorQueryInputProps extends ThemeProps, SearchPatternTypeProps {
  * theming, syntax highlighting and token info.
  */
 export const CodeMirrorQueryInput: React.FunctionComponent<CodeMirrorQueryInputProps> = React.memo(
-    ({ isLightTheme, onEditorCreated, patternType, interpretComments, value, className, extensions = EMPTY }) => {
+    ({ onEditorCreated, patternType, interpretComments, value, className, extensions = EMPTY }) => {
         // This is using state instead of a ref because `useRef` doesn't cause a
         // re-render when the ref is attached, but we need that so that
         // `useCodeMirror` is called again and the editor is actually created.
         // See https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node
         const [container, setContainer] = useState<HTMLDivElement | null>(null)
+        const isLightTheme = useIsLightTheme()
+
         const externalExtensions = useMemo(() => new Compartment(), [])
         const themeExtension = useMemo(() => new Compartment(), [])
 
diff --git a/client/branded/src/search-ui/input/QueryInput.ts b/client/branded/src/search-ui/input/QueryInput.ts
index ebee7199af8c..c3b559fdfa66 100644
--- a/client/branded/src/search-ui/input/QueryInput.ts
+++ b/client/branded/src/search-ui/input/QueryInput.ts
@@ -5,7 +5,6 @@ import {
     SearchPatternTypeProps,
 } from '@sourcegraph/shared/src/search'
 import { fetchStreamSuggestions as defaultFetchStreamSuggestions } from '@sourcegraph/shared/src/search/suggestions'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 
 import { IEditor } from './LazyQueryInput'
 
@@ -13,8 +12,7 @@ import { IEditor } from './LazyQueryInput'
  * Props that the Monaco and CodeMirror implementation have in common.
  */
 export interface QueryInputProps
-    extends ThemeProps,
-        Pick<CaseSensitivityProps, 'caseSensitive'>,
+    extends Pick<CaseSensitivityProps, 'caseSensitive'>,
         SearchPatternTypeProps,
         Pick<SearchContextProps, 'selectedSearchContextSpec'> {
     isSourcegraphDotCom: boolean // Needed for query suggestions to give different options on dotcom; see SOURCEGRAPH_DOT_COM_REPO_COMPLETION
diff --git a/client/branded/src/search-ui/input/SearchBox.story.tsx b/client/branded/src/search-ui/input/SearchBox.story.tsx
index 79e0a32adbba..26b19c630193 100644
--- a/client/branded/src/search-ui/input/SearchBox.story.tsx
+++ b/client/branded/src/search-ui/input/SearchBox.story.tsx
@@ -28,7 +28,6 @@ const defaultProps: SearchBoxProps = {
         final: null,
         subjects: null,
     },
-    isLightTheme: false,
     globbing: false,
     queryState: { query: 'hello repo:test' },
     isSourcegraphDotCom: false,
@@ -57,40 +56,27 @@ export const SearchBoxStory: Story = () => (
             <div>
                 <H2>Default</H2>
                 <div className="w-100 d-flex my-2">
-                    <SearchBox {...defaultProps} isLightTheme={props.isLightTheme} />
+                    <SearchBox {...defaultProps} />
                 </div>
 
                 <H2>Regexp enabled</H2>
                 <div className="w-100 d-flex my-2">
-                    <SearchBox
-                        {...defaultProps}
-                        patternType={SearchPatternType.regexp}
-                        isLightTheme={props.isLightTheme}
-                    />
+                    <SearchBox {...defaultProps} patternType={SearchPatternType.regexp} />
                 </div>
 
                 <H2>Structural enabled</H2>
                 <div className="w-100 d-flex my-2">
-                    <SearchBox
-                        {...defaultProps}
-                        patternType={SearchPatternType.structural}
-                        isLightTheme={props.isLightTheme}
-                    />
+                    <SearchBox {...defaultProps} patternType={SearchPatternType.structural} />
                 </div>
 
                 <H2>Case sensitivity enabled</H2>
                 <div className="w-100 d-flex my-2">
-                    <SearchBox {...defaultProps} caseSensitive={true} isLightTheme={props.isLightTheme} />
+                    <SearchBox {...defaultProps} caseSensitive={true} />
                 </div>
 
                 <H2>With search contexts</H2>
                 <div className="w-100 d-flex my-2">
-                    <SearchBox
-                        {...defaultProps}
-                        showSearchContext={true}
-                        isLightTheme={props.isLightTheme}
-                        selectedSearchContextSpec="global"
-                    />
+                    <SearchBox {...defaultProps} showSearchContext={true} selectedSearchContextSpec="global" />
                 </div>
 
                 <H2>With search contexts, user context selected</H2>
@@ -98,7 +84,6 @@ export const SearchBoxStory: Story = () => (
                     <SearchBox
                         {...defaultProps}
                         showSearchContext={true}
-                        isLightTheme={props.isLightTheme}
                         selectedSearchContextSpec="@username/test-version-1.5"
                     />
                 </div>
@@ -108,7 +93,6 @@ export const SearchBoxStory: Story = () => (
                     <SearchBox
                         {...defaultProps}
                         showSearchContext={true}
-                        isLightTheme={props.isLightTheme}
                         queryState={{ query: 'hello context:global' }}
                         selectedSearchContextSpec="@username"
                     />
diff --git a/client/branded/src/search-ui/input/SearchBox.tsx b/client/branded/src/search-ui/input/SearchBox.tsx
index f7784ae055f2..949110d178b3 100644
--- a/client/branded/src/search-ui/input/SearchBox.tsx
+++ b/client/branded/src/search-ui/input/SearchBox.tsx
@@ -11,7 +11,6 @@ import { fetchStreamSuggestions as defaultFetchStreamSuggestions } from '@source
 import { RecentSearch } from '@sourcegraph/shared/src/settings/temporary/recentSearches'
 import { useTemporarySetting } from '@sourcegraph/shared/src/settings/temporary/useTemporarySetting'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 
 import { IEditor, LazyQueryInput, LazyQueryInputProps } from './LazyQueryInput'
 import { SearchButton } from './SearchButton'
@@ -24,7 +23,6 @@ import styles from './SearchBox.module.scss'
 
 export interface SearchBoxProps
     extends Omit<TogglesProps, 'navbarSearchQuery' | 'submitSearch'>,
-        ThemeProps,
         SearchContextInputProps,
         TelemetryProps,
         PlatformContextProps<'requestGraphQL'>,
@@ -185,7 +183,6 @@ export const SearchBox: FC<SearchBoxProps> = props => {
                         fetchStreamSuggestions={props.fetchStreamSuggestions}
                         globbing={props.globbing}
                         interpretComments={props.interpretComments}
-                        isLightTheme={props.isLightTheme}
                         isSourcegraphDotCom={props.isSourcegraphDotCom}
                         onChange={props.onChange}
                         onCompletionItemSelected={props.onCompletionItemSelected}
diff --git a/client/branded/src/search-ui/results/NoResultsPage.tsx b/client/branded/src/search-ui/results/NoResultsPage.tsx
index baf449cd1b52..f3a233801c06 100644
--- a/client/branded/src/search-ui/results/NoResultsPage.tsx
+++ b/client/branded/src/search-ui/results/NoResultsPage.tsx
@@ -7,7 +7,6 @@ import { QueryState, SearchContextProps } from '@sourcegraph/shared/src/search'
 import { NoResultsSectionID as SectionID } from '@sourcegraph/shared/src/settings/temporary/searchSidebar'
 import { useTemporarySetting } from '@sourcegraph/shared/src/settings/temporary/useTemporarySetting'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { Button, Link, Icon, H3, Text, H2 } from '@sourcegraph/wildcard'
 
 import { QueryExamples } from '../components/QueryExamples'
@@ -44,7 +43,7 @@ const Container: React.FunctionComponent<React.PropsWithChildren<ContainerProps>
     </div>
 )
 
-interface NoResultsPageProps extends ThemeProps, TelemetryProps, Pick<SearchContextProps, 'searchContextsEnabled'> {
+interface NoResultsPageProps extends TelemetryProps, Pick<SearchContextProps, 'searchContextsEnabled'> {
     isSourcegraphDotCom: boolean
     showSearchContext: boolean
     /** Available to web app through JS Context */
@@ -56,7 +55,6 @@ interface NoResultsPageProps extends ThemeProps, TelemetryProps, Pick<SearchCont
 
 export const NoResultsPage: React.FunctionComponent<React.PropsWithChildren<NoResultsPageProps>> = ({
     searchContextsEnabled,
-    isLightTheme,
     telemetryService,
     isSourcegraphDotCom,
     showSearchContext,
diff --git a/client/branded/src/search-ui/results/StreamingSearchResultsList.tsx b/client/branded/src/search-ui/results/StreamingSearchResultsList.tsx
index fae873247bd9..022d41ffa8ea 100644
--- a/client/branded/src/search-ui/results/StreamingSearchResultsList.tsx
+++ b/client/branded/src/search-ui/results/StreamingSearchResultsList.tsx
@@ -19,7 +19,6 @@ import {
 } from '@sourcegraph/shared/src/search/stream'
 import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 
 import { CommitSearchResult } from '../components/CommitSearchResult'
 import { FileContentSearchResult } from '../components/FileContentSearchResult'
@@ -37,8 +36,7 @@ import resultContainerStyles from '../components/ResultContainer.module.scss'
 import styles from './StreamingSearchResultsList.module.scss'
 
 export interface StreamingSearchResultsListProps
-    extends ThemeProps,
-        SettingsCascadeProps,
+    extends SettingsCascadeProps,
         TelemetryProps,
         Pick<SearchContextProps, 'searchContextsEnabled'>,
         PlatformContextProps<'requestGraphQL'> {
@@ -85,7 +83,6 @@ export const StreamingSearchResultsList: React.FunctionComponent<
     fetchHighlightedFileLineRanges,
     settingsCascade,
     telemetryService,
-    isLightTheme,
     isSourcegraphDotCom,
     searchContextsEnabled,
     assetsRoot,
@@ -287,7 +284,6 @@ export const StreamingSearchResultsList: React.FunctionComponent<
                             <NoResultsPage
                                 searchContextsEnabled={searchContextsEnabled}
                                 isSourcegraphDotCom={isSourcegraphDotCom}
-                                isLightTheme={isLightTheme}
                                 telemetryService={telemetryService}
                                 showSearchContext={searchContextsEnabled}
                                 assetsRoot={assetsRoot}
diff --git a/client/browser/src/browser-extension/ThemeWrapper.tsx b/client/browser/src/browser-extension/ThemeWrapper.tsx
index 6957b6efe2b8..08b9498e7a1e 100644
--- a/client/browser/src/browser-extension/ThemeWrapper.tsx
+++ b/client/browser/src/browser-extension/ThemeWrapper.tsx
@@ -1,14 +1,12 @@
 import { useEffect, useMemo, useState } from 'react'
 
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
-
 /**
  * Wrapper for the browser extension that listens to changes of the OS theme.
  */
 export function ThemeWrapper({
     children,
 }: {
-    children: JSX.Element | null | ((props: ThemeProps) => JSX.Element | null)
+    children: JSX.Element | null | ((props: { isLightTheme: boolean }) => JSX.Element | null)
 }): JSX.Element | null {
     const darkThemeMediaList = useMemo(() => window.matchMedia('(prefers-color-scheme: dark)'), [])
     const [isLightTheme, setIsLightTheme] = useState(!darkThemeMediaList.matches)
diff --git a/client/browser/src/browser-extension/after-install-page/AfterInstallPageContent.tsx b/client/browser/src/browser-extension/after-install-page/AfterInstallPageContent.tsx
index 86df8591f56f..406905f4bf70 100644
--- a/client/browser/src/browser-extension/after-install-page/AfterInstallPageContent.tsx
+++ b/client/browser/src/browser-extension/after-install-page/AfterInstallPageContent.tsx
@@ -5,18 +5,18 @@ import classNames from 'classnames'
 
 import { SourcegraphLogo } from '@sourcegraph/branded/src/components/SourcegraphLogo'
 import { PhabricatorIcon } from '@sourcegraph/shared/src/components/icons'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { Link, Icon, Code, H1, H2, H3, Text } from '@sourcegraph/wildcard'
 
 import { getPlatformName } from '../../shared/util/context'
 
 import styles from './AfterInstallPageContent.module.scss'
 
-const Video: React.FunctionComponent<
-    React.PropsWithChildren<
-        { name: string } & Pick<VideoHTMLAttributes<HTMLVideoElement>, 'width' | 'height'> & ThemeProps
-    >
-> = ({ name, isLightTheme, width, height }) => {
+interface VideoProps extends Pick<VideoHTMLAttributes<HTMLVideoElement>, 'width' | 'height'> {
+    name: string
+    isLightTheme: boolean
+}
+
+const Video: React.FC<VideoProps> = ({ name, isLightTheme, width, height }) => {
     const suffix = isLightTheme ? 'Light' : 'Dark'
     return (
         <video
@@ -43,7 +43,11 @@ const Video: React.FunctionComponent<
     )
 }
 
-export const AfterInstallPageContent: React.FunctionComponent<React.PropsWithChildren<ThemeProps>> = props => {
+interface AfterInstallPageContentProps {
+    isLightTheme: boolean
+}
+
+export const AfterInstallPageContent: React.FC<AfterInstallPageContentProps> = props => {
     // Safari does not support the search shortcut. So don't show the feature.
     const isSafari = getPlatformName() === 'safari-extension'
     const showSearchShortcut = !isSafari
diff --git a/client/browser/src/shared/code-hosts/github/codeHost.tsx b/client/browser/src/shared/code-hosts/github/codeHost.tsx
index e2de14814351..44a93fae6a51 100644
--- a/client/browser/src/shared/code-hosts/github/codeHost.tsx
+++ b/client/browser/src/shared/code-hosts/github/codeHost.tsx
@@ -8,8 +8,8 @@ import { Omit } from 'utility-types'
 import { AdjustmentDirection, PositionAdjuster } from '@sourcegraph/codeintellify'
 import { LineOrPositionOrRange } from '@sourcegraph/common'
 import { NotificationType } from '@sourcegraph/shared/src/api/extension/extensionHostApi'
+import { observeSystemIsLightTheme } from '@sourcegraph/shared/src/deprecated-theme-utils'
 import { PlatformContext } from '@sourcegraph/shared/src/platform/context'
-import { observeSystemIsLightTheme } from '@sourcegraph/shared/src/theme'
 import { createURLWithUTM } from '@sourcegraph/shared/src/tracking/utm'
 import {
     FileSpec,
diff --git a/client/browser/src/shared/code-hosts/shared/codeHost.tsx b/client/browser/src/shared/code-hosts/shared/codeHost.tsx
index 7b06af60bcac..aee9ae67a4bc 100644
--- a/client/browser/src/shared/code-hosts/shared/codeHost.tsx
+++ b/client/browser/src/shared/code-hosts/shared/codeHost.tsx
@@ -76,7 +76,6 @@ import { getModeFromPath } from '@sourcegraph/shared/src/languages'
 import { UnbrandedNotificationItemStyleProps } from '@sourcegraph/shared/src/notifications/NotificationItem'
 import { PlatformContext, URLToFileContext } from '@sourcegraph/shared/src/platform/context'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { createURLWithUTM } from '@sourcegraph/shared/src/tracking/utm'
 import {
     FileSpec,
@@ -452,10 +451,7 @@ function initCodeIntelligence({
         tokenize: codeHost.codeViewsRequireTokenization,
     })
 
-    class HoverOverlayContainer extends React.Component<
-        {},
-        HoverState<HoverContext, HoverMerged, ActionItemAction> & ThemeProps
-    > {
+    class HoverOverlayContainer extends React.Component<{}, HoverState<HoverContext, HoverMerged, ActionItemAction>> {
         private subscription = new Subscription()
         private nextOverlayElement = hoverOverlayElements.next.bind(hoverOverlayElements)
 
@@ -463,7 +459,6 @@ function initCodeIntelligence({
             super(props)
             this.state = {
                 ...hoverifier.hoverState,
-                isLightTheme: true,
             }
         }
         public componentDidMount(): void {
@@ -525,13 +520,6 @@ function initCodeIntelligence({
                     )
                     .subscribe()
             )
-            if (codeHost.isLightTheme) {
-                this.subscription.add(
-                    codeHost.isLightTheme.subscribe(isLightTheme => {
-                        this.setState({ isLightTheme })
-                    })
-                )
-            }
             containerComponentUpdates.next()
         }
         public componentWillUnmount(): void {
@@ -574,7 +562,6 @@ function initCodeIntelligence({
                         {...codeHost.hoverOverlayClassProps}
                         className={classNames(styles.hoverOverlay, codeHost.hoverOverlayClassProps?.className)}
                         telemetryService={telemetryService}
-                        isLightTheme={this.state.isLightTheme}
                         hoverRef={this.nextOverlayElement}
                         extensionsController={extensionsController}
                         platformContext={platformContext}
diff --git a/client/jetbrains/webview/src/search/App.tsx b/client/jetbrains/webview/src/search/App.tsx
index fbf12029e7c2..9f7aee44dffd 100644
--- a/client/jetbrains/webview/src/search/App.tsx
+++ b/client/jetbrains/webview/src/search/App.tsx
@@ -17,6 +17,7 @@ import {
 import { fetchStreamSuggestions } from '@sourcegraph/shared/src/search/suggestions'
 import { EMPTY_SETTINGS_CASCADE, SettingsCascadeOrError } from '@sourcegraph/shared/src/settings/settings'
 import type { TelemetryService } from '@sourcegraph/shared/src/telemetry/telemetryService'
+import { ThemeContext, ThemeSetting } from '@sourcegraph/shared/src/theme'
 import { useObservable, WildcardThemeContext } from '@sourcegraph/wildcard'
 
 import { SearchPatternType } from '../graphql-operations'
@@ -236,56 +237,62 @@ export const App: React.FunctionComponent<React.PropsWithChildren<Props>> = ({
         [lastSearch, matches, onOpen, onPreviewChange, onPreviewClear, settingsCascade]
     )
 
+    const themeValue = useMemo(
+        () => ({ themeSetting: isDarkTheme ? ThemeSetting.Dark : ThemeSetting.Light }),
+        [isDarkTheme]
+    )
+
     return (
         <WildcardThemeContext.Provider value={{ isBranded: true }}>
-            <GlobalKeyboardListeners />
-            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
-            <div className={styles.root} onMouseDown={preventAll}>
-                <div className={styles.searchBoxContainer}>
-                    {/* eslint-disable-next-line react/forbid-elements */}
-                    <form
-                        className="d-flex m-0"
-                        onSubmit={event => {
-                            event.preventDefault()
-                            onSubmit()
-                        }}
-                    >
-                        <JetBrainsSearchBox
-                            caseSensitive={lastSearch.caseSensitive}
-                            setCaseSensitivity={caseSensitive => onSubmit({ caseSensitive })}
-                            patternType={lastSearch.patternType}
-                            setPatternType={patternType => onSubmit({ patternType })}
-                            isSourcegraphDotCom={isSourcegraphDotCom}
-                            structuralSearchDisabled={false}
-                            queryState={userQueryState}
-                            onChange={setUserQueryState}
-                            onSubmit={onSubmit}
-                            authenticatedUser={authenticatedUser}
-                            searchContextsEnabled={true}
-                            showSearchContext={true}
-                            showSearchContextManagement={false}
-                            setSelectedSearchContextSpec={contextSpec => onSubmit({ contextSpec })}
-                            selectedSearchContextSpec={lastSearch.selectedSearchContextSpec}
-                            fetchSearchContexts={fetchSearchContexts}
-                            getUserSearchContextNamespaces={getUserSearchContextNamespaces}
-                            fetchStreamSuggestions={fetchStreamSuggestionsWithStaticUrl}
-                            settingsCascade={settingsCascade}
-                            globbing={isGlobbingEnabled}
-                            isLightTheme={!isDarkTheme}
-                            telemetryService={telemetryService}
-                            platformContext={platformContext}
-                            className=""
-                            containerClassName=""
-                            autoFocus={true}
-                            hideHelpButton={true}
-                        />
-                    </form>
-                </div>
+            <ThemeContext.Provider value={themeValue}>
+                <GlobalKeyboardListeners />
+                {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+                <div className={styles.root} onMouseDown={preventAll}>
+                    <div className={styles.searchBoxContainer}>
+                        {/* eslint-disable-next-line react/forbid-elements */}
+                        <form
+                            className="d-flex m-0"
+                            onSubmit={event => {
+                                event.preventDefault()
+                                onSubmit()
+                            }}
+                        >
+                            <JetBrainsSearchBox
+                                caseSensitive={lastSearch.caseSensitive}
+                                setCaseSensitivity={caseSensitive => onSubmit({ caseSensitive })}
+                                patternType={lastSearch.patternType}
+                                setPatternType={patternType => onSubmit({ patternType })}
+                                isSourcegraphDotCom={isSourcegraphDotCom}
+                                structuralSearchDisabled={false}
+                                queryState={userQueryState}
+                                onChange={setUserQueryState}
+                                onSubmit={onSubmit}
+                                authenticatedUser={authenticatedUser}
+                                searchContextsEnabled={true}
+                                showSearchContext={true}
+                                showSearchContextManagement={false}
+                                setSelectedSearchContextSpec={contextSpec => onSubmit({ contextSpec })}
+                                selectedSearchContextSpec={lastSearch.selectedSearchContextSpec}
+                                fetchSearchContexts={fetchSearchContexts}
+                                getUserSearchContextNamespaces={getUserSearchContextNamespaces}
+                                fetchStreamSuggestions={fetchStreamSuggestionsWithStaticUrl}
+                                settingsCascade={settingsCascade}
+                                globbing={isGlobbingEnabled}
+                                telemetryService={telemetryService}
+                                platformContext={platformContext}
+                                className=""
+                                containerClassName=""
+                                autoFocus={true}
+                                hideHelpButton={true}
+                            />
+                        </form>
+                    </div>
 
-                {statusBar}
+                    {statusBar}
 
-                {searchResultList}
-            </div>
+                    {searchResultList}
+                </div>
+            </ThemeContext.Provider>
         </WildcardThemeContext.Provider>
     )
 }
diff --git a/client/jetbrains/webview/src/search/input/JetBrainsSearchBox.story.tsx b/client/jetbrains/webview/src/search/input/JetBrainsSearchBox.story.tsx
index 0dd1ae612447..0478aee44ab4 100644
--- a/client/jetbrains/webview/src/search/input/JetBrainsSearchBox.story.tsx
+++ b/client/jetbrains/webview/src/search/input/JetBrainsSearchBox.story.tsx
@@ -7,6 +7,7 @@ import { useDarkMode } from 'storybook-dark-mode'
 
 import { EMPTY_SETTINGS_CASCADE } from '@sourcegraph/shared/src/settings/settings'
 import { NOOP_TELEMETRY_SERVICE } from '@sourcegraph/shared/src/telemetry/telemetryService'
+import { ThemeContext, ThemeSetting } from '@sourcegraph/shared/src/theme'
 import { WildcardThemeContext } from '@sourcegraph/wildcard'
 import { usePrependStyles } from '@sourcegraph/wildcard/src/stories'
 
@@ -43,45 +44,46 @@ export const JetBrainsSearchBoxStory: Story = () => {
 
     return (
         <WildcardThemeContext.Provider value={{ isBranded: true }}>
-            <BrowserRouter>
-                <div ref={rootElementRef}>
-                    <div className="d-flex justify-content-center">
-                        <div className="mx-6">
-                            <JetBrainsSearchBox
-                                caseSensitive={true}
-                                setCaseSensitivity={() => {}}
-                                patternType={SearchPatternType.regexp}
-                                setPatternType={() => {}}
-                                isSourcegraphDotCom={false}
-                                structuralSearchDisabled={false}
-                                queryState={{ query: 'type:file test AND test repo:contains.file(CHANGELOG)' }}
-                                onChange={() => {}}
-                                onSubmit={() => {}}
-                                authenticatedUser={null}
-                                searchContextsEnabled={true}
-                                showSearchContext={true}
-                                showSearchContextManagement={false}
-                                setSelectedSearchContextSpec={() => {}}
-                                selectedSearchContextSpec={undefined}
-                                fetchSearchContexts={() => {
-                                    throw new Error('fetchSearchContexts')
-                                }}
-                                getUserSearchContextNamespaces={() => []}
-                                fetchStreamSuggestions={() => NEVER}
-                                settingsCascade={EMPTY_SETTINGS_CASCADE}
-                                globbing={false}
-                                isLightTheme={!isDarkTheme}
-                                telemetryService={NOOP_TELEMETRY_SERVICE}
-                                platformContext={{ requestGraphQL: () => EMPTY }}
-                                className=""
-                                containerClassName=""
-                                autoFocus={true}
-                                hideHelpButton={true}
-                            />
+            <ThemeContext.Provider value={{ themeSetting: !isDarkTheme ? ThemeSetting.Light : ThemeSetting.Dark }}>
+                <BrowserRouter>
+                    <div ref={rootElementRef}>
+                        <div className="d-flex justify-content-center">
+                            <div className="mx-6">
+                                <JetBrainsSearchBox
+                                    caseSensitive={true}
+                                    setCaseSensitivity={() => {}}
+                                    patternType={SearchPatternType.regexp}
+                                    setPatternType={() => {}}
+                                    isSourcegraphDotCom={false}
+                                    structuralSearchDisabled={false}
+                                    queryState={{ query: 'type:file test AND test repo:contains.file(CHANGELOG)' }}
+                                    onChange={() => {}}
+                                    onSubmit={() => {}}
+                                    authenticatedUser={null}
+                                    searchContextsEnabled={true}
+                                    showSearchContext={true}
+                                    showSearchContextManagement={false}
+                                    setSelectedSearchContextSpec={() => {}}
+                                    selectedSearchContextSpec={undefined}
+                                    fetchSearchContexts={() => {
+                                        throw new Error('fetchSearchContexts')
+                                    }}
+                                    getUserSearchContextNamespaces={() => []}
+                                    fetchStreamSuggestions={() => NEVER}
+                                    settingsCascade={EMPTY_SETTINGS_CASCADE}
+                                    globbing={false}
+                                    telemetryService={NOOP_TELEMETRY_SERVICE}
+                                    platformContext={{ requestGraphQL: () => EMPTY }}
+                                    className=""
+                                    containerClassName=""
+                                    autoFocus={true}
+                                    hideHelpButton={true}
+                                />
+                            </div>
                         </div>
                     </div>
-                </div>
-            </BrowserRouter>
+                </BrowserRouter>
+            </ThemeContext.Provider>
         </WildcardThemeContext.Provider>
     )
 }
diff --git a/client/jetbrains/webview/src/search/input/JetBrainsSearchBox.tsx b/client/jetbrains/webview/src/search/input/JetBrainsSearchBox.tsx
index bbabc3db5a0f..dfe24151f529 100644
--- a/client/jetbrains/webview/src/search/input/JetBrainsSearchBox.tsx
+++ b/client/jetbrains/webview/src/search/input/JetBrainsSearchBox.tsx
@@ -12,7 +12,6 @@ import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
 import { QueryState, SearchContextInputProps, SubmitSearchProps } from '@sourcegraph/shared/src/search'
 import { fetchStreamSuggestions as defaultFetchStreamSuggestions } from '@sourcegraph/shared/src/search/suggestions'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 
 import { Search } from '../jetbrains-icons/Search'
 
@@ -22,7 +21,6 @@ import styles from './JetBrainsSearchBox.module.scss'
 
 export interface JetBrainsSearchBoxProps
     extends Omit<JetBrainsTogglesProps, 'navbarSearchQuery' | 'submitSearch' | 'clearSearch'>,
-        ThemeProps,
         SearchContextInputProps,
         TelemetryProps,
         PlatformContextProps<'requestGraphQL'> {
@@ -123,7 +121,6 @@ export const JetBrainsSearchBox: React.FunctionComponent<React.PropsWithChildren
                         caseSensitive={props.caseSensitive}
                         fetchStreamSuggestions={props.fetchStreamSuggestions}
                         globbing={props.globbing}
-                        isLightTheme={props.isLightTheme}
                         isSourcegraphDotCom={props.isSourcegraphDotCom}
                         onChange={props.onChange}
                         onSubmit={props.onSubmit}
diff --git a/client/shared/src/components/MonacoEditor.tsx b/client/shared/src/components/MonacoEditor.tsx
index 8dd128ecce98..40692fe7f4ce 100644
--- a/client/shared/src/components/MonacoEditor.tsx
+++ b/client/shared/src/components/MonacoEditor.tsx
@@ -7,7 +7,6 @@ import { map, distinctUntilChanged } from 'rxjs/operators'
 
 import { KeyboardShortcut } from '../keyboardShortcuts'
 import { Shortcut } from '../react-shortcuts'
-import { ThemeProps } from '../theme'
 import { isInputElement } from '../util/dom'
 
 const SOURCEGRAPH_LIGHT = 'sourcegraph-light'
@@ -158,7 +157,7 @@ monaco.editor.defineTheme(SOURCEGRAPH_LIGHT, {
     rules: lightRules,
 })
 
-interface Props extends ThemeProps {
+interface Props {
     /** The contents of the document. */
     value?: string
 
@@ -200,6 +199,8 @@ interface Props extends ThemeProps {
 
     /** Whether to autofocus the Monaco editor when it mounts. Default: false. */
     autoFocus?: boolean
+
+    isLightTheme: boolean
 }
 
 interface State {
diff --git a/client/shared/src/deprecated-theme-utils.ts b/client/shared/src/deprecated-theme-utils.ts
new file mode 100644
index 000000000000..efba32b9f52d
--- /dev/null
+++ b/client/shared/src/deprecated-theme-utils.ts
@@ -0,0 +1,26 @@
+import { concat, defer, fromEvent, Observable, of } from 'rxjs'
+import { map } from 'rxjs/operators'
+
+/**
+ * Returns an Observable that emits the system color scheme using a `prefers-color-scheme` media
+ * query. The Observable will emit with the initial value immediately. Callers that need the initial
+ * value synchronously can use initialValue.
+ *
+ * @param window_ The global window object (or a mock in tests).
+ *
+ * @deprecated Use useTheme and useSystemTheme instead.
+ */
+export const observeSystemIsLightTheme = (
+    window_: Pick<Window, 'matchMedia'> = window
+): { observable: Observable<boolean>; initialValue: boolean } => {
+    const mediaList = window_.matchMedia('(prefers-color-scheme: dark)')
+    return {
+        observable: concat(
+            // We want every subscriber to get the _current_ match value, hence
+            // we defer evaluation of until subscription.
+            defer(() => of(!mediaList.matches)),
+            fromEvent<MediaQueryListEvent>(mediaList, 'change').pipe(map(event => !event.matches))
+        ),
+        initialValue: !mediaList.matches,
+    }
+}
diff --git a/client/shared/src/hover/HoverOverlay.fixtures.ts b/client/shared/src/hover/HoverOverlay.fixtures.ts
index 8337fabf0630..eee2fcc4433c 100644
--- a/client/shared/src/hover/HoverOverlay.fixtures.ts
+++ b/client/shared/src/hover/HoverOverlay.fixtures.ts
@@ -23,7 +23,6 @@ export const commonProps = (): HoverOverlayProps & SettingsCascadeProps => ({
     telemetryService: NOOP_TELEMETRY_SERVICE,
     extensionsController: NOOP_EXTENSIONS_CONTROLLER,
     platformContext: NOOP_PLATFORM_CONTEXT,
-    isLightTheme: true,
     overlayPosition: { top: 16, left: 16 },
     onAlertDismissed: action('onAlertDismissed'),
     settingsCascade: EMPTY_SETTINGS_CASCADE,
diff --git a/client/shared/src/hover/HoverOverlay.tsx b/client/shared/src/hover/HoverOverlay.tsx
index 679e790eab40..3eae6816cdd8 100644
--- a/client/shared/src/hover/HoverOverlay.tsx
+++ b/client/shared/src/hover/HoverOverlay.tsx
@@ -10,7 +10,6 @@ import { ActionItem, ActionItemComponentProps } from '../actions/ActionItem'
 import { NotificationType } from '../api/extension/extensionHostApi'
 import { PlatformContextProps } from '../platform/context'
 import { TelemetryProps } from '../telemetry/telemetryService'
-import { ThemeProps } from '../theme'
 
 import { CopyLinkIcon } from './CopyLinkIcon'
 import { toNativeEvent } from './helpers'
@@ -59,7 +58,6 @@ export interface HoverOverlayProps
         ActionItemComponentProps,
         HoverOverlayClassProps,
         TelemetryProps,
-        ThemeProps,
         Pick<HoverOverlayAlertsProps, 'onAlertDismissed'>,
         PlatformContextProps<'settings'> {
     /** A ref callback to get the root overlay element. Use this to calculate the position. */
diff --git a/client/shared/src/keyboardShortcuts/useKeyboardShortcut.ts b/client/shared/src/keyboardShortcuts/useKeyboardShortcut.ts
index 210bdca1ef4b..8703e02d08a5 100644
--- a/client/shared/src/keyboardShortcuts/useKeyboardShortcut.ts
+++ b/client/shared/src/keyboardShortcuts/useKeyboardShortcut.ts
@@ -1,5 +1,5 @@
 import { KeyboardShortcut } from '../keyboardShortcuts'
-import { useTemporarySetting } from '../settings/temporary/useTemporarySetting'
+import { useTemporarySetting } from '../settings/temporary'
 
 import { KEYBOARD_SHORTCUTS } from './keyboardShortcuts'
 
diff --git a/client/shared/src/theme.ts b/client/shared/src/theme.ts
index 58fb617bade1..150352a20817 100644
--- a/client/shared/src/theme.ts
+++ b/client/shared/src/theme.ts
@@ -1,35 +1,134 @@
-import { concat, defer, fromEvent, Observable, of } from 'rxjs'
-import { map } from 'rxjs/operators'
+import { createContext, useCallback, useContext, useSyncExternalStore } from 'react'
 
+import { useTemporarySetting } from './settings/temporary'
+
+/**
+ * Enum with possible users theme settings, it might be dark or light
+ * or user can pick system and in this case we fall back on system preference
+ * with match media
+ */
+export enum ThemeSetting {
+    Light = 'light',
+    Dark = 'dark',
+    System = 'system',
+}
+
+/**
+ * List of possibles theme values, there is only two themes at the moment,
+ * but in the future it could be more than just two
+ */
+export enum Theme {
+    Light = 'light',
+    Dark = 'dark',
+}
+
+interface ThemeContextData {
+    themeSetting: ThemeSetting | null
+    onThemeSettingChanging?: (themeSetting: ThemeSetting) => void
+}
 /**
- * Props that can be extended by any component's Props which needs to react to theme change.
+ * This context is used when we want to override some subtree of UI with
+ * specific theme, widely used in storybook testing
  */
-export interface ThemeProps {
+export const ThemeContext = createContext<ThemeContextData>({
+    themeSetting: null,
+    onThemeSettingChanging: undefined,
+})
+
+interface useThemeApi {
+    /**
+     * Current theme value, might be either user setting based or derived
+     * on system settings, it depends on {@link themeSetting} value
+     */
+    theme: Theme
+
+    /**
+     * Current theme setting value, it is set by user in their user settings.
+     */
+    themeSetting: ThemeSetting
+
     /**
-     * `true` if the current theme to be shown is the light theme,
-     * `false` if it is the dark theme.
+     * Theme setting setter handler to change the current theme setting value.
      */
-    isLightTheme: boolean
+    setThemeSetting: (setting: ThemeSetting) => void
 }
 
 /**
- * Returns an Observable that emits the system color scheme using a `prefers-color-scheme` media
- * query. The Observable will emit with the initial value immediately. Callers that need the initial
- * value synchronously can use initialValue.
- *
- * @param window_ The global window object (or a mock in tests).
+ * Provides API to read and write theme settings, it doesn't contain any
+ * side effects (like theme CSS class setters, so it may used on any level
+ * of components)
  */
-export const observeSystemIsLightTheme = (
-    window_: Pick<Window, 'matchMedia'> = window
-): { observable: Observable<boolean>; initialValue: boolean } => {
-    const mediaList = window_.matchMedia('(prefers-color-scheme: dark)')
+export function useTheme(): useThemeApi {
+    const { themeSetting: contextThemeSetting, onThemeSettingChanging } = useContext(ThemeContext)
+
+    const systemTheme = useSyncExternalStore(subscribeToSystemTheme, getSystemThemeSnapshot)
+    const [userThemeSetting, setUserThemeSetting] = useUserThemeSetting()
+
+    // Prefer context value over internal value and setter
+    const themeSetting = contextThemeSetting ?? userThemeSetting
+    const handleSetThemeSetting = useCallback(
+        (themeSetting: ThemeSetting) => {
+            if (onThemeSettingChanging) {
+                onThemeSettingChanging(themeSetting)
+            } else {
+                setUserThemeSetting(themeSetting)
+            }
+        },
+        [setUserThemeSetting, onThemeSettingChanging]
+    )
+
     return {
-        observable: concat(
-            // We want every subscriber to get the _current_ match value, hence
-            // we defer evaluation of until subscription.
-            defer(() => of(!mediaList.matches)),
-            fromEvent<MediaQueryListEvent>(mediaList, 'change').pipe(map(event => !event.matches))
-        ),
-        initialValue: !mediaList.matches,
+        theme: themeSetting === ThemeSetting.System ? systemTheme : (themeSetting as unknown as Theme),
+        themeSetting: userThemeSetting,
+        setThemeSetting: handleSetThemeSetting,
+    }
+}
+
+/**
+ * A small helper to detect the light there appearance, widely used in
+ * brand logo, search box and other components where we can't use CSS variable
+ * colors for theming
+ */
+export function useIsLightTheme(): boolean {
+    const { theme } = useTheme()
+    return theme === Theme.Light
+}
+
+type Unsubscribe = () => void
+
+function subscribeToSystemTheme(callback: () => void): Unsubscribe {
+    const matchMedia = window.matchMedia('(prefers-color-scheme: dark)')
+    matchMedia.addEventListener('change', callback)
+
+    return () => {
+        matchMedia.removeEventListener('change', callback)
+    }
+}
+
+function getSystemThemeSnapshot(): Theme {
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        return Theme.Dark
+    }
+
+    return Theme.Light
+}
+
+function useUserThemeSetting(): [ThemeSetting, (setting: ThemeSetting) => void] {
+    const [userThemeSetting, setThemeSetting] = useTemporarySetting('user.themePreference', ThemeSetting.System)
+
+    return [readStoredThemePreference(userThemeSetting), setThemeSetting]
+}
+
+function readStoredThemePreference(value?: string): ThemeSetting {
+    // Handle both old and new preference values
+    switch (value) {
+        case 'true':
+        case 'light':
+            return ThemeSetting.Light
+        case 'false':
+        case 'dark':
+            return ThemeSetting.Dark
+        default:
+            return ThemeSetting.System
     }
 }
diff --git a/client/vscode/src/webview/platform/context.ts b/client/vscode/src/webview/platform/context.ts
index 10b62b980239..edce6ef1d8e0 100644
--- a/client/vscode/src/webview/platform/context.ts
+++ b/client/vscode/src/webview/platform/context.ts
@@ -72,7 +72,6 @@ export function createPlatformContext(extensionCoreAPI: Comlink.Remote<Extension
 export interface WebviewPageProps {
     extensionCoreAPI: Comlink.Remote<ExtensionCoreAPI>
     platformContext: VSCodePlatformContext
-    theme: 'theme-dark' | 'theme-light'
     authenticatedUser: AuthenticatedUser | null
     settingsCascade: SettingsCascadeOrError
     instanceURL: string
diff --git a/client/vscode/src/webview/search-panel/SearchHomeView.tsx b/client/vscode/src/webview/search-panel/SearchHomeView.tsx
index 7de40c0cd969..543ec8ccff88 100644
--- a/client/vscode/src/webview/search-panel/SearchHomeView.tsx
+++ b/client/vscode/src/webview/search-panel/SearchHomeView.tsx
@@ -10,6 +10,7 @@ import { getUserSearchContextNamespaces, QueryState, SearchMode } from '@sourceg
 import { collectMetrics } from '@sourcegraph/shared/src/search/query/metrics'
 import { appendContextFilter, sanitizeQueryForTelemetry } from '@sourcegraph/shared/src/search/query/transformer'
 import { LATEST_VERSION, SearchMatch } from '@sourcegraph/shared/src/search/stream'
+import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
 import { globbingEnabledFromSettings } from '@sourcegraph/shared/src/util/globbing'
 
 import { SearchPatternType } from '../../graphql-operations'
@@ -30,10 +31,11 @@ export const SearchHomeView: React.FunctionComponent<React.PropsWithChildren<Sea
     authenticatedUser,
     platformContext,
     settingsCascade,
-    theme,
     context,
     instanceURL,
 }) => {
+    const isLightTheme = useIsLightTheme()
+
     // Toggling case sensitivity or pattern type does NOT trigger a new search on home view.
     const [caseSensitive, setCaseSensitivity] = useState(false)
     const [patternType, setPatternType] = useState(SearchPatternType.standard)
@@ -152,7 +154,7 @@ export const SearchHomeView: React.FunctionComponent<React.PropsWithChildren<Sea
 
     return (
         <div className="d-flex flex-column align-items-center">
-            <BrandHeader theme={theme} />
+            <BrandHeader isLightTheme={isLightTheme} />
 
             <div className={styles.homeSearchBoxContainer}>
                 {/* eslint-disable-next-line react/forbid-elements */}
@@ -186,7 +188,6 @@ export const SearchHomeView: React.FunctionComponent<React.PropsWithChildren<Sea
                         fetchStreamSuggestions={fetchStreamSuggestions}
                         settingsCascade={settingsCascade}
                         globbing={globbing}
-                        isLightTheme={theme === 'theme-light'}
                         telemetryService={platformContext.telemetryService}
                         platformContext={platformContext}
                         className={classNames('flex-grow-1 flex-shrink-past-contents', styles.searchBox)}
@@ -195,11 +196,7 @@ export const SearchHomeView: React.FunctionComponent<React.PropsWithChildren<Sea
                     />
                 </form>
 
-                <HomeFooter
-                    isLightTheme={theme === 'theme-light'}
-                    setQuery={setUserQueryState}
-                    telemetryService={platformContext.telemetryService}
-                />
+                <HomeFooter setQuery={setUserQueryState} telemetryService={platformContext.telemetryService} />
             </div>
         </div>
     )
diff --git a/client/vscode/src/webview/search-panel/SearchResultsView.tsx b/client/vscode/src/webview/search-panel/SearchResultsView.tsx
index 467e35c4bca7..d4acb6dd4268 100644
--- a/client/vscode/src/webview/search-panel/SearchResultsView.tsx
+++ b/client/vscode/src/webview/search-panel/SearchResultsView.tsx
@@ -40,7 +40,6 @@ export const SearchResultsView: React.FunctionComponent<React.PropsWithChildren<
     authenticatedUser,
     platformContext,
     settingsCascade,
-    theme,
     context,
     instanceURL,
 }) => {
@@ -348,7 +347,6 @@ export const SearchResultsView: React.FunctionComponent<React.PropsWithChildren<
                     fetchStreamSuggestions={fetchStreamSuggestions}
                     settingsCascade={settingsCascade}
                     globbing={globbing}
-                    isLightTheme={theme === 'theme-light'}
                     telemetryService={platformContext.telemetryService}
                     platformContext={platformContext}
                     className={classNames('flex-grow-1 flex-shrink-past-contents', styles.searchBox)}
@@ -396,7 +394,6 @@ export const SearchResultsView: React.FunctionComponent<React.PropsWithChildren<
                     )}
                     <MatchHandlersContext.Provider value={{ ...matchHandlers, instanceURL }}>
                         <StreamingSearchResultsList
-                            isLightTheme={theme === 'theme-light'}
                             settingsCascade={settingsCascade}
                             telemetryService={platformContext.telemetryService}
                             allExpanded={allExpanded}
diff --git a/client/vscode/src/webview/search-panel/components/BrandHeader.tsx b/client/vscode/src/webview/search-panel/components/BrandHeader.tsx
index 61f2fa912efe..37e949de035d 100644
--- a/client/vscode/src/webview/search-panel/components/BrandHeader.tsx
+++ b/client/vscode/src/webview/search-panel/components/BrandHeader.tsx
@@ -2,19 +2,17 @@ import React from 'react'
 
 import classNames from 'classnames'
 
-import { WebviewPageProps } from '../../platform/context'
-
 import styles from '../index.module.scss'
 
-export const BrandHeader: React.FunctionComponent<React.PropsWithChildren<Pick<WebviewPageProps, 'theme'>>> = ({
-    theme,
-}) => (
+interface BrandHeaderProps {
+    isLightTheme: boolean
+}
+
+export const BrandHeader: React.FunctionComponent<BrandHeaderProps> = ({ isLightTheme }) => (
     <>
         <img
             className={classNames(styles.logo)}
-            src={`https://sourcegraph.com/.assets/img/sourcegraph-logo-${
-                theme === 'theme-light' ? 'light' : 'dark'
-            }.svg`}
+            src={`https://sourcegraph.com/.assets/img/sourcegraph-logo-${isLightTheme ? 'light' : 'dark'}.svg`}
             alt="Sourcegraph logo"
         />
         <div data-testid="brand-header" className={classNames(styles.logoText)}>
diff --git a/client/vscode/src/webview/search-panel/components/HomeFooter.tsx b/client/vscode/src/webview/search-panel/components/HomeFooter.tsx
index e4036baf15aa..366d9ba3f4ab 100644
--- a/client/vscode/src/webview/search-panel/components/HomeFooter.tsx
+++ b/client/vscode/src/webview/search-panel/components/HomeFooter.tsx
@@ -5,7 +5,6 @@ import classNames from 'classnames'
 import { SyntaxHighlightedSearchQuery } from '@sourcegraph/branded'
 import { QueryState } from '@sourcegraph/shared/src/search'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { Card, Text } from '@sourcegraph/wildcard'
 
 import { ModalVideo } from '../alias/ModalVideo'
@@ -14,7 +13,7 @@ import { SearchExample, exampleQueries } from './SearchExamples'
 
 import styles from './HomeFooter.module.scss'
 
-export interface HomeFooterProps extends TelemetryProps, ThemeProps {
+export interface HomeFooterProps extends TelemetryProps {
     setQuery: (newState: QueryState) => void
 }
 interface SearchExamplesProps extends TelemetryProps {
diff --git a/client/vscode/src/webview/search-panel/index.tsx b/client/vscode/src/webview/search-panel/index.tsx
index a542258e6c48..fa300cda468d 100644
--- a/client/vscode/src/webview/search-panel/index.tsx
+++ b/client/vscode/src/webview/search-panel/index.tsx
@@ -9,6 +9,7 @@ import { MemoryRouter } from 'react-router-dom'
 
 import { wrapRemoteObservable } from '@sourcegraph/shared/src/api/client/api/common'
 import { ShortcutProvider } from '@sourcegraph/shared/src/react-shortcuts'
+import { ThemeSetting, ThemeContext } from '@sourcegraph/shared/src/theme'
 import { AnchorLink, setLinkComponent, useObservable, WildcardThemeContext } from '@sourcegraph/wildcard'
 
 import { ExtensionCoreAPI } from '../../contract'
@@ -43,16 +44,12 @@ const platformContext = createPlatformContext(extensionCoreAPI)
 setLinkComponent(AnchorLink)
 
 const Main: React.FC<React.PropsWithChildren<unknown>> = () => {
+    const theme = useObservable(themes)
     const state = useObservable(useMemo(() => wrapRemoteObservable(extensionCoreAPI.observeState()), []))
-
+    const instanceURL = useObservable(useMemo(() => wrapRemoteObservable(extensionCoreAPI.getInstanceURL()), []))
     const authenticatedUser = useObservable(
         useMemo(() => wrapRemoteObservable(extensionCoreAPI.getAuthenticatedUser()), [])
     )
-
-    const instanceURL = useObservable(useMemo(() => wrapRemoteObservable(extensionCoreAPI.getInstanceURL()), []))
-
-    const theme = useObservable(themes)
-
     const settingsCascade = useObservable(
         useMemo(() => wrapRemoteObservable(extensionCoreAPI.observeSourcegraphSettings()), [])
     )
@@ -69,6 +66,11 @@ const Main: React.FC<React.PropsWithChildren<unknown>> = () => {
         theme !== undefined &&
         settingsCascade !== undefined
 
+    const themeSetting = useMemo(
+        () => ({ themeSetting: theme === 'theme-light' ? ThemeSetting.Light : ThemeSetting.Dark }),
+        [theme]
+    )
+
     if (!initialized) {
         return <VSCodeProgressRing />
     }
@@ -76,7 +78,6 @@ const Main: React.FC<React.PropsWithChildren<unknown>> = () => {
     const webviewPageProps: WebviewPageProps = {
         extensionCoreAPI,
         platformContext,
-        theme,
         authenticatedUser,
         settingsCascade,
         instanceURL,
@@ -91,20 +92,24 @@ const Main: React.FC<React.PropsWithChildren<unknown>> = () => {
     if (state.context.submittedSearchQueryState === null) {
         return (
             <WebviewPageContext.Provider value={webviewPageProps}>
-                <SearchHomeView {...webviewPageProps} context={state.context} />
+                <ThemeContext.Provider value={themeSetting}>
+                    <SearchHomeView {...webviewPageProps} context={state.context} />
+                </ThemeContext.Provider>
             </WebviewPageContext.Provider>
         )
     }
 
     return (
         <WebviewPageContext.Provider value={webviewPageProps}>
-            <SearchResultsView
-                {...webviewPageProps}
-                context={{
-                    ...state.context,
-                    submittedSearchQueryState: state.context.submittedSearchQueryState,
-                }}
-            />
+            <ThemeContext.Provider value={themeSetting}>
+                <SearchResultsView
+                    {...webviewPageProps}
+                    context={{
+                        ...state.context,
+                        submittedSearchQueryState: state.context.submittedSearchQueryState,
+                    }}
+                />
+            </ThemeContext.Provider>
         </WebviewPageContext.Provider>
     )
 }
diff --git a/client/vscode/src/webview/sidebars/search/index.tsx b/client/vscode/src/webview/sidebars/search/index.tsx
index cd56148e3783..cbffc77b8b02 100644
--- a/client/vscode/src/webview/sidebars/search/index.tsx
+++ b/client/vscode/src/webview/sidebars/search/index.tsx
@@ -80,7 +80,6 @@ const Main: React.FC<React.PropsWithChildren<unknown>> = () => {
     const webviewPageProps: WebviewPageProps = {
         extensionCoreAPI,
         platformContext,
-        theme,
         authenticatedUser,
         settingsCascade,
         instanceURL,
diff --git a/client/web/src/Layout.tsx b/client/web/src/Layout.tsx
index 6a4d502517fc..8358f625bafd 100644
--- a/client/web/src/Layout.tsx
+++ b/client/web/src/Layout.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense, useCallback, useRef, useState } from 'react'
+import React, { Suspense, useCallback, useLayoutEffect, useState } from 'react'
 
 import classNames from 'classnames'
 import { Outlet, useLocation, Navigate, useMatches } from 'react-router-dom'
@@ -14,7 +14,7 @@ import { Settings } from '@sourcegraph/shared/src/schema/settings.schema'
 import { SearchContextProps } from '@sourcegraph/shared/src/search'
 import { SettingsCascadeProps, SettingsSubjectCommonFields } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
+import { useTheme, Theme } from '@sourcegraph/shared/src/theme'
 import { lazyComponent } from '@sourcegraph/shared/src/util/lazyComponent'
 import { parseQueryAndHash } from '@sourcegraph/shared/src/util/url'
 import { FeedbackPrompt, LoadingSpinner, Panel } from '@sourcegraph/wildcard'
@@ -41,7 +41,6 @@ import { parseSearchURLQuery, SearchAggregationProps, SearchStreamingProps } fro
 import { NotepadContainer } from './search/Notepad'
 import { SearchQueryStateObserver } from './SearchQueryStateObserver'
 import { useExperimentalFeatures } from './stores'
-import { ThemePreferenceProps, useTheme } from './theme'
 import { getExperimentalFeatures } from './util/get-experimental-features'
 import { parseBrowserRepoURL } from './util/url'
 
@@ -74,8 +73,6 @@ export interface LegacyLayoutProps
 
     globbing: boolean
     isSourcegraphDotCom: boolean
-
-    themeProps: ThemeProps & ThemePreferenceProps
 }
 /**
  * Syntax highlighting changes for WCAG 2.1 contrast compliance (currently behind feature flag)
@@ -128,16 +125,13 @@ export const Layout: React.FC<LegacyLayoutProps> = props => {
         location.pathname === PageRoutes.PasswordReset ||
         location.pathname === PageRoutes.Welcome
 
-    const themeState = useTheme()
-    const themeStateRef = useRef(themeState)
-    themeStateRef.current = themeState
     const [enableContrastCompliantSyntaxHighlighting] = useFeatureFlag('contrast-compliant-syntax-highlighting')
 
-    useScrollToLocationHash(location)
-
-    const showHelpShortcut = useKeyboardShortcut('keyboardShortcutsHelp')
+    const { theme } = useTheme()
     const [keyboardShortcutsHelpOpen, setKeyboardShortcutsHelpOpen] = useState(false)
     const [feedbackModalOpen, setFeedbackModalOpen] = useState(false)
+    const showHelpShortcut = useKeyboardShortcut('keyboardShortcutsHelp')
+
     const showKeyboardShortcutsHelp = useCallback(() => setKeyboardShortcutsHelpOpen(true), [])
     const hideKeyboardShortcutsHelp = useCallback(() => setKeyboardShortcutsHelpOpen(false), [])
     const showFeedbackModal = useCallback(() => setFeedbackModalOpen(true), [])
@@ -147,6 +141,16 @@ export const Layout: React.FC<LegacyLayoutProps> = props => {
             routeMatches && routeMatches.length > 0 ? routeMatches[routeMatches.length - 1].pathname : undefined,
     })
 
+    useLayoutEffect(() => {
+        const isLightTheme = theme === Theme.Light
+
+        document.documentElement.classList.add('theme')
+        document.documentElement.classList.toggle('theme-light', isLightTheme)
+        document.documentElement.classList.toggle('theme-dark', !isLightTheme)
+    }, [theme])
+
+    useScrollToLocationHash(location)
+
     // Note: this was a poor UX and is disabled for now, see https://github.com/sourcegraph/sourcegraph/issues/30192
     // const [tosAccepted, setTosAccepted] = useState(true) // Assume TOS has been accepted so that we don't show the TOS modal on initial load
     // useEffect(() => setTosAccepted(!props.authenticatedUser || props.authenticatedUser.tosAccepted), [
@@ -214,9 +218,8 @@ export const Layout: React.FC<LegacyLayoutProps> = props => {
             )}
             {!isSiteInit && !isSignInOrUp && (
                 <GlobalNavbar
-                    routes={[]}
                     {...props}
-                    {...props.themeProps}
+                    routes={[]}
                     showSearchBox={
                         isSearchRelatedPage &&
                         !isSearchHomepage &&
@@ -256,7 +259,6 @@ export const Layout: React.FC<LegacyLayoutProps> = props => {
                 >
                     <TabbedPanelContent
                         {...props}
-                        {...props.themeProps}
                         repoName={`git://${parseBrowserRepoURL(location.pathname).repoName}`}
                         fetchHighlightedFileLineRanges={props.fetchHighlightedFileLineRanges}
                     />
@@ -269,7 +271,6 @@ export const Layout: React.FC<LegacyLayoutProps> = props => {
                 <LazyFuzzyFinder
                     isVisible={isFuzzyFinderVisible}
                     setIsVisible={setFuzzyFinderVisible}
-                    themeState={themeStateRef}
                     isRepositoryRelatedPage={isRepositoryRelatedPage}
                     settingsCascade={props.settingsCascade}
                     telemetryService={props.telemetryService}
diff --git a/client/web/src/LegacyLayout.tsx b/client/web/src/LegacyLayout.tsx
index 9df137ff225c..1aa02af970fb 100644
--- a/client/web/src/LegacyLayout.tsx
+++ b/client/web/src/LegacyLayout.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense, useCallback, useRef, useState } from 'react'
+import React, { Suspense, useCallback, useLayoutEffect, useState } from 'react'
 
 import classNames from 'classnames'
 import { matchPath, useLocation, Route, Routes, Navigate } from 'react-router-dom'
@@ -15,6 +15,7 @@ import { Settings } from '@sourcegraph/shared/src/schema/settings.schema'
 import { SearchContextProps } from '@sourcegraph/shared/src/search'
 import { SettingsCascadeProps, SettingsSubjectCommonFields } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
+import { useTheme, Theme } from '@sourcegraph/shared/src/theme'
 import { lazyComponent } from '@sourcegraph/shared/src/util/lazyComponent'
 import { parseQueryAndHash } from '@sourcegraph/shared/src/util/url'
 import { FeedbackPrompt, LoadingSpinner, Panel } from '@sourcegraph/wildcard'
@@ -55,7 +56,6 @@ import { SearchQueryStateObserver } from './SearchQueryStateObserver'
 import type { SiteAdminAreaRoute } from './site-admin/SiteAdminArea'
 import type { SiteAdminSideBarGroups } from './site-admin/SiteAdminSidebar'
 import { useExperimentalFeatures } from './stores'
-import { useTheme, useThemeProps } from './theme'
 import type { UserAreaRoute } from './user/area/UserArea'
 import type { UserAreaHeaderNavItem } from './user/area/UserAreaHeader'
 import type { UserSettingsAreaRoute } from './user/settings/UserSettingsArea'
@@ -156,16 +156,11 @@ export const LegacyLayout: React.FunctionComponent<React.PropsWithChildren<Legac
         location.pathname === PageRoutes.PasswordReset ||
         location.pathname === PageRoutes.Welcome
 
-    const themeProps = useThemeProps()
-    const themeState = useTheme()
-    const themeStateRef = useRef(themeState)
-    themeStateRef.current = themeState
     const [enableContrastCompliantSyntaxHighlighting] = useFeatureFlag('contrast-compliant-syntax-highlighting')
 
     const breadcrumbProps = useBreadcrumbs()
 
-    useScrollToLocationHash(location)
-
+    const { theme } = useTheme()
     const showHelpShortcut = useKeyboardShortcut('keyboardShortcutsHelp')
     const [keyboardShortcutsHelpOpen, setKeyboardShortcutsHelpOpen] = useState(false)
     const [feedbackModalOpen, setFeedbackModalOpen] = useState(false)
@@ -177,6 +172,16 @@ export const LegacyLayout: React.FunctionComponent<React.PropsWithChildren<Legac
         routeMatch,
     })
 
+    useLayoutEffect(() => {
+        const isLightTheme = theme === Theme.Light
+
+        document.documentElement.classList.add('theme')
+        document.documentElement.classList.toggle('theme-light', isLightTheme)
+        document.documentElement.classList.toggle('theme-dark', !isLightTheme)
+    }, [theme])
+
+    useScrollToLocationHash(location)
+
     // Note: this was a poor UX and is disabled for now, see https://github.com/sourcegraph/sourcegraph/issues/30192
     // const [tosAccepted, setTosAccepted] = useState(true) // Assume TOS has been accepted so that we don't show the TOS modal on initial load
     // useEffect(() => setTosAccepted(!props.authenticatedUser || props.authenticatedUser.tosAccepted), [
@@ -193,7 +198,6 @@ export const LegacyLayout: React.FunctionComponent<React.PropsWithChildren<Legac
 
     const context = {
         ...props,
-        ...themeProps,
         ...breadcrumbProps,
         isMacPlatform: isMacPlatform(),
     } satisfies Omit<LegacyLayoutRouteComponentProps, 'location' | 'history' | 'match' | 'staticContext'>
@@ -252,7 +256,6 @@ export const LegacyLayout: React.FunctionComponent<React.PropsWithChildren<Legac
             {!isSiteInit && !isSignInOrUp && (
                 <GlobalNavbar
                     {...props}
-                    {...themeProps}
                     showSearchBox={
                         isSearchRelatedPage &&
                         !isSearchHomepage &&
@@ -303,7 +306,6 @@ export const LegacyLayout: React.FunctionComponent<React.PropsWithChildren<Legac
                 >
                     <TabbedPanelContent
                         {...props}
-                        {...themeProps}
                         repoName={`git://${parseBrowserRepoURL(location.pathname).repoName}`}
                         fetchHighlightedFileLineRanges={props.fetchHighlightedFileLineRanges}
                     />
@@ -321,7 +323,6 @@ export const LegacyLayout: React.FunctionComponent<React.PropsWithChildren<Legac
                 <LazyFuzzyFinder
                     isVisible={isFuzzyFinderVisible}
                     setIsVisible={setFuzzyFinderVisible}
-                    themeState={themeStateRef}
                     isRepositoryRelatedPage={isRepositoryRelatedPage}
                     settingsCascade={props.settingsCascade}
                     telemetryService={props.telemetryService}
diff --git a/client/web/src/SourcegraphWebApp.tsx b/client/web/src/SourcegraphWebApp.tsx
index 828d8b097f17..668312000c1a 100644
--- a/client/web/src/SourcegraphWebApp.tsx
+++ b/client/web/src/SourcegraphWebApp.tsx
@@ -73,7 +73,6 @@ import { GLOBAL_SEARCH_CONTEXT_SPEC } from './SearchQueryStateObserver'
 import type { SiteAdminAreaRoute } from './site-admin/SiteAdminArea'
 import type { SiteAdminSideBarGroups } from './site-admin/SiteAdminSidebar'
 import { setQueryStateFromSettings, setExperimentalFeaturesFromSettings, useNavbarQueryState } from './stores'
-import { useThemeProps } from './theme'
 import { eventLogger } from './tracking/eventLogger'
 import type { UserAreaRoute } from './user/area/UserArea'
 import type { UserAreaHeaderNavItem } from './user/area/UserAreaHeader'
@@ -216,8 +215,6 @@ export const SourcegraphWebApp: React.FC<SourcegraphWebAppProps> = props => {
         const parsedSearchURL = parseSearchURL(window.location.search)
         const parsedSearchQuery = parsedSearchURL.query || ''
 
-        document.documentElement.classList.add('theme')
-
         getWebGraphQLClient()
             .then(graphqlClient => {
                 setGraphqlClient(graphqlClient)
@@ -291,11 +288,9 @@ export const SourcegraphWebApp: React.FC<SourcegraphWebAppProps> = props => {
     }, [])
 
     const breadcrumbProps = useBreadcrumbs()
-    const themeProps = useThemeProps()
 
     const context = {
         ...props,
-        ...themeProps,
         ...breadcrumbProps,
         isMacPlatform: isMacPlatform(),
         telemetryService: eventLogger,
@@ -389,7 +384,6 @@ export const SourcegraphWebApp: React.FC<SourcegraphWebAppProps> = props => {
                     notebooksEnabled={props.notebooksEnabled}
                     codeMonitoringEnabled={props.codeMonitoringEnabled}
                     searchAggregationEnabled={props.searchAggregationEnabled}
-                    themeProps={themeProps}
                 />
             ),
             children: props.routes
diff --git a/client/web/src/auth/CloudSignUpPage.tsx b/client/web/src/auth/CloudSignUpPage.tsx
index 75cd64988a65..94900516fe29 100644
--- a/client/web/src/auth/CloudSignUpPage.tsx
+++ b/client/web/src/auth/CloudSignUpPage.tsx
@@ -6,7 +6,6 @@ import { useLocation } from 'react-router-dom'
 
 import { useQuery } from '@sourcegraph/http-client'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { Link, Icon, H2 } from '@sourcegraph/wildcard'
 
 import { BrandLogo } from '../components/branding/BrandLogo'
@@ -20,7 +19,7 @@ import { SignUpArguments, SignUpForm } from './SignUpForm'
 
 import styles from './CloudSignUpPage.module.scss'
 
-interface Props extends ThemeProps, TelemetryProps {
+interface Props extends TelemetryProps {
     source: string | null
     showEmailForm: boolean
     /** Called to perform the signup on the server. */
@@ -30,6 +29,7 @@ interface Props extends ThemeProps, TelemetryProps {
         'authProviders' | 'experimentalFeatures' | 'authPasswordPolicy' | 'authMinPasswordLength'
     >
     isSourcegraphDotCom: boolean
+    isLightTheme: boolean
 }
 
 const SourceToTitleMap = {
diff --git a/client/web/src/auth/SignUpPage.tsx b/client/web/src/auth/SignUpPage.tsx
index 1916bdb201f6..0c0a9fa77ef1 100644
--- a/client/web/src/auth/SignUpPage.tsx
+++ b/client/web/src/auth/SignUpPage.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames'
 import { Navigate, useLocation } from 'react-router-dom'
 
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
+import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
 import { Link, Text } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../auth'
@@ -21,7 +21,7 @@ import { VsCodeSignUpPage } from './VsCodeSignUpPage'
 
 import signInSignUpCommonStyles from './SignInSignUpCommon.module.scss'
 
-export interface SignUpPageProps extends ThemeProps, TelemetryProps {
+export interface SignUpPageProps extends TelemetryProps {
     authenticatedUser: AuthenticatedUser | null
     context: Pick<
         SourcegraphContext,
@@ -38,7 +38,6 @@ export interface SignUpPageProps extends ThemeProps, TelemetryProps {
 export const SignUpPage: React.FunctionComponent<React.PropsWithChildren<SignUpPageProps>> = ({
     authenticatedUser,
     context,
-    isLightTheme,
     telemetryService,
 }) => {
     const location = useLocation()
@@ -46,6 +45,8 @@ export const SignUpPage: React.FunctionComponent<React.PropsWithChildren<SignUpP
     const invitedBy = query.get('invitedBy')
     const returnTo = getReturnTo(location)
 
+    const isLightTheme = useIsLightTheme()
+
     useEffect(() => {
         eventLogger.logViewEvent('SignUp', null, false)
 
diff --git a/client/web/src/auth/VsCodeSignUpPage.tsx b/client/web/src/auth/VsCodeSignUpPage.tsx
index 79260579e5d2..cde58ee76450 100644
--- a/client/web/src/auth/VsCodeSignUpPage.tsx
+++ b/client/web/src/auth/VsCodeSignUpPage.tsx
@@ -5,7 +5,6 @@ import classNames from 'classnames'
 import { useLocation } from 'react-router-dom'
 
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { Link, Icon, H2 } from '@sourcegraph/wildcard'
 
 import { BrandLogo } from '../components/branding/BrandLogo'
@@ -17,12 +16,13 @@ import { SignUpArguments, SignUpForm } from './SignUpForm'
 import styles from './VsCodeSignUpPage.module.scss'
 
 export const ShowEmailFormQueryParameter = 'showEmail'
-interface Props extends ThemeProps, TelemetryProps {
+interface Props extends TelemetryProps {
     source: string | null
     showEmailForm: boolean
     /** Called to perform the signup on the server. */
     onSignUp: (args: SignUpArguments) => Promise<void>
     context: Pick<SourcegraphContext, 'authProviders' | 'experimentalFeatures' | 'authMinPasswordLength'>
+    isLightTheme: boolean
 }
 
 const VSCodeIcon: React.FC = () => (
diff --git a/client/web/src/codeintel/ReferencesPanel.mocks.ts b/client/web/src/codeintel/ReferencesPanel.mocks.ts
index 1a019ef6ee00..ba356c57b360 100644
--- a/client/web/src/codeintel/ReferencesPanel.mocks.ts
+++ b/client/web/src/codeintel/ReferencesPanel.mocks.ts
@@ -324,7 +324,6 @@ export const defaultProps: ReferencesPanelProps = {
         final: null,
     },
     platformContext: NOOP_PLATFORM_CONTEXT as any,
-    isLightTheme: false,
     fetchHighlightedFileLineRanges: args => {
         if (args.filePath === 'cmd/go-diff/go-diff.go') {
             return of(highlightedLinesGoDiffGo)
diff --git a/client/web/src/codeintel/ReferencesPanel.tsx b/client/web/src/codeintel/ReferencesPanel.tsx
index 307a06c86b32..fe5108b6175d 100644
--- a/client/web/src/codeintel/ReferencesPanel.tsx
+++ b/client/web/src/codeintel/ReferencesPanel.tsx
@@ -31,7 +31,6 @@ import { getModeFromPath } from '@sourcegraph/shared/src/languages'
 import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
 import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import {
     RepoSpec,
     RevisionSpec,
@@ -91,7 +90,6 @@ export interface ReferencesPanelProps
         TelemetryProps,
         HoverThresholdProps,
         ExtensionsControllerProps,
-        ThemeProps,
         HighlightedFileLineRangesProps {
     /** Whether to show the first loaded reference in mini code view */
     jumpToFirst?: boolean
diff --git a/client/web/src/communitySearchContexts/CommunitySearchContextPage.story.tsx b/client/web/src/communitySearchContexts/CommunitySearchContextPage.story.tsx
index 5539ab8560cc..5edc26bf9478 100644
--- a/client/web/src/communitySearchContexts/CommunitySearchContextPage.story.tsx
+++ b/client/web/src/communitySearchContexts/CommunitySearchContextPage.story.tsx
@@ -15,7 +15,6 @@ import { NOOP_SETTINGS_CASCADE } from '@sourcegraph/shared/src/testing/searchTes
 import { AuthenticatedUser } from '../auth'
 import { WebStory } from '../components/WebStory'
 import { SearchPatternType } from '../graphql-operations'
-import { ThemePreference } from '../theme'
 
 import { cncf } from './cncf'
 import { CommunitySearchContextPage, CommunitySearchContextPageProps } from './CommunitySearchContextPage'
@@ -133,26 +132,13 @@ const commonProps = () =>
     })
 
 export const Temporal: Story = () => (
-    <WebStory>
-        {webProps => (
-            <CommunitySearchContextPage
-                {...webProps}
-                {...commonProps()}
-                themePreference={webProps.isLightTheme ? ThemePreference.Light : ThemePreference.Dark}
-            />
-        )}
-    </WebStory>
+    <WebStory>{webProps => <CommunitySearchContextPage {...webProps} {...commonProps()} />}</WebStory>
 )
 
 export const CNCFStory: Story = () => (
     <WebStory>
         {webProps => (
-            <CommunitySearchContextPage
-                {...webProps}
-                {...commonProps()}
-                communitySearchContextMetadata={cncf}
-                themePreference={webProps.isLightTheme ? ThemePreference.Light : ThemePreference.Dark}
-            />
+            <CommunitySearchContextPage {...webProps} {...commonProps()} communitySearchContextMetadata={cncf} />
         )}
     </WebStory>
 )
diff --git a/client/web/src/communitySearchContexts/CommunitySearchContextPage.tsx b/client/web/src/communitySearchContexts/CommunitySearchContextPage.tsx
index eab1ef3cd08b..e41a8829192b 100644
--- a/client/web/src/communitySearchContexts/CommunitySearchContextPage.tsx
+++ b/client/web/src/communitySearchContexts/CommunitySearchContextPage.tsx
@@ -13,7 +13,6 @@ import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
 import { QueryState, SearchContextInputProps, SearchContextProps } from '@sourcegraph/shared/src/search'
 import { SettingsCascadeProps, Settings } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { Button, useObservable, Link, Card, Icon, Code, H2, H3, Text } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../auth'
@@ -22,7 +21,6 @@ import { SearchPatternType } from '../graphql-operations'
 import { submitSearch } from '../search/helpers'
 import { SearchPageInput } from '../search/home/SearchPageInput'
 import { useNavbarQueryState } from '../stores'
-import { ThemePreferenceProps } from '../theme'
 import { eventLogger } from '../tracking/eventLogger'
 
 import { CommunitySearchContextMetadata } from './types'
@@ -31,8 +29,6 @@ import styles from './CommunitySearchContextPage.module.scss'
 
 export interface CommunitySearchContextPageProps
     extends SettingsCascadeProps<Settings>,
-        ThemeProps,
-        ThemePreferenceProps,
         TelemetryProps,
         ExtensionsControllerProps<'executeCommand'>,
         PlatformContextProps<'settings' | 'sourcegraphURL' | 'requestGraphQL'>,
diff --git a/client/web/src/components/WebStory.tsx b/client/web/src/components/WebStory.tsx
index 74bae748e843..a9a45fd3263c 100644
--- a/client/web/src/components/WebStory.tsx
+++ b/client/web/src/components/WebStory.tsx
@@ -4,9 +4,9 @@ import { RouterProvider, createMemoryRouter, MemoryRouterProps } from 'react-rou
 
 import { MockedStoryProvider, MockedStoryProviderProps } from '@sourcegraph/shared/src/stories'
 import { NOOP_TELEMETRY_SERVICE, TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
+import { ThemeContext, ThemeSetting } from '@sourcegraph/shared/src/theme'
 import { WildcardThemeContext } from '@sourcegraph/wildcard'
-import { usePrependStyles, useTheme } from '@sourcegraph/wildcard/src/stories'
+import { usePrependStyles, useStorybookTheme } from '@sourcegraph/wildcard/src/stories'
 
 import { SourcegraphContext } from '../jscontext'
 import { setExperimentalFeaturesForTesting } from '../stores/experimentalFeatures'
@@ -21,7 +21,11 @@ if (!window.context) {
     window.context = {} as SourcegraphContext & Mocha.SuiteFunction
 }
 
-export type WebStoryChildrenProps = ThemeProps & BreadcrumbSetters & BreadcrumbsProps & TelemetryProps
+export type WebStoryChildrenProps = BreadcrumbSetters &
+    BreadcrumbsProps &
+    TelemetryProps & {
+        isLightTheme: boolean
+    }
 
 export interface WebStoryProps
     extends Omit<MemoryRouterProps, 'children'>,
@@ -42,7 +46,7 @@ export const WebStory: FC<WebStoryProps> = ({
     initialEntries = ['/'],
     initialIndex = 1,
 }) => {
-    const isLightTheme = useTheme()
+    const isLightTheme = useStorybookTheme()
     const breadcrumbSetters = useBreadcrumbs()
 
     usePrependStyles('web-styles', webStyles)
@@ -69,7 +73,9 @@ export const WebStory: FC<WebStoryProps> = ({
     return (
         <MockedStoryProvider mocks={mocks} useStrictMocking={useStrictMocking}>
             <WildcardThemeContext.Provider value={{ isBranded: true }}>
-                <RouterProvider router={router} />
+                <ThemeContext.Provider value={{ themeSetting: isLightTheme ? ThemeSetting.Light : ThemeSetting.Dark }}>
+                    <RouterProvider router={router} />
+                </ThemeContext.Provider>
             </WildcardThemeContext.Provider>
         </MockedStoryProvider>
     )
diff --git a/client/web/src/components/branding/BrandLogo.tsx b/client/web/src/components/branding/BrandLogo.tsx
index 8d9d33795460..3aa727a86326 100644
--- a/client/web/src/components/branding/BrandLogo.tsx
+++ b/client/web/src/components/branding/BrandLogo.tsx
@@ -2,11 +2,9 @@ import React from 'react'
 
 import classNames from 'classnames'
 
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
-
 import styles from './BrandLogo.module.scss'
 
-interface Props extends ThemeProps, Exclude<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> {
+interface Props extends Exclude<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> {
     /**
      * The site configuration `branding` property. If not set, the global value from
      * `window.context.branding` is used.
@@ -20,6 +18,8 @@ interface Props extends ThemeProps, Exclude<React.ImgHTMLAttributes<HTMLImageEle
 
     /** Whether to show the full logo (with text) or only the symbol icon. */
     variant: 'logo' | 'symbol'
+
+    isLightTheme: boolean
 }
 
 /**
diff --git a/client/web/src/components/externalServices/AddExternalServicePage.tsx b/client/web/src/components/externalServices/AddExternalServicePage.tsx
index 2a6686e5ee0c..62d5594a442d 100644
--- a/client/web/src/components/externalServices/AddExternalServicePage.tsx
+++ b/client/web/src/components/externalServices/AddExternalServicePage.tsx
@@ -4,7 +4,6 @@ import { useNavigate } from 'react-router-dom'
 
 import { asError, isErrorLike, logger, renderMarkdown } from '@sourcegraph/common'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { Alert, Container, H2, H3, H4, Markdown } from '@sourcegraph/wildcard'
 
 import { ExternalServiceFields, AddExternalServiceInput } from '../../graphql-operations'
@@ -16,7 +15,7 @@ import { ExternalServiceCard } from './ExternalServiceCard'
 import { ExternalServiceForm } from './ExternalServiceForm'
 import { AddExternalServiceOptions } from './externalServices'
 
-interface Props extends ThemeProps, TelemetryProps {
+interface Props extends TelemetryProps {
     externalService: AddExternalServiceOptions
     externalServicesFromFile: boolean
     allowEditExternalServicesWithFile: boolean
@@ -30,7 +29,6 @@ interface Props extends ThemeProps, TelemetryProps {
  */
 export const AddExternalServicePage: FC<Props> = ({
     externalService,
-    isLightTheme,
     telemetryService,
     autoFocusForm,
     externalServicesFromFile,
@@ -118,7 +116,6 @@ export const AddExternalServicePage: FC<Props> = ({
                         <H3>Instructions:</H3>
                         <div className="mb-4">{externalService.instructions}</div>
                         <ExternalServiceForm
-                            isLightTheme={isLightTheme}
                             telemetryService={telemetryService}
                             error={isErrorLike(isCreating) ? isCreating : undefined}
                             input={getExternalServiceInput()}
diff --git a/client/web/src/components/externalServices/AddExternalServicesPage.tsx b/client/web/src/components/externalServices/AddExternalServicesPage.tsx
index 02bcff363846..ab2956a6359f 100644
--- a/client/web/src/components/externalServices/AddExternalServicesPage.tsx
+++ b/client/web/src/components/externalServices/AddExternalServicesPage.tsx
@@ -4,7 +4,6 @@ import { mdiInformation } from '@mdi/js'
 import { useLocation } from 'react-router-dom'
 
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { useLocalStorage, Button, Link, Alert, H2, H3, Icon, Text, Container } from '@sourcegraph/wildcard'
 
 import { PageTitle } from '../PageTitle'
@@ -15,7 +14,7 @@ import { allExternalServices, AddExternalServiceOptions } from './externalServic
 
 import styles from './AddExternalServicesPage.module.scss'
 
-export interface AddExternalServicesPageProps extends ThemeProps, TelemetryProps {
+export interface AddExternalServicesPageProps extends TelemetryProps {
     /**
      * The list of code host external services to be displayed.
      * Pick items from externalServices.codeHostExternalServices.
@@ -39,7 +38,6 @@ export interface AddExternalServicesPageProps extends ThemeProps, TelemetryProps
  */
 export const AddExternalServicesPage: FC<AddExternalServicesPageProps> = ({
     codeHostExternalServices,
-    isLightTheme,
     nonCodeHostExternalServices,
     telemetryService,
     autoFocusForm,
@@ -61,7 +59,6 @@ export const AddExternalServicesPage: FC<AddExternalServicesPageProps> = ({
         if (externalService) {
             return (
                 <AddExternalServicePage
-                    isLightTheme={isLightTheme}
                     telemetryService={telemetryService}
                     externalService={externalService}
                     autoFocusForm={autoFocusForm}
diff --git a/client/web/src/components/externalServices/ExternalServiceEditPage.story.tsx b/client/web/src/components/externalServices/ExternalServiceEditPage.story.tsx
index 27c2f73e0623..0fb511e27f28 100644
--- a/client/web/src/components/externalServices/ExternalServiceEditPage.story.tsx
+++ b/client/web/src/components/externalServices/ExternalServiceEditPage.story.tsx
@@ -70,7 +70,6 @@ function newFetchMock(node: { __typename: 'ExternalService' } & ExternalServiceF
 export const ViewConfig: Story<WebStoryChildrenProps> = props => (
     <MockedTestProvider link={newFetchMock(externalService)}>
         <ExternalServiceEditPage
-            isLightTheme={props.isLightTheme}
             telemetryService={NOOP_TELEMETRY_SERVICE}
             autoFocusForm={false}
             externalServicesFromFile={false}
@@ -84,7 +83,6 @@ ViewConfig.storyName = 'View external service config'
 export const ConfigWithInvalidUrl: Story<WebStoryChildrenProps> = props => (
     <MockedTestProvider link={newFetchMock({ ...externalService, config: '{"url": "invalid-url"}' })}>
         <ExternalServiceEditPage
-            isLightTheme={props.isLightTheme}
             telemetryService={NOOP_TELEMETRY_SERVICE}
             autoFocusForm={false}
             externalServicesFromFile={false}
@@ -98,7 +96,6 @@ ConfigWithInvalidUrl.storyName = 'External service config with invalid url'
 export const ConfigWithWarning: Story<WebStoryChildrenProps> = props => (
     <MockedTestProvider link={newFetchMock({ ...externalService, warning: 'Invalid config we could not sync stuff' })}>
         <ExternalServiceEditPage
-            isLightTheme={props.isLightTheme}
             telemetryService={NOOP_TELEMETRY_SERVICE}
             autoFocusForm={false}
             externalServicesFromFile={false}
@@ -112,7 +109,6 @@ ConfigWithWarning.storyName = 'External service config with warning after update
 export const EditingDisabled: Story<WebStoryChildrenProps> = props => (
     <MockedTestProvider link={newFetchMock({ ...externalService, warning: 'Invalid config we could not sync stuff' })}>
         <ExternalServiceEditPage
-            isLightTheme={props.isLightTheme}
             telemetryService={NOOP_TELEMETRY_SERVICE}
             autoFocusForm={false}
             externalServicesFromFile={true}
diff --git a/client/web/src/components/externalServices/ExternalServiceEditPage.tsx b/client/web/src/components/externalServices/ExternalServiceEditPage.tsx
index 0b515c7b3042..94370dceda26 100644
--- a/client/web/src/components/externalServices/ExternalServiceEditPage.tsx
+++ b/client/web/src/components/externalServices/ExternalServiceEditPage.tsx
@@ -22,8 +22,6 @@ import { resolveExternalServiceCategory } from './externalServices'
 import { ExternalServiceWebhook } from './ExternalServiceWebhook'
 
 interface Props extends TelemetryProps {
-    isLightTheme: boolean
-
     externalServicesFromFile: boolean
     allowEditExternalServicesWithFile: boolean
 
@@ -35,7 +33,6 @@ const getExternalService = (queryResult?: ExternalServiceResult): ExternalServic
     queryResult?.node?.__typename === 'ExternalService' ? queryResult.node : null
 
 export const ExternalServiceEditPage: FC<Props> = ({
-    isLightTheme,
     telemetryService,
     externalServicesFromFile,
     allowEditExternalServicesWithFile,
@@ -169,7 +166,6 @@ export const ExternalServiceEditPage: FC<Props> = ({
                             loading={combinedLoading}
                             onSubmit={onSubmit}
                             onChange={onChange}
-                            isLightTheme={isLightTheme}
                             telemetryService={telemetryService}
                             autoFocus={autoFocusForm}
                             externalServicesFromFile={externalServicesFromFile}
diff --git a/client/web/src/components/externalServices/ExternalServiceForm.tsx b/client/web/src/components/externalServices/ExternalServiceForm.tsx
index 66c282dc65bc..0c28dc51645d 100644
--- a/client/web/src/components/externalServices/ExternalServiceForm.tsx
+++ b/client/web/src/components/externalServices/ExternalServiceForm.tsx
@@ -2,7 +2,7 @@ import React, { useCallback } from 'react'
 
 import { ErrorLike } from '@sourcegraph/common'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
+import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
 import {
     Button,
     LoadingSpinner,
@@ -23,7 +23,7 @@ import { ExternalServiceEditingDisabledAlert } from './ExternalServiceEditingDis
 import { ExternalServiceEditingTemporaryAlert } from './ExternalServiceEditingTemporaryAlert'
 import { AddExternalServiceOptions } from './externalServices'
 
-interface Props extends Pick<AddExternalServiceOptions, 'jsonSchema' | 'editorActions'>, ThemeProps, TelemetryProps {
+interface Props extends Pick<AddExternalServiceOptions, 'jsonSchema' | 'editorActions'>, TelemetryProps {
     input: AddExternalServiceInput
     externalServiceID?: string
     error?: ErrorLike
@@ -43,7 +43,6 @@ interface Props extends Pick<AddExternalServiceOptions, 'jsonSchema' | 'editorAc
  * Form for submitting a new or updated external service.
  */
 export const ExternalServiceForm: React.FunctionComponent<React.PropsWithChildren<Props>> = ({
-    isLightTheme,
     telemetryService,
     jsonSchema,
     editorActions,
@@ -61,6 +60,7 @@ export const ExternalServiceForm: React.FunctionComponent<React.PropsWithChildre
     allowEditExternalServicesWithFile,
     autoFocus = true,
 }) => {
+    const isLightTheme = useIsLightTheme()
     const onDisplayNameChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(
         event => {
             onChange({ ...input, displayName: event.currentTarget.value })
diff --git a/client/web/src/components/externalServices/ExternalServicePage.story.tsx b/client/web/src/components/externalServices/ExternalServicePage.story.tsx
index fdbff64f529e..bf3e3b562fa0 100644
--- a/client/web/src/components/externalServices/ExternalServicePage.story.tsx
+++ b/client/web/src/components/externalServices/ExternalServicePage.story.tsx
@@ -130,7 +130,6 @@ function newFetchMock(node: { __typename: 'ExternalService' } & ExternalServiceF
 export const ExternalServiceWithRepos: Story<WebStoryChildrenProps> = props => (
     <MockedTestProvider link={newFetchMock(externalService)}>
         <ExternalServicePage
-            isLightTheme={props.isLightTheme}
             queryExternalServiceSyncJobs={queryExternalServiceSyncJobs}
             afterDeleteRoute="/site-admin/after-delete"
             telemetryService={NOOP_TELEMETRY_SERVICE}
diff --git a/client/web/src/components/externalServices/ExternalServicePage.tsx b/client/web/src/components/externalServices/ExternalServicePage.tsx
index b0fe9a9974df..8a1a413e1e03 100644
--- a/client/web/src/components/externalServices/ExternalServicePage.tsx
+++ b/client/web/src/components/externalServices/ExternalServicePage.tsx
@@ -8,6 +8,7 @@ import { Subject } from 'rxjs'
 import { asError, isErrorLike } from '@sourcegraph/common'
 import { useQuery } from '@sourcegraph/http-client'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
+import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
 import { Alert, Button, Container, ErrorAlert, H2, Icon, Link, PageHeader, Tooltip } from '@sourcegraph/wildcard'
 
 import { ExternalServiceResult, ExternalServiceVariables } from '../../graphql-operations'
@@ -31,7 +32,6 @@ import { ExternalServiceSyncJobsList } from './ExternalServiceSyncJobsList'
 import { ExternalServiceWebhook } from './ExternalServiceWebhook'
 
 interface Props extends TelemetryProps {
-    isLightTheme: boolean
     afterDeleteRoute: string
 
     externalServicesFromFile: boolean
@@ -47,7 +47,6 @@ const NotFoundPage: FC = () => (
 
 export const ExternalServicePage: FC<Props> = props => {
     const {
-        isLightTheme,
         telemetryService,
         afterDeleteRoute,
         externalServicesFromFile,
@@ -55,6 +54,7 @@ export const ExternalServicePage: FC<Props> = props => {
         queryExternalServiceSyncJobs = _queryExternalServiceSyncJobs,
     } = props
 
+    const isLightTheme = useIsLightTheme()
     const { externalServiceID } = useParams()
     const navigate = useNavigate()
 
diff --git a/client/web/src/components/fuzzyFinder/FuzzyActions.tsx b/client/web/src/components/fuzzyFinder/FuzzyActions.tsx
index 9864f7e7952c..b23900ccd74e 100644
--- a/client/web/src/components/fuzzyFinder/FuzzyActions.tsx
+++ b/client/web/src/components/fuzzyFinder/FuzzyActions.tsx
@@ -1,11 +1,8 @@
-import { MutableRefObject } from 'react'
-
 import { mdiCodeGreaterThan } from '@mdi/js'
 
+import { Theme, ThemeSetting } from '@sourcegraph/shared/src/theme'
 import { Icon } from '@sourcegraph/wildcard'
 
-import { ThemePreference, ThemeState } from '../../theme'
-
 import { FuzzyFSM, newFuzzyFSMFromValues } from './FuzzyFsm'
 
 export class FuzzyAction {
@@ -13,17 +10,20 @@ export class FuzzyAction {
 }
 
 export interface FuzzyActionProps {
-    themeState: MutableRefObject<ThemeState>
+    theme: Theme
+    setThemeSetting: (theme: ThemeSetting) => void
 }
+
 export function getAllFuzzyActions(props: FuzzyActionProps): FuzzyAction[] {
+    const { theme, setThemeSetting } = props
+
     return [
         new FuzzyAction('toggle.theme', 'Toggle Between Dark/Light Theme', () => {
-            const themeState = props.themeState.current
-            switch (themeState.enhancedThemePreference) {
-                case ThemePreference.Dark:
-                    return themeState.setThemePreference(ThemePreference.Light)
-                case ThemePreference.Light:
-                    return themeState.setThemePreference(ThemePreference.Dark)
+            switch (theme) {
+                case Theme.Dark:
+                    return setThemeSetting(ThemeSetting.Light)
+                case Theme.Light:
+                    return setThemeSetting(ThemeSetting.Dark)
             }
         }),
     ]
diff --git a/client/web/src/components/fuzzyFinder/FuzzyFinder.mocks.tsx b/client/web/src/components/fuzzyFinder/FuzzyFinder.mocks.tsx
index dad2c9a55105..d9755393ce73 100644
--- a/client/web/src/components/fuzzyFinder/FuzzyFinder.mocks.tsx
+++ b/client/web/src/components/fuzzyFinder/FuzzyFinder.mocks.tsx
@@ -7,7 +7,6 @@ import { Settings } from '@sourcegraph/shared/src/settings/settings'
 import { NOOP_TELEMETRY_SERVICE } from '@sourcegraph/shared/src/telemetry/telemetryService'
 
 import { FileNamesResult, FuzzyFinderRepoResult, FuzzyFinderSymbolsResult, SymbolKind } from '../../graphql-operations'
-import { ThemePreference } from '../../theme'
 import { UserHistory } from '../useUserHistory'
 
 import { FUZZY_GIT_LSFILES_QUERY } from './FuzzyFiles'
@@ -34,13 +33,6 @@ export const FuzzyWrapper: React.FunctionComponent<FuzzyWrapperProps> = props =>
             location={history.location}
             settingsCascade={{ final: { experimentalFeatures: props.experimentalFeatures }, subjects: null }}
             telemetryService={NOOP_TELEMETRY_SERVICE}
-            themeState={{
-                current: {
-                    enhancedThemePreference: ThemePreference.Light,
-                    themePreference: ThemePreference.Light,
-                    setThemePreference: () => {},
-                },
-            }}
             initialQuery={props.initialQuery}
             userHistory={new UserHistory()}
         />
diff --git a/client/web/src/components/fuzzyFinder/FuzzyTabs.tsx b/client/web/src/components/fuzzyFinder/FuzzyTabs.tsx
index c69662334323..4b91e5501920 100644
--- a/client/web/src/components/fuzzyFinder/FuzzyTabs.tsx
+++ b/client/web/src/components/fuzzyFinder/FuzzyTabs.tsx
@@ -5,6 +5,7 @@ import * as H from 'history'
 
 import { KEYBOARD_SHORTCUTS } from '@sourcegraph/shared/src/keyboardShortcuts/keyboardShortcuts'
 import { Settings, SettingsCascadeOrError } from '@sourcegraph/shared/src/settings/settings'
+import { useTheme } from '@sourcegraph/shared/src/theme'
 import { toPrettyBlobURL } from '@sourcegraph/shared/src/util/url'
 import { useSessionStorage } from '@sourcegraph/wildcard'
 
@@ -13,7 +14,7 @@ import { parseBrowserRepoURL } from '../../util/url'
 import { Keybindings, plaintextKeybindings } from '../KeyboardShortcutsHelp/KeyboardShortcutsHelp'
 import { UserHistory } from '../useUserHistory'
 
-import { createActionsFSM, FuzzyActionProps, getAllFuzzyActions } from './FuzzyActions'
+import { createActionsFSM, getAllFuzzyActions } from './FuzzyActions'
 import { FuzzyFiles, FuzzyRepoFiles } from './FuzzyFiles'
 import { getFuzzyFinderFeatureFlags } from './FuzzyFinderFeatureFlag'
 import { FuzzyFSM } from './FuzzyFsm'
@@ -208,7 +209,7 @@ export function defaultFuzzyState(): FuzzyState {
         },
     }
 }
-export interface FuzzyTabsProps extends FuzzyActionProps {
+export interface FuzzyTabsProps {
     settingsCascade: SettingsCascadeOrError<Settings>
     isRepositoryRelatedPage: boolean
     location: H.Location
@@ -220,7 +221,6 @@ export interface FuzzyTabsProps extends FuzzyActionProps {
 
 export function useFuzzyState(props: FuzzyTabsProps): FuzzyState {
     const {
-        themeState,
         isVisible,
         location: { pathname, search, hash },
         isRepositoryRelatedPage,
@@ -297,11 +297,12 @@ export function useFuzzyState(props: FuzzyTabsProps): FuzzyState {
         [revision, repoName]
     )
 
+    const { theme, setThemeSetting } = useTheme()
     // Actions
     const actions = useMemo<FuzzyTabFSM>(() => {
-        const fsm = createActionsFSM(getAllFuzzyActions({ themeState }))
+        const fsm = createActionsFSM(getAllFuzzyActions({ theme, setThemeSetting }))
         return new FuzzyTabFSM('actions', 'always', () => fsm)
-    }, [themeState])
+    }, [theme, setThemeSetting])
 
     // Repos
     const repos = useMemo<FuzzyTabFSM>(() => {
diff --git a/client/web/src/enterprise/batches/BatchSpec.tsx b/client/web/src/enterprise/batches/BatchSpec.tsx
index 0f9bf262dafd..5ee60ebdea80 100644
--- a/client/web/src/enterprise/batches/BatchSpec.tsx
+++ b/client/web/src/enterprise/batches/BatchSpec.tsx
@@ -4,7 +4,7 @@ import { mdiFileDownload } from '@mdi/js'
 import { kebabCase } from 'lodash'
 
 import { Timestamp } from '@sourcegraph/branded/src/components/Timestamp'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
+import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
 import { Link, Icon, Text, Tooltip, Button, AnchorLink } from '@sourcegraph/wildcard'
 
 import { BatchChangeFields } from '../../graphql-operations'
@@ -24,18 +24,14 @@ const isJSON = (string: string): boolean => {
 
 export const getFileName = (name: string): string => `${kebabCase(name)}.batch.yaml`
 
-export interface BatchSpecProps extends ThemeProps {
+export interface BatchSpecProps {
     name: string
     originalInput: BatchChangeFields['currentSpec']['originalInput']
     className?: string
 }
 
-export const BatchSpec: React.FunctionComponent<BatchSpecProps> = ({
-    originalInput,
-    isLightTheme,
-    className,
-    name,
-}) => {
+export const BatchSpec: React.FunctionComponent<BatchSpecProps> = ({ originalInput, className, name }) => {
+    const isLightTheme = useIsLightTheme()
     // JSON is valid YAML, so the input might be JSON. In that case, we'll highlight and indent it
     // as JSON. This is especially nice when the input is a "minified" (no extraneous whitespace)
     // JSON document that's difficult to read unless indented.
diff --git a/client/web/src/enterprise/batches/BatchSpecNode.tsx b/client/web/src/enterprise/batches/BatchSpecNode.tsx
index 0dae91b62a1c..74ae1fdf7be4 100644
--- a/client/web/src/enterprise/batches/BatchSpecNode.tsx
+++ b/client/web/src/enterprise/batches/BatchSpecNode.tsx
@@ -18,7 +18,6 @@ import { upperFirst } from 'lodash'
 import { Timestamp } from '@sourcegraph/branded/src/components/Timestamp'
 import { useQuery } from '@sourcegraph/http-client'
 import { BatchSpecSource, BatchSpecState } from '@sourcegraph/shared/src/graphql-operations'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import {
     Code,
     Link,
@@ -48,7 +47,7 @@ import { humanizeSize } from './utils/size'
 
 import styles from './BatchSpecNode.module.scss'
 
-export interface BatchSpecNodeProps extends ThemeProps {
+export interface BatchSpecNodeProps {
     node: BatchSpecListFields
     currentSpecID?: Scalars['ID']
     /** Used for testing purposes. Sets the current date */
@@ -58,7 +57,6 @@ export interface BatchSpecNodeProps extends ThemeProps {
 export const BatchSpecNode: React.FunctionComponent<React.PropsWithChildren<BatchSpecNodeProps>> = ({
     node,
     currentSpecID,
-    isLightTheme,
     now = () => new Date(),
 }) => {
     const [isExpanded, setIsExpanded] = useState(currentSpecID === node.id)
@@ -128,7 +126,7 @@ export const BatchSpecNode: React.FunctionComponent<React.PropsWithChildren<Batc
             </div>
             {isExpanded && (
                 <div className={styles.nodeExpandedSection}>
-                    <BatchSpecInfo spec={node} isLightTheme={isLightTheme} />
+                    <BatchSpecInfo spec={node} />
                 </div>
             )}
         </li>
@@ -137,14 +135,13 @@ export const BatchSpecNode: React.FunctionComponent<React.PropsWithChildren<Batc
 
 interface BatchSpecInfoProps {
     spec: Pick<BatchSpecListFields, 'originalInput' | 'id' | 'files' | 'description'>
-    isLightTheme: boolean
 }
 
 type BatchWorkspaceFile = {
     isSpecFile: boolean
 } & Omit<PartialBatchSpecWorkspaceFileFields, '__typename'>
 
-export const BatchSpecInfo: React.FunctionComponent<BatchSpecInfoProps> = ({ spec, isLightTheme }) => {
+export const BatchSpecInfo: React.FunctionComponent<BatchSpecInfoProps> = ({ spec }) => {
     const specFile: BatchWorkspaceFile = {
         binary: false,
         isSpecFile: true,
@@ -185,7 +182,6 @@ export const BatchSpecInfo: React.FunctionComponent<BatchSpecInfoProps> = ({ spe
 
                 {selectedFile.isSpecFile ? (
                     <BatchSpec
-                        isLightTheme={isLightTheme}
                         name={spec.description.name}
                         originalInput={spec.originalInput}
                         className={classNames(styles.batchSpec, 'mb-0')}
@@ -201,7 +197,6 @@ export const BatchSpecInfo: React.FunctionComponent<BatchSpecInfoProps> = ({ spe
         <>
             <H4>Input spec</H4>
             <BatchSpec
-                isLightTheme={isLightTheme}
                 name={spec.description.name}
                 originalInput={spec.originalInput}
                 className={classNames(styles.batchSpec, 'mb-0')}
diff --git a/client/web/src/enterprise/batches/BatchSpecsPage.tsx b/client/web/src/enterprise/batches/BatchSpecsPage.tsx
index 285e8cb1d30a..1f0172b39514 100644
--- a/client/web/src/enterprise/batches/BatchSpecsPage.tsx
+++ b/client/web/src/enterprise/batches/BatchSpecsPage.tsx
@@ -3,7 +3,6 @@ import React, { FC, useCallback, useMemo } from 'react'
 import { mdiMapSearch } from '@mdi/js'
 import classNames from 'classnames'
 
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { Container, PageHeader, H3, H5, Icon } from '@sourcegraph/wildcard'
 
 import { FilteredConnection, FilteredConnectionQueryArguments } from '../../components/FilteredConnection'
@@ -18,7 +17,12 @@ import { BatchSpecNode, BatchSpecNodeProps } from './BatchSpecNode'
 
 import styles from './BatchSpecsPage.module.scss'
 
-export interface BatchSpecsPageProps extends Omit<BatchSpecListProps, 'currentSpecID'> {}
+export interface BatchSpecsPageProps {
+    queryBatchSpecs?: typeof _queryBatchSpecs
+
+    /** For testing purposes only. Sets the current date */
+    now?: () => Date
+}
 
 export const BatchSpecsPage: FC<BatchSpecsPageProps> = props => (
     <>
@@ -30,7 +34,7 @@ export const BatchSpecsPage: FC<BatchSpecsPageProps> = props => (
             className="mb-3"
         />
         <Container>
-            <BatchSpecList {...props} />
+            <BatchSpecList queryBatchSpecs={props.queryBatchSpecs} now={props.now} />
         </Container>
     </>
 )
@@ -43,13 +47,13 @@ export interface BatchChangeBatchSpecListProps extends Omit<BatchSpecListProps,
 
 export const BatchChangeBatchSpecList: React.FunctionComponent<
     React.PropsWithChildren<BatchChangeBatchSpecListProps>
-> = ({ batchChangeID, currentSpecID, isLightTheme, queryBatchChangeBatchSpecs = _queryBatchChangeBatchSpecs, now }) => {
+> = ({ batchChangeID, currentSpecID, queryBatchChangeBatchSpecs = _queryBatchChangeBatchSpecs, now }) => {
     const query = useMemo(() => queryBatchChangeBatchSpecs(batchChangeID), [queryBatchChangeBatchSpecs, batchChangeID])
 
-    return <BatchSpecList queryBatchSpecs={query} isLightTheme={isLightTheme} currentSpecID={currentSpecID} now={now} />
+    return <BatchSpecList queryBatchSpecs={query} currentSpecID={currentSpecID} now={now} />
 }
 
-export interface BatchSpecListProps extends ThemeProps {
+export interface BatchSpecListProps {
     currentSpecID?: Scalars['ID']
     queryBatchSpecs?: typeof _queryBatchSpecs
     /** For testing purposes only. Sets the current date */
@@ -58,7 +62,6 @@ export interface BatchSpecListProps extends ThemeProps {
 
 export const BatchSpecList: React.FunctionComponent<React.PropsWithChildren<BatchSpecListProps>> = ({
     currentSpecID,
-    isLightTheme,
     queryBatchSpecs = _queryBatchSpecs,
     now,
 }) => {
@@ -77,7 +80,7 @@ export const BatchSpecList: React.FunctionComponent<React.PropsWithChildren<Batc
     return (
         <FilteredConnection<BatchSpecListFields, Omit<BatchSpecNodeProps, 'node'>>
             nodeComponent={BatchSpecNode}
-            nodeComponentProps={{ currentSpecID, isLightTheme, now }}
+            nodeComponentProps={{ currentSpecID, now }}
             queryConnection={query}
             hideSearch={true}
             defaultFirst={20}
diff --git a/client/web/src/enterprise/batches/batch-spec/edit/EditBatchSpecPage.tsx b/client/web/src/enterprise/batches/batch-spec/edit/EditBatchSpecPage.tsx
index 1fb100481c84..09b4e2a59737 100644
--- a/client/web/src/enterprise/batches/batch-spec/edit/EditBatchSpecPage.tsx
+++ b/client/web/src/enterprise/batches/batch-spec/edit/EditBatchSpecPage.tsx
@@ -6,7 +6,7 @@ import { useNavigate, useParams } from 'react-router-dom'
 import { useQuery } from '@sourcegraph/http-client'
 import { Settings, SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
 import { useTemporarySetting } from '@sourcegraph/shared/src/settings/temporary/useTemporarySetting'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
+import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
 import { Button, Icon, LoadingSpinner, H3, H4, Alert } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../../../../auth'
@@ -42,7 +42,7 @@ import { WorkspacesPreviewPanel } from './workspaces-preview/WorkspacesPreviewPa
 import layoutStyles from '../Layout.module.scss'
 import styles from './EditBatchSpecPage.module.scss'
 
-export interface EditBatchSpecPageProps extends NamespaceProps, SettingsCascadeProps<Settings>, ThemeProps {
+export interface EditBatchSpecPageProps extends NamespaceProps, SettingsCascadeProps<Settings> {
     authenticatedUser: AuthenticatedUser | null
 }
 
@@ -97,7 +97,7 @@ export const EditBatchSpecPage: FC<EditBatchSpecPageProps> = props => {
     )
 }
 
-interface EditBatchSpecPageContentProps extends SettingsCascadeProps<Settings>, ThemeProps {
+interface EditBatchSpecPageContentProps extends SettingsCascadeProps<Settings> {
     authenticatedUser: AuthenticatedUser | null
 }
 
@@ -124,7 +124,6 @@ const MemoizedEditBatchSpecPageContent: React.FunctionComponent<
     React.PropsWithChildren<MemoizedEditBatchSpecPageContentProps>
 > = React.memo(function MemoizedEditBatchSpecPageContent({
     settingsCascade,
-    isLightTheme,
     batchChange,
     batchSpec,
     editor,
@@ -132,7 +131,7 @@ const MemoizedEditBatchSpecPageContent: React.FunctionComponent<
     authenticatedUser,
 }) {
     const navigate = useNavigate()
-
+    const isLightTheme = useIsLightTheme()
     const { insightTitle } = useInsightTemplates(settingsCascade)
     const { searchQuery } = useSearchTemplate()
 
diff --git a/client/web/src/enterprise/batches/batch-spec/edit/editor/MonacoBatchSpecEditor.tsx b/client/web/src/enterprise/batches/batch-spec/edit/editor/MonacoBatchSpecEditor.tsx
index b31cb8b78aa8..ec29df75fcf0 100644
--- a/client/web/src/enterprise/batches/batch-spec/edit/editor/MonacoBatchSpecEditor.tsx
+++ b/client/web/src/enterprise/batches/batch-spec/edit/editor/MonacoBatchSpecEditor.tsx
@@ -12,7 +12,6 @@ import { distinctUntilChanged, filter, map, startWith, switchMap } from 'rxjs/op
 
 import { dataOrThrowErrors } from '@sourcegraph/http-client'
 import { MonacoEditor } from '@sourcegraph/shared/src/components/MonacoEditor'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 
 import batchSpecSchemaJSON from '../../../../../../../../schema/batch_spec.schema.json'
 import { requestGraphQL } from '../../../../../backend/graphql'
@@ -34,11 +33,12 @@ interface JSONSchema {
     $id: string
 }
 
-export interface Props extends ThemeProps {
+export interface Props {
     className?: string
     batchChangeNamespace?: { id: Scalars['ID']; __typename: 'User' | 'Org' }
     batchChangeName: string
     value: string | undefined
+    isLightTheme: boolean
     onChange?: (newValue: string) => void
     readOnly?: boolean | undefined
     autoFocus?: boolean
diff --git a/client/web/src/enterprise/batches/batch-spec/execute/ExecuteBatchSpecPage.tsx b/client/web/src/enterprise/batches/batch-spec/execute/ExecuteBatchSpecPage.tsx
index e490a0f3b2ff..7627b8dcd12f 100644
--- a/client/web/src/enterprise/batches/batch-spec/execute/ExecuteBatchSpecPage.tsx
+++ b/client/web/src/enterprise/batches/batch-spec/execute/ExecuteBatchSpecPage.tsx
@@ -10,7 +10,6 @@ import { Timestamp } from '@sourcegraph/branded/src/components/Timestamp'
 import { useQuery } from '@sourcegraph/http-client'
 import { AuthenticatedUser } from '@sourcegraph/shared/src/auth'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { Badge, Icon, LoadingSpinner, ErrorMessage, LinkOrSpan } from '@sourcegraph/wildcard'
 
 import { withAuthenticatedUser } from '../../../../auth/withAuthenticatedUser'
@@ -43,7 +42,7 @@ import { ExecutionWorkspaces } from './workspaces/ExecutionWorkspaces'
 import layoutStyles from '../Layout.module.scss'
 import styles from './ExecuteBatchSpecPage.module.scss'
 
-export interface AuthenticatedExecuteBatchSpecPageProps extends ThemeProps, TelemetryProps, NamespaceProps {
+export interface AuthenticatedExecuteBatchSpecPageProps extends TelemetryProps, NamespaceProps {
     authenticatedUser: AuthenticatedUser
     /** FOR TESTING ONLY */
     testContextState?: Partial<BatchSpecContextState<BatchSpecExecutionFields>>
@@ -108,7 +107,7 @@ export const AuthenticatedExecuteBatchSpecPage: FC<AuthenticatedExecuteBatchSpec
     )
 }
 
-interface ExecuteBatchSpecPageContentProps extends ThemeProps, TelemetryProps {
+interface ExecuteBatchSpecPageContentProps extends TelemetryProps {
     authenticatedUser: AuthenticatedUser
     queryWorkspacesList?: typeof _queryWorkspacesList
 }
@@ -128,7 +127,6 @@ type MemoizedExecuteBatchSpecContentProps = ExecuteBatchSpecPageContentProps &
 
 const MemoizedExecuteBatchSpecContent: FC<MemoizedExecuteBatchSpecContentProps> = React.memo(
     function MemoizedExecuteBatchSpecContent({
-        isLightTheme,
         telemetryService,
         authenticatedUser,
         batchChange,
@@ -226,7 +224,7 @@ const MemoizedExecuteBatchSpecContent: FC<MemoizedExecuteBatchSpecContentProps>
                         element={
                             <>
                                 <TabBar activeTabKey="spec" tabsConfig={tabsConfig} matchURL={executionURL} />
-                                <ReadOnlyBatchSpecForm isLightTheme={isLightTheme} />
+                                <ReadOnlyBatchSpecForm />
                             </>
                         }
                     />
@@ -235,10 +233,7 @@ const MemoizedExecuteBatchSpecContent: FC<MemoizedExecuteBatchSpecContentProps>
                         element={
                             <>
                                 <TabBar activeTabKey="execution" tabsConfig={tabsConfig} matchURL={executionURL} />
-                                <ExecutionWorkspaces
-                                    isLightTheme={isLightTheme}
-                                    queryWorkspacesList={queryWorkspacesList}
-                                />
+                                <ExecutionWorkspaces queryWorkspacesList={queryWorkspacesList} />
                             </>
                         }
                     />
@@ -247,10 +242,7 @@ const MemoizedExecuteBatchSpecContent: FC<MemoizedExecuteBatchSpecContentProps>
                         element={
                             <>
                                 <TabBar activeTabKey="execution" tabsConfig={tabsConfig} matchURL={executionURL} />
-                                <ExecutionWorkspaces
-                                    isLightTheme={isLightTheme}
-                                    queryWorkspacesList={queryWorkspacesList}
-                                />
+                                <ExecutionWorkspaces queryWorkspacesList={queryWorkspacesList} />
                             </>
                         }
                     />
@@ -269,7 +261,6 @@ const MemoizedExecuteBatchSpecContent: FC<MemoizedExecuteBatchSpecContentProps>
                                     <NewBatchChangePreviewPage
                                         authenticatedUser={authenticatedUser}
                                         telemetryService={telemetryService}
-                                        isLightTheme={isLightTheme}
                                     />
                                 </>
                             ) : (
diff --git a/client/web/src/enterprise/batches/batch-spec/execute/ReadOnlyBatchSpecForm.tsx b/client/web/src/enterprise/batches/batch-spec/execute/ReadOnlyBatchSpecForm.tsx
index d89815dff057..9d271e4078dc 100644
--- a/client/web/src/enterprise/batches/batch-spec/execute/ReadOnlyBatchSpecForm.tsx
+++ b/client/web/src/enterprise/batches/batch-spec/execute/ReadOnlyBatchSpecForm.tsx
@@ -3,7 +3,6 @@ import React, { FC, useMemo, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import { useMutation } from '@sourcegraph/http-client'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { Button, H3, H4, Link, Text } from '@sourcegraph/wildcard'
 
 import {
@@ -23,16 +22,15 @@ import { ReadOnlyBatchSpecAlert } from './ReadOnlyBatchSpecAlert'
 
 import editorStyles from '../edit/EditBatchSpecPage.module.scss'
 
-interface ReadOnlyBatchSpecFormProps extends ThemeProps {}
+interface ReadOnlyBatchSpecFormProps {}
 
-export const ReadOnlyBatchSpecForm: React.FunctionComponent<React.PropsWithChildren<ReadOnlyBatchSpecFormProps>> = ({
-    isLightTheme,
-}) => {
+export const ReadOnlyBatchSpecForm: React.FunctionComponent<
+    React.PropsWithChildren<ReadOnlyBatchSpecFormProps>
+> = () => {
     const { batchChange, batchSpec, setActionsError } = useBatchSpecContext<BatchSpecExecutionFields>()
 
     return (
         <MemoizedReadOnlyBatchSpecForm
-            isLightTheme={isLightTheme}
             batchChange={batchChange}
             batchSpec={batchSpec}
             setActionsError={setActionsError}
@@ -44,7 +42,7 @@ type MemoizedReadOnlyBatchSpecFormProps = ReadOnlyBatchSpecFormProps &
     Pick<BatchSpecContextState, 'batchChange' | 'batchSpec' | 'setActionsError'>
 
 const MemoizedReadOnlyBatchSpecForm: FC<MemoizedReadOnlyBatchSpecFormProps> = React.memo(
-    function MemoizedReadOnlyBatchSpecForm({ isLightTheme, batchChange, batchSpec, setActionsError }) {
+    function MemoizedReadOnlyBatchSpecForm({ batchChange, batchSpec, setActionsError }) {
         const navigate = useNavigate()
 
         const [showCancelModal, setShowCancelModal] = useState(false)
@@ -122,7 +120,6 @@ const MemoizedReadOnlyBatchSpecForm: FC<MemoizedReadOnlyBatchSpecFormProps> = Re
                     <BatchSpec
                         name={batchChange.name}
                         className={editorStyles.editor}
-                        isLightTheme={isLightTheme}
                         originalInput={batchSpec.originalInput}
                     />
                 </div>
diff --git a/client/web/src/enterprise/batches/batch-spec/execute/workspaces/ExecutionWorkspaces.tsx b/client/web/src/enterprise/batches/batch-spec/execute/workspaces/ExecutionWorkspaces.tsx
index d363e290369a..7c782299a406 100644
--- a/client/web/src/enterprise/batches/batch-spec/execute/workspaces/ExecutionWorkspaces.tsx
+++ b/client/web/src/enterprise/batches/batch-spec/execute/workspaces/ExecutionWorkspaces.tsx
@@ -4,7 +4,7 @@ import { mdiClose } from '@mdi/js'
 import { VisuallyHidden } from '@reach/visually-hidden'
 import { useNavigate, useParams } from 'react-router-dom'
 
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
+import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
 import { Card, CardBody, H3, H1, Icon, Text, Code, ErrorAlert } from '@sourcegraph/wildcard'
 
 import { BatchSpecExecutionFields, BatchSpecSource } from '../../../../../graphql-operations'
@@ -20,7 +20,7 @@ import { WorkspacesPanel } from './WorkspacesPanel'
 
 import styles from './ExecutionWorkspaces.module.scss'
 
-interface ExecutionWorkspacesProps extends ThemeProps {
+interface ExecutionWorkspacesProps {
     /** For testing purposes only */
     queryBatchSpecWorkspaceStepFileDiffs?: typeof _queryBatchSpecWorkspaceStepFileDiffs
     queryChangesetSpecFileDiffs?: typeof _queryChangesetSpecFileDiffs
@@ -53,7 +53,6 @@ type MemoizedExecutionWorkspacesProps = ExecutionWorkspacesProps & Pick<BatchSpe
 
 const MemoizedExecutionWorkspaces: React.FunctionComponent<React.PropsWithChildren<MemoizedExecutionWorkspacesProps>> =
     React.memo(function MemoizedExecutionWorkspaces({
-        isLightTheme,
         batchSpec,
         errors,
         queryBatchSpecWorkspaceStepFileDiffs,
@@ -61,6 +60,7 @@ const MemoizedExecutionWorkspaces: React.FunctionComponent<React.PropsWithChildr
         queryWorkspacesList,
     }) {
         const navigate = useNavigate()
+        const isLightTheme = useIsLightTheme()
         const { workspaceID: selectedWorkspaceID } = useParams()
 
         const deselectWorkspace = useCallback(() => {
diff --git a/client/web/src/enterprise/batches/create/CreateBatchChangePage.tsx b/client/web/src/enterprise/batches/create/CreateBatchChangePage.tsx
index 73571ac722ab..eabb7d83d5a0 100644
--- a/client/web/src/enterprise/batches/create/CreateBatchChangePage.tsx
+++ b/client/web/src/enterprise/batches/create/CreateBatchChangePage.tsx
@@ -2,7 +2,6 @@ import React from 'react'
 
 import { Settings } from '@sourcegraph/shared/src/schema/settings.schema'
 import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { Link, PageHeader } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../../../auth'
@@ -23,7 +22,7 @@ import { useSearchTemplate } from './useSearchTemplate'
 
 import layoutStyles from '../batch-spec/Layout.module.scss'
 
-export interface CreateBatchChangePageProps extends SettingsCascadeProps<Settings>, ThemeProps {
+export interface CreateBatchChangePageProps extends SettingsCascadeProps<Settings> {
     authenticatedUser: AuthenticatedUser | null
     // TODO: This can go away once we only have the new SSBC create page
     headingElement: 'h1' | 'h2'
diff --git a/client/web/src/enterprise/batches/detail/BatchChangeDetailsTabs.tsx b/client/web/src/enterprise/batches/detail/BatchChangeDetailsTabs.tsx
index efc53ec43ec0..4dbd36096df2 100644
--- a/client/web/src/enterprise/batches/detail/BatchChangeDetailsTabs.tsx
+++ b/client/web/src/enterprise/batches/detail/BatchChangeDetailsTabs.tsx
@@ -5,7 +5,6 @@ import { useNavigate, useLocation } from 'react-router-dom'
 
 import { Settings, SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { Badge, Container, Icon, Link, Tab, TabPanel, TabPanels, Text } from '@sourcegraph/wildcard'
 
 import { isBatchChangesExecutionEnabled } from '../../../batches'
@@ -56,7 +55,7 @@ const getTabName = (tabIndex: number, shouldDisplayExecutionsTab: boolean): TabN
     ][tabIndex]
 
 /** `BatchChangeDetailsPage` and `BatchChangeDetailsTabs` share all these props */
-export interface BatchChangeDetailsProps extends ThemeProps, TelemetryProps {
+export interface BatchChangeDetailsProps extends TelemetryProps {
     /** The name of the tab that should be initially open */
     initialTab?: TabName
 
@@ -73,7 +72,6 @@ interface BatchChangeDetailsTabsProps extends BatchChangeDetailsProps, SettingsC
 
 export const BatchChangeDetailsTabs: React.FunctionComponent<React.PropsWithChildren<BatchChangeDetailsTabsProps>> = ({
     batchChange,
-    isLightTheme,
     settingsCascade,
     initialTab = TabName.Changesets,
     queryExternalChangesetWithFileDiffs,
@@ -240,7 +238,6 @@ export const BatchChangeDetailsTabs: React.FunctionComponent<React.PropsWithChil
                             <BatchChangeBatchSpecList
                                 batchChangeID={batchChange.id}
                                 currentSpecID={batchChange.currentSpec.id}
-                                isLightTheme={isLightTheme}
                             />
                         </Container>
                     ) : (
@@ -256,7 +253,7 @@ export const BatchChangeDetailsTabs: React.FunctionComponent<React.PropsWithChil
                                     originalInput={batchChange.currentSpec.originalInput}
                                 />
                             </div>
-                            <BatchSpecInfo spec={batchChange.currentSpec} isLightTheme={isLightTheme} />
+                            <BatchSpecInfo spec={batchChange.currentSpec} />
                         </>
                     )}
                 </TabPanel>
diff --git a/client/web/src/enterprise/batches/global/GlobalBatchChangesArea.tsx b/client/web/src/enterprise/batches/global/GlobalBatchChangesArea.tsx
index 6e4627d30516..770f3fc8a1f7 100644
--- a/client/web/src/enterprise/batches/global/GlobalBatchChangesArea.tsx
+++ b/client/web/src/enterprise/batches/global/GlobalBatchChangesArea.tsx
@@ -5,7 +5,6 @@ import { Routes, Route } from 'react-router-dom'
 import { Scalars } from '@sourcegraph/shared/src/graphql-operations'
 import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { lazyComponent } from '@sourcegraph/shared/src/util/lazyComponent'
 
 import { AuthenticatedUser } from '../../../auth'
@@ -43,7 +42,7 @@ const BatchChangeClosePage = lazyComponent<BatchChangeClosePageProps, 'BatchChan
     'BatchChangeClosePage'
 )
 
-interface Props extends ThemeProps, TelemetryProps, SettingsCascadeProps {
+interface Props extends TelemetryProps, SettingsCascadeProps {
     authenticatedUser: AuthenticatedUser | null
     isSourcegraphDotCom: boolean
 }
diff --git a/client/web/src/enterprise/batches/preview/BatchChangePreviewTabs.tsx b/client/web/src/enterprise/batches/preview/BatchChangePreviewTabs.tsx
index e9af6ad55c20..26697e8bc8c3 100644
--- a/client/web/src/enterprise/batches/preview/BatchChangePreviewTabs.tsx
+++ b/client/web/src/enterprise/batches/preview/BatchChangePreviewTabs.tsx
@@ -4,7 +4,6 @@ import { mdiSourceBranch, mdiFileDocument } from '@mdi/js'
 import { useNavigate, useLocation } from 'react-router-dom'
 
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { Badge, Container, Icon, Tab, TabPanel, TabPanels } from '@sourcegraph/wildcard'
 
 import { resetFilteredConnectionURLQuery } from '../../../components/FilteredConnection'
@@ -21,7 +20,7 @@ import { PreviewList } from './list/PreviewList'
 
 import styles from './BatchChangePreviewTabs.module.scss'
 
-export interface BatchChangePreviewProps extends ThemeProps, TelemetryProps {
+export interface BatchChangePreviewProps extends TelemetryProps {
     batchSpecID: string
     authenticatedUser: PreviewPageAuthenticatedUser
 
@@ -43,7 +42,6 @@ export const BatchChangePreviewTabs: React.FunctionComponent<React.PropsWithChil
     authenticatedUser,
     batchSpecID,
     expandChangesetDescriptions,
-    isLightTheme,
     queryChangesetApplyPreview,
     queryChangesetSpecFileDiffs,
     spec,
@@ -112,7 +110,6 @@ export const BatchChangePreviewTabs: React.FunctionComponent<React.PropsWithChil
                         <BatchSpec
                             name={spec.description.name}
                             originalInput={spec.originalInput}
-                            isLightTheme={isLightTheme}
                             className={styles.batchSpec}
                         />
                     </Container>
diff --git a/client/web/src/enterprise/batches/repo/BatchChangeRepoPage.tsx b/client/web/src/enterprise/batches/repo/BatchChangeRepoPage.tsx
index cae12151c1a0..df4a0ebc2234 100644
--- a/client/web/src/enterprise/batches/repo/BatchChangeRepoPage.tsx
+++ b/client/web/src/enterprise/batches/repo/BatchChangeRepoPage.tsx
@@ -4,7 +4,6 @@ import VisuallyHidden from '@reach/visually-hidden'
 
 import { pluralize } from '@sourcegraph/common'
 import { displayRepoName } from '@sourcegraph/shared/src/components/RepoLink'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { PageHeader, H2, useObservable, Text, H4 } from '@sourcegraph/wildcard'
 
 import { BatchChangesIcon } from '../../../batches/icons'
@@ -28,7 +27,7 @@ import {
 } from './backend'
 import { RepoBatchChanges } from './RepoBatchChanges'
 
-interface BatchChangeRepoPageProps extends ThemeProps {
+interface BatchChangeRepoPageProps {
     repo: RepositoryFields
     /** For testing only. */
     queryRepoBatchChangeStats?: typeof _queryRepoBatchChangeStats
diff --git a/client/web/src/enterprise/batches/repo/RepositoryBatchChangesArea.tsx b/client/web/src/enterprise/batches/repo/RepositoryBatchChangesArea.tsx
index f4becf9eb896..4984280a0f92 100644
--- a/client/web/src/enterprise/batches/repo/RepositoryBatchChangesArea.tsx
+++ b/client/web/src/enterprise/batches/repo/RepositoryBatchChangesArea.tsx
@@ -1,7 +1,5 @@
 import { FC } from 'react'
 
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
-
 import { BreadcrumbSetters } from '../../../components/Breadcrumbs'
 import { RepositoryFields } from '../../../graphql-operations'
 
@@ -10,7 +8,7 @@ import { BatchChangeRepoPage } from './BatchChangeRepoPage'
 /**
  * Properties passed to all page components in the repository batch changes area.
  */
-export interface RepositoryBatchChangesAreaPageProps extends ThemeProps, BreadcrumbSetters {
+export interface RepositoryBatchChangesAreaPageProps extends BreadcrumbSetters {
     /**
      * The active repository.
      */
@@ -23,13 +21,13 @@ const BREADCRUMB = { key: 'batch-changes', element: 'Batch Changes' }
  * Renders pages related to repository batch changes.
  */
 export const RepositoryBatchChangesArea: FC<RepositoryBatchChangesAreaPageProps> = props => {
-    const { useBreadcrumb, repo, isLightTheme } = props
+    const { useBreadcrumb, repo } = props
 
     useBreadcrumb(BREADCRUMB)
 
     return (
         <div className="repository-batch-changes-area container mt-3">
-            <BatchChangeRepoPage repo={repo} isLightTheme={isLightTheme} />
+            <BatchChangeRepoPage repo={repo} />
         </div>
     )
 }
diff --git a/client/web/src/enterprise/code-monitoring/CodeMonitoringGettingStarted.tsx b/client/web/src/enterprise/code-monitoring/CodeMonitoringGettingStarted.tsx
index 6299673d95d1..46fe54b6a3c7 100644
--- a/client/web/src/enterprise/code-monitoring/CodeMonitoringGettingStarted.tsx
+++ b/client/web/src/enterprise/code-monitoring/CodeMonitoringGettingStarted.tsx
@@ -4,7 +4,7 @@ import { mdiPlus } from '@mdi/js'
 import classNames from 'classnames'
 
 import { AuthenticatedUser } from '@sourcegraph/shared/src/auth'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
+import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
 import { Link, Button, CardBody, Card, Icon, H2, H3, H4, Text } from '@sourcegraph/wildcard'
 
 import { CallToActionBanner } from '../../components/CallToActionBanner'
@@ -12,7 +12,7 @@ import { eventLogger } from '../../tracking/eventLogger'
 
 import styles from './CodeMonitoringGettingStarted.module.scss'
 
-interface CodeMonitoringGettingStartedProps extends ThemeProps {
+interface CodeMonitoringGettingStartedProps {
     authenticatedUser: AuthenticatedUser | null
 }
 
@@ -65,7 +65,8 @@ const createCodeMonitorUrl = (example: ExampleCodeMonitor): string => {
 
 export const CodeMonitoringGettingStarted: React.FunctionComponent<
     React.PropsWithChildren<CodeMonitoringGettingStartedProps>
-> = ({ isLightTheme, authenticatedUser }) => {
+> = ({ authenticatedUser }) => {
+    const isLightTheme = useIsLightTheme()
     const isSourcegraphDotCom: boolean = window.context?.sourcegraphDotComMode || false
     const assetsRoot = window.context?.assetsRoot || ''
 
diff --git a/client/web/src/enterprise/code-monitoring/CodeMonitoringPage.tsx b/client/web/src/enterprise/code-monitoring/CodeMonitoringPage.tsx
index c5e39da6a2fc..e477f650fa41 100644
--- a/client/web/src/enterprise/code-monitoring/CodeMonitoringPage.tsx
+++ b/client/web/src/enterprise/code-monitoring/CodeMonitoringPage.tsx
@@ -8,7 +8,6 @@ import { catchError, map } from 'rxjs/operators'
 import { asError, isErrorLike } from '@sourcegraph/common'
 import { Settings } from '@sourcegraph/shared/src/schema/settings.schema'
 import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import {
     PageHeader,
     LoadingSpinner,
@@ -33,7 +32,7 @@ import { CodeMonitoringGettingStarted } from './CodeMonitoringGettingStarted'
 import { CodeMonitoringLogs } from './CodeMonitoringLogs'
 import { CodeMonitorList } from './CodeMonitorList'
 
-export interface CodeMonitoringPageProps extends SettingsCascadeProps<Settings>, ThemeProps {
+export interface CodeMonitoringPageProps extends SettingsCascadeProps<Settings> {
     authenticatedUser: AuthenticatedUser | null
     fetchUserCodeMonitors?: typeof _fetchUserCodeMonitors
     toggleCodeMonitorEnabled?: typeof _toggleCodeMonitorEnabled
@@ -46,7 +45,6 @@ export const CodeMonitoringPage: React.FunctionComponent<React.PropsWithChildren
     authenticatedUser,
     fetchUserCodeMonitors = _fetchUserCodeMonitors,
     toggleCodeMonitorEnabled = _toggleCodeMonitorEnabled,
-    isLightTheme,
     testForceTab,
 }) => {
     const userHasCodeMonitors = useObservable(
@@ -188,10 +186,7 @@ export const CodeMonitoringPage: React.FunctionComponent<React.PropsWithChildren
                     </div>
 
                     {currentTab === 'getting-started' && (
-                        <CodeMonitoringGettingStarted
-                            isLightTheme={isLightTheme}
-                            authenticatedUser={authenticatedUser}
-                        />
+                        <CodeMonitoringGettingStarted authenticatedUser={authenticatedUser} />
                     )}
 
                     {currentTab === 'logs' && <CodeMonitoringLogs />}
diff --git a/client/web/src/enterprise/code-monitoring/CreateCodeMonitorPage.tsx b/client/web/src/enterprise/code-monitoring/CreateCodeMonitorPage.tsx
index 1df85dfbd06b..cc2e3b9ae249 100644
--- a/client/web/src/enterprise/code-monitoring/CreateCodeMonitorPage.tsx
+++ b/client/web/src/enterprise/code-monitoring/CreateCodeMonitorPage.tsx
@@ -4,7 +4,6 @@ import { VisuallyHidden } from '@reach/visually-hidden'
 import { useLocation } from 'react-router-dom'
 import { Observable } from 'rxjs'
 
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { PageHeader, Link } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../../auth'
@@ -18,7 +17,7 @@ import { convertActionsForCreate } from './action-converters'
 import { createCodeMonitor as _createCodeMonitor } from './backend'
 import { CodeMonitorForm } from './components/CodeMonitorForm'
 
-interface CreateCodeMonitorPageProps extends ThemeProps {
+interface CreateCodeMonitorPageProps {
     authenticatedUser: AuthenticatedUser
 
     createCodeMonitor?: typeof _createCodeMonitor
@@ -28,7 +27,7 @@ interface CreateCodeMonitorPageProps extends ThemeProps {
 
 const AuthenticatedCreateCodeMonitorPage: React.FunctionComponent<
     React.PropsWithChildren<CreateCodeMonitorPageProps>
-> = ({ authenticatedUser, createCodeMonitor = _createCodeMonitor, isLightTheme, isSourcegraphDotCom }) => {
+> = ({ authenticatedUser, createCodeMonitor = _createCodeMonitor, isSourcegraphDotCom }) => {
     const location = useLocation()
 
     const triggerQuery = useMemo(
@@ -96,7 +95,6 @@ const AuthenticatedCreateCodeMonitorPage: React.FunctionComponent<
                 triggerQuery={triggerQuery}
                 description={description}
                 submitButtonLabel="Create code monitor"
-                isLightTheme={isLightTheme}
                 isSourcegraphDotCom={isSourcegraphDotCom}
             />
         </div>
diff --git a/client/web/src/enterprise/code-monitoring/ManageCodeMonitorPage.tsx b/client/web/src/enterprise/code-monitoring/ManageCodeMonitorPage.tsx
index eca6c728b990..ca6ff50ea24b 100644
--- a/client/web/src/enterprise/code-monitoring/ManageCodeMonitorPage.tsx
+++ b/client/web/src/enterprise/code-monitoring/ManageCodeMonitorPage.tsx
@@ -6,7 +6,6 @@ import { Observable } from 'rxjs'
 import { startWith, catchError, tap } from 'rxjs/operators'
 
 import { asError, isErrorLike } from '@sourcegraph/common'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { PageHeader, Link, LoadingSpinner, useObservable } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../../auth'
@@ -24,7 +23,7 @@ import {
 } from './backend'
 import { CodeMonitorForm } from './components/CodeMonitorForm'
 
-interface ManageCodeMonitorPageProps extends ThemeProps {
+interface ManageCodeMonitorPageProps {
     authenticatedUser: AuthenticatedUser
 
     fetchCodeMonitor?: typeof _fetchCodeMonitor
@@ -41,7 +40,6 @@ const AuthenticatedManageCodeMonitorPage: React.FunctionComponent<
     fetchCodeMonitor = _fetchCodeMonitor,
     updateCodeMonitor = _updateCodeMonitor,
     deleteCodeMonitor = _deleteCodeMonitor,
-    isLightTheme,
     isSourcegraphDotCom,
 }) => {
     const LOADING = 'loading' as const
@@ -134,7 +132,6 @@ const AuthenticatedManageCodeMonitorPage: React.FunctionComponent<
                         codeMonitor={codeMonitorState}
                         submitButtonLabel="Save"
                         showDeleteButton={true}
-                        isLightTheme={isLightTheme}
                         isSourcegraphDotCom={isSourcegraphDotCom}
                     />
                 </>
diff --git a/client/web/src/enterprise/code-monitoring/components/CodeMonitorForm.test.tsx b/client/web/src/enterprise/code-monitoring/components/CodeMonitorForm.test.tsx
index bcaf2eeba979..a155b4e91603 100644
--- a/client/web/src/enterprise/code-monitoring/components/CodeMonitorForm.test.tsx
+++ b/client/web/src/enterprise/code-monitoring/components/CodeMonitorForm.test.tsx
@@ -13,7 +13,6 @@ const PROPS: CodeMonitorFormProps = {
     onSubmit: () => NEVER,
     submitButtonLabel: '',
     authenticatedUser: mockAuthenticatedUser,
-    isLightTheme: true,
     isSourcegraphDotCom: false,
 }
 
diff --git a/client/web/src/enterprise/code-monitoring/components/CodeMonitorForm.tsx b/client/web/src/enterprise/code-monitoring/components/CodeMonitorForm.tsx
index 486304abf7d2..d0bd39ce5432 100644
--- a/client/web/src/enterprise/code-monitoring/components/CodeMonitorForm.tsx
+++ b/client/web/src/enterprise/code-monitoring/components/CodeMonitorForm.tsx
@@ -8,7 +8,6 @@ import { mergeMap, startWith, catchError, tap, filter } from 'rxjs/operators'
 
 import { Toggle } from '@sourcegraph/branded/src/components/Toggle'
 import { asError, isErrorLike } from '@sourcegraph/common'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { Container, Button, useEventObservable, Alert, Link, Select, Input, Form } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../../../auth'
@@ -21,7 +20,7 @@ import { FormTriggerArea } from './FormTriggerArea'
 
 import styles from './CodeMonitorForm.module.scss'
 
-export interface CodeMonitorFormProps extends ThemeProps {
+export interface CodeMonitorFormProps {
     authenticatedUser: AuthenticatedUser
     /**
      * A function that takes in a code monitor and emits an Observable with all or some
@@ -58,7 +57,6 @@ export const CodeMonitorForm: React.FunctionComponent<React.PropsWithChildren<Co
     deleteCodeMonitor = _deleteCodeMonitor,
     triggerQuery,
     description,
-    isLightTheme,
     isSourcegraphDotCom,
 }) => {
     const LOADING = 'loading' as const
@@ -207,7 +205,6 @@ export const CodeMonitorForm: React.FunctionComponent<React.PropsWithChildren<Co
                             cardBtnClassName={styles.cardButton}
                             cardLinkClassName={styles.cardLink}
                             cardClassName={styles.card}
-                            isLightTheme={isLightTheme}
                             isSourcegraphDotCom={isSourcegraphDotCom}
                         />
                     </div>
diff --git a/client/web/src/enterprise/code-monitoring/components/FormTriggerArea.test.tsx b/client/web/src/enterprise/code-monitoring/components/FormTriggerArea.test.tsx
index 69dbb7870f65..6558428ef1a0 100644
--- a/client/web/src/enterprise/code-monitoring/components/FormTriggerArea.test.tsx
+++ b/client/web/src/enterprise/code-monitoring/components/FormTriggerArea.test.tsx
@@ -115,7 +115,6 @@ describe('FormTriggerArea', () => {
                     onQueryChange={sinon.spy()}
                     setTriggerCompleted={sinon.spy()}
                     startExpanded={false}
-                    isLightTheme={true}
                     isSourcegraphDotCom={testCase.isSourcegraphDotCom}
                 />
             )
@@ -168,7 +167,6 @@ describe('FormTriggerArea', () => {
                 onQueryChange={onQueryChange}
                 setTriggerCompleted={sinon.spy()}
                 startExpanded={false}
-                isLightTheme={true}
                 isSourcegraphDotCom={false}
             />
         )
@@ -187,7 +185,6 @@ describe('FormTriggerArea', () => {
                 onQueryChange={onQueryChange}
                 setTriggerCompleted={sinon.spy()}
                 startExpanded={false}
-                isLightTheme={true}
                 isSourcegraphDotCom={false}
             />
         )
diff --git a/client/web/src/enterprise/code-monitoring/components/FormTriggerArea.tsx b/client/web/src/enterprise/code-monitoring/components/FormTriggerArea.tsx
index 55ffe5c2cb0d..f8b77db4b266 100644
--- a/client/web/src/enterprise/code-monitoring/components/FormTriggerArea.tsx
+++ b/client/web/src/enterprise/code-monitoring/components/FormTriggerArea.tsx
@@ -8,7 +8,6 @@ import { LazyQueryInput } from '@sourcegraph/branded'
 import { QueryState } from '@sourcegraph/shared/src/search'
 import { FilterType, resolveFilter, validateFilter } from '@sourcegraph/shared/src/search/query/filters'
 import { scanSearchQuery } from '@sourcegraph/shared/src/search/query/scanner'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { buildSearchURLQuery } from '@sourcegraph/shared/src/util/url'
 import { Button, Link, Card, Icon, Checkbox, Code, H3, Tooltip } from '@sourcegraph/wildcard'
 
@@ -17,7 +16,7 @@ import { useExperimentalFeatures } from '../../../stores'
 
 import styles from './FormTriggerArea.module.scss'
 
-interface TriggerAreaProps extends ThemeProps {
+interface TriggerAreaProps {
     query: string
     onQueryChange: (query: string) => void
     triggerCompleted: boolean
@@ -94,7 +93,6 @@ export const FormTriggerArea: React.FunctionComponent<React.PropsWithChildren<Tr
     cardClassName,
     cardBtnClassName,
     cardLinkClassName,
-    isLightTheme,
     isSourcegraphDotCom,
 }) => {
     const [expanded, setExpanded] = useState(startExpanded)
@@ -237,7 +235,6 @@ export const FormTriggerArea: React.FunctionComponent<React.PropsWithChildren<Tr
                             >
                                 <LazyQueryInput
                                     className="test-trigger-input"
-                                    isLightTheme={isLightTheme}
                                     patternType={SearchPatternType.standard}
                                     isSourcegraphDotCom={isSourcegraphDotCom}
                                     caseSensitive={false}
diff --git a/client/web/src/enterprise/code-monitoring/global/GlobalCodeMonitoringArea.tsx b/client/web/src/enterprise/code-monitoring/global/GlobalCodeMonitoringArea.tsx
index 49eb2b88a9eb..da9ddc91d31d 100644
--- a/client/web/src/enterprise/code-monitoring/global/GlobalCodeMonitoringArea.tsx
+++ b/client/web/src/enterprise/code-monitoring/global/GlobalCodeMonitoringArea.tsx
@@ -5,13 +5,12 @@ import { Routes, Route } from 'react-router-dom'
 import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
 import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { lazyComponent } from '@sourcegraph/shared/src/util/lazyComponent'
 
 import { AuthenticatedUser } from '../../../auth'
 import { Page } from '../../../components/Page'
 
-interface Props extends ThemeProps, TelemetryProps, PlatformContextProps, SettingsCascadeProps {
+interface Props extends TelemetryProps, PlatformContextProps, SettingsCascadeProps {
     authenticatedUser: AuthenticatedUser | null
     isSourcegraphDotCom: boolean
 }
diff --git a/client/web/src/enterprise/codeintel/configuration/components/ConfigurationEditor.tsx b/client/web/src/enterprise/codeintel/configuration/components/ConfigurationEditor.tsx
index c21ccfd6f28b..0456f62ca4d7 100644
--- a/client/web/src/enterprise/codeintel/configuration/components/ConfigurationEditor.tsx
+++ b/client/web/src/enterprise/codeintel/configuration/components/ConfigurationEditor.tsx
@@ -3,7 +3,7 @@ import { FunctionComponent, useCallback, useMemo, useState } from 'react'
 import { editor } from 'monaco-editor'
 
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
+import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
 import { LoadingSpinner, screenReaderAnnounce, ErrorAlert } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../../../../auth'
@@ -16,7 +16,7 @@ import allConfigSchema from '../schema.json'
 
 import { IndexConfigurationSaveToolbar, IndexConfigurationSaveToolbarProps } from './IndexConfigurationSaveToolbar'
 
-export interface ConfigurationEditorProps extends ThemeProps, TelemetryProps {
+export interface ConfigurationEditorProps extends TelemetryProps {
     repoId: string
     authenticatedUser: AuthenticatedUser | null
 }
@@ -24,9 +24,9 @@ export interface ConfigurationEditorProps extends ThemeProps, TelemetryProps {
 export const ConfigurationEditor: FunctionComponent<ConfigurationEditorProps> = ({
     repoId,
     authenticatedUser,
-    isLightTheme,
     telemetryService,
 }) => {
+    const isLightTheme = useIsLightTheme()
     const { inferredConfiguration, loadingInferred, inferredError } = useInferredConfig(repoId)
     const { configuration, loadingRepository, repositoryError } = useRepositoryConfig(repoId)
     const { updateConfigForRepository, isUpdating, updatingError } = useUpdateConfigurationForRepository()
diff --git a/client/web/src/enterprise/codeintel/configuration/components/InferenceScriptEditor.tsx b/client/web/src/enterprise/codeintel/configuration/components/InferenceScriptEditor.tsx
index 6ddfa7fc0cac..5da073dfaed2 100644
--- a/client/web/src/enterprise/codeintel/configuration/components/InferenceScriptEditor.tsx
+++ b/client/web/src/enterprise/codeintel/configuration/components/InferenceScriptEditor.tsx
@@ -1,13 +1,13 @@
 import { FunctionComponent, useCallback, useMemo, useState } from 'react'
 
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
+import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
 import { LoadingSpinner, PageHeader, screenReaderAnnounce, ErrorAlert } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../../../../auth'
 import { PageTitle } from '../../../../components/PageTitle'
 import { SaveToolbar, SaveToolbarProps, SaveToolbarPropsGenerator } from '../../../../components/SaveToolbar'
 import { DynamicallyImportedMonacoSettingsEditor } from '../../../../settings/DynamicallyImportedMonacoSettingsEditor'
-import { ThemePreference, useTheme } from '../../../../theme'
 import { INFERENCE_SCRIPT, useInferenceScript } from '../hooks/useInferenceScript'
 import { useUpdateInferenceScript } from '../hooks/useUpdateInferenceScript'
 
@@ -37,7 +37,7 @@ export const InferenceScriptEditor: FunctionComponent<InferenceScriptEditorProps
     )
 
     const [dirty, setDirty] = useState<boolean>()
-    const isLightTheme = useTheme().enhancedThemePreference === ThemePreference.Light
+    const isLightTheme = useIsLightTheme()
 
     const customToolbar = useMemo<{
         saveToolbar: FunctionComponent<SaveToolbarProps>
diff --git a/client/web/src/enterprise/codeintel/configuration/pages/CodeIntelConfigurationPage.tsx b/client/web/src/enterprise/codeintel/configuration/pages/CodeIntelConfigurationPage.tsx
index fa8be9db7bdc..0cbc9987fff7 100644
--- a/client/web/src/enterprise/codeintel/configuration/pages/CodeIntelConfigurationPage.tsx
+++ b/client/web/src/enterprise/codeintel/configuration/pages/CodeIntelConfigurationPage.tsx
@@ -19,7 +19,6 @@ import { Subject } from 'rxjs'
 import { RepoLink } from '@sourcegraph/shared/src/components/RepoLink'
 import { GitObjectType } from '@sourcegraph/shared/src/graphql-operations'
 import { TelemetryProps, TelemetryService } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { Badge, Button, Container, ErrorAlert, H3, Icon, Link, PageHeader, Text, Tooltip } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../../../../auth'
@@ -65,12 +64,11 @@ const filters: FilteredConnectionFilter[] = [
     },
 ]
 
-export interface CodeIntelConfigurationPageProps extends ThemeProps, TelemetryProps {
+export interface CodeIntelConfigurationPageProps extends TelemetryProps {
     authenticatedUser: AuthenticatedUser | null
     queryPolicies?: typeof defaultQueryPolicies
     repo?: { id: string; name: string }
     indexingEnabled?: boolean
-    isLightTheme: boolean
     telemetryService: TelemetryService
 }
 
diff --git a/client/web/src/enterprise/codeintel/configuration/pages/CodeIntelConfigurationPolicyPage.tsx b/client/web/src/enterprise/codeintel/configuration/pages/CodeIntelConfigurationPolicyPage.tsx
index 6513c54e8014..94393e2eab41 100644
--- a/client/web/src/enterprise/codeintel/configuration/pages/CodeIntelConfigurationPolicyPage.tsx
+++ b/client/web/src/enterprise/codeintel/configuration/pages/CodeIntelConfigurationPolicyPage.tsx
@@ -12,7 +12,6 @@ import { AuthenticatedUser } from '@sourcegraph/shared/src/auth'
 import { displayRepoName, RepoLink } from '@sourcegraph/shared/src/components/RepoLink'
 import { GitObjectType } from '@sourcegraph/shared/src/graphql-operations'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import {
     Alert,
     Badge,
@@ -58,7 +57,7 @@ const DEBOUNCED_WAIT = 250
 
 const MS_IN_HOURS = 60 * 60 * 1000
 
-export interface CodeIntelConfigurationPolicyPageProps extends ThemeProps, TelemetryProps {
+export interface CodeIntelConfigurationPolicyPageProps extends TelemetryProps {
     repo?: { id: string; name: string }
     authenticatedUser: AuthenticatedUser | null
     indexingEnabled?: boolean
diff --git a/client/web/src/enterprise/codeintel/configuration/pages/CodeIntelRepositoryIndexConfigurationPage.tsx b/client/web/src/enterprise/codeintel/configuration/pages/CodeIntelRepositoryIndexConfigurationPage.tsx
index ed9cde95988c..b402d0950fa3 100644
--- a/client/web/src/enterprise/codeintel/configuration/pages/CodeIntelRepositoryIndexConfigurationPage.tsx
+++ b/client/web/src/enterprise/codeintel/configuration/pages/CodeIntelRepositoryIndexConfigurationPage.tsx
@@ -1,7 +1,6 @@
 import { FunctionComponent, useEffect } from 'react'
 
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { PageHeader, Link } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../../../../auth'
@@ -9,7 +8,7 @@ import { PageTitle } from '../../../../components/PageTitle'
 import { CodeIntelConfigurationPageHeader } from '../components/CodeIntelConfigurationPageHeader'
 import { ConfigurationEditor } from '../components/ConfigurationEditor'
 
-export interface CodeIntelRepositoryIndexConfigurationPageProps extends ThemeProps, TelemetryProps {
+export interface CodeIntelRepositoryIndexConfigurationPageProps extends TelemetryProps {
     repo: { id: string }
     authenticatedUser: AuthenticatedUser | null
 }
diff --git a/client/web/src/enterprise/codeintel/indexes/pages/CodeIntelPreciseIndexPage.tsx b/client/web/src/enterprise/codeintel/indexes/pages/CodeIntelPreciseIndexPage.tsx
index 71798feb6ba7..43e35f05069f 100644
--- a/client/web/src/enterprise/codeintel/indexes/pages/CodeIntelPreciseIndexPage.tsx
+++ b/client/web/src/enterprise/codeintel/indexes/pages/CodeIntelPreciseIndexPage.tsx
@@ -9,7 +9,6 @@ import { takeWhile } from 'rxjs/operators'
 import { ErrorLike, isErrorLike } from '@sourcegraph/common'
 import { AuthenticatedUser } from '@sourcegraph/shared/src/auth'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import {
     Alert,
     AlertProps,
@@ -49,7 +48,7 @@ import { useReindexPreciseIndex as defaultUseReindexPreciseIndex } from '../hook
 
 import styles from './CodeIntelPreciseIndexPage.module.scss'
 
-export interface CodeIntelPreciseIndexPageProps extends ThemeProps, TelemetryProps {
+export interface CodeIntelPreciseIndexPageProps extends TelemetryProps {
     authenticatedUser: AuthenticatedUser | null
     now?: () => Date
     queryDependencyGraph?: typeof defaultQueryDependencyGraph
diff --git a/client/web/src/enterprise/codeintel/indexes/pages/CodeIntelPreciseIndexesPage.tsx b/client/web/src/enterprise/codeintel/indexes/pages/CodeIntelPreciseIndexesPage.tsx
index ea1fffab5548..0d70afcb9164 100644
--- a/client/web/src/enterprise/codeintel/indexes/pages/CodeIntelPreciseIndexesPage.tsx
+++ b/client/web/src/enterprise/codeintel/indexes/pages/CodeIntelPreciseIndexesPage.tsx
@@ -11,7 +11,6 @@ import { Timestamp } from '@sourcegraph/branded/src/components/Timestamp'
 import { isErrorLike } from '@sourcegraph/common'
 import { AuthenticatedUser } from '@sourcegraph/shared/src/auth'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import {
     Alert,
     Button,
@@ -50,7 +49,7 @@ import { useReindexPreciseIndexes as defaultUseReindexPreciseIndexes } from '../
 
 import styles from './CodeIntelPreciseIndexesPage.module.scss'
 
-export interface CodeIntelPreciseIndexesPageProps extends ThemeProps, TelemetryProps {
+export interface CodeIntelPreciseIndexesPageProps extends TelemetryProps {
     authenticatedUser: AuthenticatedUser | null
     repo?: { id: string }
     now?: () => Date
diff --git a/client/web/src/enterprise/codeintel/repo/RepositoryCodeIntelArea.tsx b/client/web/src/enterprise/codeintel/repo/RepositoryCodeIntelArea.tsx
index a8f24321a734..9f37cd1ef5bf 100644
--- a/client/web/src/enterprise/codeintel/repo/RepositoryCodeIntelArea.tsx
+++ b/client/web/src/enterprise/codeintel/repo/RepositoryCodeIntelArea.tsx
@@ -3,7 +3,6 @@ import { FC } from 'react'
 import { Routes, Route, Navigate } from 'react-router-dom'
 
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { lazyComponent } from '@sourcegraph/shared/src/util/lazyComponent'
 
 import { AuthenticatedUser } from '../../../auth'
@@ -21,7 +20,7 @@ import { CodeIntelPreciseIndexPageProps } from '../indexes/pages/CodeIntelPrecis
 
 import { CodeIntelSidebar, CodeIntelSideBarGroups } from './CodeIntelSidebar'
 
-export interface CodeIntelAreaRouteContext extends ThemeProps, TelemetryProps {
+export interface CodeIntelAreaRouteContext extends TelemetryProps {
     repo: { id: string; name: string }
     authenticatedUser: AuthenticatedUser | null
 }
@@ -104,7 +103,7 @@ export const codeIntelAreaRoutes: readonly CodeIntelAreaRoute[] = [
 /**
  * Properties passed to all page components in the repository code navigation area.
  */
-export interface RepositoryCodeIntelAreaPageProps extends ThemeProps, BreadcrumbSetters, TelemetryProps {
+export interface RepositoryCodeIntelAreaPageProps extends BreadcrumbSetters, TelemetryProps {
     /** The active repository. */
     repo: RepositoryFields
     authenticatedUser: AuthenticatedUser | null
diff --git a/client/web/src/enterprise/embed/EmbeddedWebApp.tsx b/client/web/src/enterprise/embed/EmbeddedWebApp.tsx
index 7704f36c44a3..e35b8fab9c60 100644
--- a/client/web/src/enterprise/embed/EmbeddedWebApp.tsx
+++ b/client/web/src/enterprise/embed/EmbeddedWebApp.tsx
@@ -1,8 +1,9 @@
-import { FC, Suspense, useEffect, useMemo } from 'react'
+import { FC, Suspense, useEffect, useLayoutEffect, useMemo } from 'react'
 
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
 
 import { createController as createExtensionsController } from '@sourcegraph/shared/src/extensions/createSyncLoadedController'
+import { useTheme, Theme, ThemeSetting } from '@sourcegraph/shared/src/theme'
 import { lazyComponent } from '@sourcegraph/shared/src/util/lazyComponent'
 import { Alert, LoadingSpinner, setLinkComponent, WildcardTheme, WildcardThemeContext } from '@sourcegraph/wildcard'
 
@@ -10,7 +11,6 @@ import '../../SourcegraphWebApp.scss'
 
 import { GlobalContributions } from '../../contributions'
 import { createPlatformContext } from '../../platform/context'
-import { useTheme, ThemePreference } from '../../theme'
 
 import { OpenNewTabAnchorLink } from './OpenNewTabAnchorLink'
 
@@ -33,21 +33,23 @@ const EmbeddedNotebookPage = lazyComponent(
 const EMPTY_SETTINGS_CASCADE = { final: {}, subjects: [] }
 
 export const EmbeddedWebApp: FC = () => {
-    const { enhancedThemePreference, setThemePreference } = useTheme()
-    const isLightTheme = enhancedThemePreference === ThemePreference.Light
+    const { theme, setThemeSetting } = useTheme()
+
+    useLayoutEffect(() => {
+        const isLightTheme = theme === Theme.Light
+
+        document.documentElement.classList.add('theme')
+        document.documentElement.classList.toggle('theme-light', isLightTheme)
+        document.documentElement.classList.toggle('theme-dark', !isLightTheme)
+    }, [theme])
 
     useEffect(() => {
         const query = new URLSearchParams(window.location.search)
         const theme = query.get('theme')
-        setThemePreference(
-            theme === 'dark' ? ThemePreference.Dark : theme === 'light' ? ThemePreference.Light : ThemePreference.System
+        setThemeSetting(
+            theme === 'dark' ? ThemeSetting.Dark : theme === 'light' ? ThemeSetting.Light : ThemeSetting.System
         )
-    }, [setThemePreference])
-
-    useEffect(() => {
-        document.documentElement.classList.toggle('theme-light', isLightTheme)
-        document.documentElement.classList.toggle('theme-dark', !isLightTheme)
-    }, [isLightTheme])
+    }, [setThemeSetting])
 
     const platformContext = useMemo(() => createPlatformContext(), [])
     const extensionsController = useMemo(() => createExtensionsController(platformContext), [platformContext])
@@ -77,12 +79,12 @@ export const EmbeddedWebApp: FC = () => {
                                         searchContextsEnabled={true}
                                         isSourcegraphDotCom={window.context.sourcegraphDotComMode}
                                         authenticatedUser={null}
-                                        isLightTheme={isLightTheme}
                                         settingsCascade={EMPTY_SETTINGS_CASCADE}
                                         platformContext={platformContext}
                                     />
                                 }
                             />
+                            Ï
                             <Route
                                 path="*"
                                 element={
diff --git a/client/web/src/enterprise/insights/components/form/monaco-field/MonacoField.tsx b/client/web/src/enterprise/insights/components/form/monaco-field/MonacoField.tsx
index 261f8e3520d1..f1f701954830 100644
--- a/client/web/src/enterprise/insights/components/form/monaco-field/MonacoField.tsx
+++ b/client/web/src/enterprise/insights/components/form/monaco-field/MonacoField.tsx
@@ -8,8 +8,6 @@ import { SearchPatternType } from '@sourcegraph/shared/src/graphql-operations'
 import { QueryState } from '@sourcegraph/shared/src/search'
 import { ForwardReferenceComponent } from '@sourcegraph/wildcard'
 
-import { useTheme, ThemePreference } from '../../../../../theme'
-
 import styles from './MonacoField.module.scss'
 
 interface Context {
@@ -73,7 +71,6 @@ export const MonacoField = forwardRef<HTMLInputElement, MonacoFieldProps>((props
     // @ts-ignore
     useImperativeHandle(reference, () => null)
 
-    const { enhancedThemePreference } = useTheme()
     const monacoOptions = useMemo(() => ({ readOnly: disabled }), [disabled])
 
     return (
@@ -82,7 +79,6 @@ export const MonacoField = forwardRef<HTMLInputElement, MonacoFieldProps>((props
             ariaInvalid={ariaInvalid?.toString()}
             ariaBusy={ariaBusy?.toString()}
             queryState={queryState}
-            isLightTheme={enhancedThemePreference === ThemePreference.Light}
             isSourcegraphDotCom={false}
             preventNewLine={false}
             interpretComments={true}
diff --git a/client/web/src/enterprise/searchContexts/CreateSearchContextPage.tsx b/client/web/src/enterprise/searchContexts/CreateSearchContextPage.tsx
index e38508dfb6b4..c93c48badac3 100644
--- a/client/web/src/enterprise/searchContexts/CreateSearchContextPage.tsx
+++ b/client/web/src/enterprise/searchContexts/CreateSearchContextPage.tsx
@@ -13,7 +13,6 @@ import {
 import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
 import { SearchContextProps } from '@sourcegraph/shared/src/search'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { PageHeader, Link } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../../auth'
@@ -25,8 +24,7 @@ import { parseSearchURLQuery } from '../../search'
 import { SearchContextForm } from './SearchContextForm'
 
 export interface CreateSearchContextPageProps
-    extends ThemeProps,
-        TelemetryProps,
+    extends TelemetryProps,
         Pick<SearchContextProps, 'createSearchContext' | 'deleteSearchContext'>,
         PlatformContextProps<'requestGraphQL'> {
     authenticatedUser: AuthenticatedUser
diff --git a/client/web/src/enterprise/searchContexts/EditSearchContextPage.tsx b/client/web/src/enterprise/searchContexts/EditSearchContextPage.tsx
index cf323db5c37a..2bcea142c508 100644
--- a/client/web/src/enterprise/searchContexts/EditSearchContextPage.tsx
+++ b/client/web/src/enterprise/searchContexts/EditSearchContextPage.tsx
@@ -15,7 +15,6 @@ import {
 import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
 import { SearchContextProps } from '@sourcegraph/shared/src/search'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { PageHeader, LoadingSpinner, useObservable, Alert } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../../auth'
@@ -26,8 +25,7 @@ import { PageTitle } from '../../components/PageTitle'
 import { SearchContextForm } from './SearchContextForm'
 
 export interface EditSearchContextPageProps
-    extends ThemeProps,
-        TelemetryProps,
+    extends TelemetryProps,
         Pick<SearchContextProps, 'updateSearchContext' | 'fetchSearchContextBySpec' | 'deleteSearchContext'>,
         PlatformContextProps<'requestGraphQL'> {
     authenticatedUser: AuthenticatedUser
diff --git a/client/web/src/enterprise/searchContexts/SearchContextForm.tsx b/client/web/src/enterprise/searchContexts/SearchContextForm.tsx
index 48ab5331a881..4b8f78e005f7 100644
--- a/client/web/src/enterprise/searchContexts/SearchContextForm.tsx
+++ b/client/web/src/enterprise/searchContexts/SearchContextForm.tsx
@@ -17,7 +17,7 @@ import {
 import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
 import { QueryState, SearchContextProps } from '@sourcegraph/shared/src/search'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
+import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
 import {
     Container,
     Button,
@@ -111,8 +111,7 @@ function getSearchContextSpecPreview(selectedNamespace: SelectedNamespace, searc
 const LOADING = 'loading' as const
 
 export interface SearchContextFormProps
-    extends ThemeProps,
-        TelemetryProps,
+    extends TelemetryProps,
         Pick<SearchContextProps, 'deleteSearchContext'>,
         PlatformContextProps<'requestGraphQL'> {
     searchContext?: SearchContextFields
@@ -144,6 +143,7 @@ export const SearchContextForm: React.FunctionComponent<React.PropsWithChildren<
     const { authenticatedUser, onSubmit, searchContext, deleteSearchContext, isSourcegraphDotCom, platformContext } =
         props
     const navigate = useNavigate()
+    const isLightTheme = useIsLightTheme()
     const applySuggestionsOnEnter =
         useExperimentalFeatures(features => features.applySearchQuerySuggestionOnEnter) ?? true
 
@@ -444,7 +444,6 @@ export const SearchContextForm: React.FunctionComponent<React.PropsWithChildren<
                         />
                         <div className={styles.searchContextFormQuery} data-testid="search-context-dynamic-query">
                             <LazyQueryInput
-                                isLightTheme={props.isLightTheme}
                                 patternType={SearchPatternType.regexp}
                                 isSourcegraphDotCom={isSourcegraphDotCom}
                                 caseSensitive={true}
@@ -483,6 +482,7 @@ export const SearchContextForm: React.FunctionComponent<React.PropsWithChildren<
                         <div className={styles.searchContextFormStaticConfig}>
                             <SearchContextRepositoriesFormArea
                                 {...props}
+                                isLightTheme={isLightTheme}
                                 onChange={onRepositoriesConfigChange}
                                 validateRepositories={validateRepositories}
                                 repositories={searchContext?.repositories}
diff --git a/client/web/src/enterprise/searchContexts/SearchContextRepositoriesFormArea.tsx b/client/web/src/enterprise/searchContexts/SearchContextRepositoriesFormArea.tsx
index 2c5f511131db..d09c08175a14 100644
--- a/client/web/src/enterprise/searchContexts/SearchContextRepositoriesFormArea.tsx
+++ b/client/web/src/enterprise/searchContexts/SearchContextRepositoriesFormArea.tsx
@@ -7,7 +7,6 @@ import { delay, mergeMap, startWith, tap } from 'rxjs/operators'
 
 import { SearchContextRepositoryRevisionsFields } from '@sourcegraph/shared/src/graphql-operations'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { Button, useEventObservable, Alert, Icon } from '@sourcegraph/wildcard'
 
 import { DynamicallyImportedMonacoSettingsEditor } from '../../settings/DynamicallyImportedMonacoSettingsEditor'
@@ -74,7 +73,8 @@ const actions: {
     },
 ]
 
-export interface SearchContextRepositoriesFormAreaProps extends ThemeProps, TelemetryProps {
+export interface SearchContextRepositoriesFormAreaProps extends TelemetryProps {
+    isLightTheme: boolean
     repositories: SearchContextRepositoryRevisionsFields[] | undefined
     validateRepositories: () => Observable<Error[]>
     onChange: (config: string, isInitialValue?: boolean) => void
diff --git a/client/web/src/enterprise/site-admin/routes.tsx b/client/web/src/enterprise/site-admin/routes.tsx
index c07af526441b..34e2eca185f8 100644
--- a/client/web/src/enterprise/site-admin/routes.tsx
+++ b/client/web/src/enterprise/site-admin/routes.tsx
@@ -123,7 +123,7 @@ export const enterpriseSiteAdminAreaRoutes: readonly SiteAdminAreaRoute[] = (
         },
         {
             path: '/batch-changes/specs',
-            render: props => <BatchSpecsPage {...props} />,
+            render: () => <BatchSpecsPage />,
             condition: ({ batchChangesEnabled, batchChangesExecutionEnabled }) =>
                 batchChangesEnabled && batchChangesExecutionEnabled,
         },
diff --git a/client/web/src/namespaces/NamespaceArea.tsx b/client/web/src/namespaces/NamespaceArea.tsx
index 4af885c60030..94224b698340 100644
--- a/client/web/src/namespaces/NamespaceArea.tsx
+++ b/client/web/src/namespaces/NamespaceArea.tsx
@@ -1,5 +1,3 @@
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
-
 import { AuthenticatedUser } from '../auth'
 import { BatchChangesProps } from '../batches'
 import { UserAreaUserFields, OrgAreaOrganizationFields } from '../graphql-operations'
@@ -8,7 +6,7 @@ import { NavItemWithIconDescriptor, RouteV6Descriptor } from '../util/contributi
 /**
  * Properties passed to all page components in the namespace area.
  */
-export interface NamespaceAreaContext extends ThemeProps {
+export interface NamespaceAreaContext {
     namespace: Pick<UserAreaUserFields | OrgAreaOrganizationFields, '__typename' | 'id' | 'url'>
 
     authenticatedUser: AuthenticatedUser | null
diff --git a/client/web/src/nav/GlobalNavbar.story.tsx b/client/web/src/nav/GlobalNavbar.story.tsx
index bf723d37faae..5dabe123f776 100644
--- a/client/web/src/nav/GlobalNavbar.story.tsx
+++ b/client/web/src/nav/GlobalNavbar.story.tsx
@@ -6,17 +6,15 @@ import {
     mockGetUserSearchContextNamespaces,
 } from '@sourcegraph/shared/src/testing/searchContexts/testHelpers'
 import { extensionsController } from '@sourcegraph/shared/src/testing/searchTestHelpers'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { Grid, H3 } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../auth'
 import { WebStory } from '../components/WebStory'
 import { useExperimentalFeatures } from '../stores'
-import { ThemePreference } from '../theme'
 
 import { GlobalNavbar, GlobalNavbarProps } from './GlobalNavbar'
 
-const getDefaultProps = (props: ThemeProps): GlobalNavbarProps => ({
+const defaultProps: GlobalNavbarProps = {
     isSourcegraphDotCom: false,
     settingsCascade: {
         final: null,
@@ -24,13 +22,10 @@ const getDefaultProps = (props: ThemeProps): GlobalNavbarProps => ({
     },
     extensionsController,
     telemetryService: NOOP_TELEMETRY_SERVICE,
-    themePreference: ThemePreference.Light,
-    onThemePreferenceChange: () => undefined,
     globbing: false,
     platformContext: {} as any,
     selectedSearchContextSpec: '',
     setSelectedSearchContextSpec: () => undefined,
-    isLightTheme: props.isLightTheme,
     searchContextsEnabled: false,
     batchChangesEnabled: false,
     batchChangesExecutionEnabled: false,
@@ -45,7 +40,7 @@ const getDefaultProps = (props: ThemeProps): GlobalNavbarProps => ({
     notebooksEnabled: true,
     codeMonitoringEnabled: true,
     showFeedbackModal: () => undefined,
-})
+}
 
 const allNavItemsProps: Partial<GlobalNavbarProps> = {
     searchContextsEnabled: true,
@@ -69,9 +64,9 @@ const decorator: DecoratorFn = Story => {
 
     return (
         <WebStory>
-            {props => (
+            {() => (
                 <div className="mt-3">
-                    <Story args={getDefaultProps(props)} />
+                    <Story args={defaultProps} />
                 </div>
             )}
         </WebStory>
diff --git a/client/web/src/nav/GlobalNavbar.test.tsx b/client/web/src/nav/GlobalNavbar.test.tsx
index cc72c040e66b..b04cc11a201a 100644
--- a/client/web/src/nav/GlobalNavbar.test.tsx
+++ b/client/web/src/nav/GlobalNavbar.test.tsx
@@ -8,8 +8,6 @@ import {
 import { extensionsController, NOOP_SETTINGS_CASCADE } from '@sourcegraph/shared/src/testing/searchTestHelpers'
 import { renderWithBrandedContext } from '@sourcegraph/wildcard/src/testing'
 
-import { ThemePreference } from '../theme'
-
 import { GlobalNavbar } from './GlobalNavbar'
 
 jest.mock('../search/input/SearchNavbarItem', () => ({ SearchNavbarItem: 'SearchNavbarItem' }))
@@ -19,9 +17,6 @@ const PROPS: React.ComponentProps<typeof GlobalNavbar> = {
     authenticatedUser: null,
     extensionsController,
     isSourcegraphDotCom: false,
-    onThemePreferenceChange: () => undefined,
-    isLightTheme: true,
-    themePreference: ThemePreference.Light,
     platformContext: {} as any,
     settingsCascade: NOOP_SETTINGS_CASCADE,
     batchChangesEnabled: false,
diff --git a/client/web/src/nav/GlobalNavbar.tsx b/client/web/src/nav/GlobalNavbar.tsx
index 9f35dbcffdba..8766f5a2f771 100644
--- a/client/web/src/nav/GlobalNavbar.tsx
+++ b/client/web/src/nav/GlobalNavbar.tsx
@@ -15,7 +15,7 @@ import { Settings } from '@sourcegraph/shared/src/schema/settings.schema'
 import { SearchContextInputProps } from '@sourcegraph/shared/src/search'
 import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
+import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
 import { Button, Link, ButtonLink, useWindowSize } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../auth'
@@ -36,7 +36,6 @@ import { LayoutRouteProps } from '../routes'
 import { EnterprisePageRoutes, PageRoutes } from '../routes.constants'
 import { SearchNavbarItem } from '../search/input/SearchNavbarItem'
 import { useNavbarQueryState } from '../stores'
-import { ThemePreferenceProps } from '../theme'
 import { eventLogger } from '../tracking/eventLogger'
 
 import { NavDropdown, NavDropdownItem } from './NavBar/NavDropdown'
@@ -52,8 +51,6 @@ export interface GlobalNavbarProps
         PlatformContextProps,
         ExtensionsControllerProps,
         TelemetryProps,
-        ThemeProps,
-        ThemePreferenceProps,
         SearchContextInputProps,
         CodeInsightsProps,
         BatchChangesProps,
@@ -125,7 +122,6 @@ function FuzzyFinderNavItem(setFuzzyFinderVisible: React.Dispatch<SetStateAction
 
 export const GlobalNavbar: React.FunctionComponent<React.PropsWithChildren<GlobalNavbarProps>> = ({
     showSearchBox,
-    isLightTheme,
     branding,
     isSourcegraphDotCom,
     isRepositoryRelatedPage,
@@ -180,6 +176,7 @@ export const GlobalNavbar: React.FunctionComponent<React.PropsWithChildren<Globa
     const { fuzzyFinderNavbar } = getFuzzyFinderFeatureFlags(props.settingsCascade.final) ?? false
 
     const [codyEnabled] = useFeatureFlag('cody')
+    const isLightTheme = useIsLightTheme()
 
     return (
         <>
@@ -324,7 +321,6 @@ export const GlobalNavbar: React.FunctionComponent<React.PropsWithChildren<Globa
                         <NavAction>
                             <UserNavItem
                                 {...props}
-                                isLightTheme={isLightTheme}
                                 authenticatedUser={props.authenticatedUser}
                                 isSourcegraphDotCom={isSourcegraphDotCom}
                                 codeHostIntegrationMessaging={
diff --git a/client/web/src/nav/UserNavItem.story.tsx b/client/web/src/nav/UserNavItem.story.tsx
index 49a7882b529c..7a40a1ced126 100644
--- a/client/web/src/nav/UserNavItem.story.tsx
+++ b/client/web/src/nav/UserNavItem.story.tsx
@@ -1,18 +1,12 @@
 import React, { useEffect, useRef } from 'react'
 
-import { action } from '@storybook/addon-actions'
 import { Args, useMemo } from '@storybook/addons'
 import { Meta, Story } from '@storybook/react'
 
-import { Position } from '@sourcegraph/wildcard'
-
 import { WebStory } from '../components/WebStory'
-import { ThemePreference } from '../theme'
 
 import { UserNavItem, UserNavItemProps } from './UserNavItem'
 
-const onThemePreferenceChange = action('onThemePreferenceChange')
-
 const config: Meta = {
     title: 'web/nav/UserNavItem',
     decorators: [story => <div className="p-3 container h-100 web-content">{story()}</div>],
@@ -70,13 +64,9 @@ const authenticatedUser: UserNavItemProps['authenticatedUser'] = {
 }
 
 const commonProps = (props: Args): UserNavItemProps => ({
-    themePreference: ThemePreference.Light,
-    isLightTheme: true,
-    onThemePreferenceChange,
+    authenticatedUser,
     isSourcegraphDotCom: props.isSourcegraphDotCom,
     codeHostIntegrationMessaging: props.codeHostIntegrationMessaging,
-    authenticatedUser,
-    position: Position.bottomStart,
     showKeyboardShortcutsHelp: () => undefined,
     showFeedbackModal: () => undefined,
 })
@@ -99,14 +89,7 @@ export const SiteAdmin: Story = args => {
         <OpenByDefaultWrapper>
             {({ menuButtonRef }) => (
                 <WebStory>
-                    {webProps => (
-                        <UserNavItem
-                            {...props}
-                            {...webProps}
-                            menuButtonRef={menuButtonRef}
-                            themePreference={webProps.isLightTheme ? ThemePreference.Light : ThemePreference.Dark}
-                        />
-                    )}
+                    {webProps => <UserNavItem {...props} {...webProps} menuButtonRef={menuButtonRef} />}
                 </WebStory>
             )}
         </OpenByDefaultWrapper>
diff --git a/client/web/src/nav/UserNavItem.test.tsx b/client/web/src/nav/UserNavItem.test.tsx
index b39eb6f62477..df884da3868a 100644
--- a/client/web/src/nav/UserNavItem.test.tsx
+++ b/client/web/src/nav/UserNavItem.test.tsx
@@ -6,8 +6,6 @@ import sinon from 'sinon'
 import { AnchorLink, RouterLink, setLinkComponent } from '@sourcegraph/wildcard'
 import { renderWithBrandedContext } from '@sourcegraph/wildcard/src/testing'
 
-import { ThemePreference } from '../theme'
-
 import { UserNavItem, UserNavItemProps } from './UserNavItem'
 
 describe('UserNavItem', () => {
@@ -53,10 +51,7 @@ describe('UserNavItem', () => {
             render(
                 <MemoryRouter>
                     <UserNavItem
-                        isLightTheme={true}
-                        onThemePreferenceChange={() => undefined}
                         showKeyboardShortcutsHelp={() => undefined}
-                        themePreference={ThemePreference.Light}
                         authenticatedUser={USER}
                         isSourcegraphDotCom={true}
                         codeHostIntegrationMessaging="browser-extension"
@@ -70,10 +65,7 @@ describe('UserNavItem', () => {
     test('logout click triggers page refresh instead of performing client-side only navigation', async () => {
         const result = renderWithBrandedContext(
             <UserNavItem
-                isLightTheme={true}
-                onThemePreferenceChange={() => undefined}
                 showKeyboardShortcutsHelp={() => undefined}
-                themePreference={ThemePreference.Light}
                 authenticatedUser={USER}
                 isSourcegraphDotCom={true}
                 codeHostIntegrationMessaging="browser-extension"
diff --git a/client/web/src/nav/UserNavItem.tsx b/client/web/src/nav/UserNavItem.tsx
index 60a02e3cbcec..0173983a7141 100644
--- a/client/web/src/nav/UserNavItem.tsx
+++ b/client/web/src/nav/UserNavItem.tsx
@@ -1,11 +1,11 @@
-import React, { useCallback, useMemo } from 'react'
+import { useCallback, useMemo, ChangeEventHandler, FC } from 'react'
 
 import { mdiChevronDown, mdiChevronUp, mdiOpenInNew } from '@mdi/js'
 import classNames from 'classnames'
 
 import { useKeyboardShortcut } from '@sourcegraph/shared/src/keyboardShortcuts/useKeyboardShortcut'
 import { Shortcut } from '@sourcegraph/shared/src/react-shortcuts'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
+import { useTheme, ThemeSetting } from '@sourcegraph/shared/src/theme'
 import {
     Menu,
     MenuButton,
@@ -22,65 +22,67 @@ import {
 } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../auth'
-import { ThemePreferenceProps, ThemePreference } from '../theme'
 import { UserAvatar } from '../user/UserAvatar'
 
 import styles from './UserNavItem.module.scss'
 
 const MAX_VISIBLE_ORGS = 5
-export interface UserNavItemProps extends ThemeProps, ThemePreferenceProps {
-    authenticatedUser: Pick<
-        AuthenticatedUser,
-        'username' | 'avatarURL' | 'settingsURL' | 'organizations' | 'siteAdmin' | 'session' | 'displayName'
-    >
+
+type MinimalAuthenticatedUser = Pick<
+    AuthenticatedUser,
+    'username' | 'avatarURL' | 'settingsURL' | 'organizations' | 'siteAdmin' | 'session' | 'displayName'
+>
+
+export interface UserNavItemProps {
+    authenticatedUser: MinimalAuthenticatedUser
     isSourcegraphDotCom: boolean
     codeHostIntegrationMessaging: 'browser-extension' | 'native-integration'
-    position?: Position
     menuButtonRef?: React.Ref<HTMLButtonElement>
-    showKeyboardShortcutsHelp: () => void
     showFeedbackModal: () => void
+    showKeyboardShortcutsHelp: () => void
 }
 
 /**
  * Displays the user's avatar and/or username in the navbar and exposes a dropdown menu with more options for
  * authenticated viewers.
  */
-export const UserNavItem: React.FunctionComponent<React.PropsWithChildren<UserNavItemProps>> = props => {
+export const UserNavItem: FC<UserNavItemProps> = props => {
     const {
-        menuButtonRef,
-        themePreference,
-        onThemePreferenceChange,
+        authenticatedUser,
+        isSourcegraphDotCom,
         codeHostIntegrationMessaging,
-        position = Position.bottomEnd,
+        menuButtonRef,
+        showFeedbackModal,
+        showKeyboardShortcutsHelp,
     } = props
 
+    const { themeSetting, setThemeSetting } = useTheme()
+    const keyboardShortcutSwitchTheme = useKeyboardShortcut('switchTheme')
+
     const supportsSystemTheme = useMemo(
         () => Boolean(window.matchMedia?.('not all and (prefers-color-scheme), (prefers-color-scheme)').matches),
         []
     )
 
-    const onThemeChange: React.ChangeEventHandler<HTMLSelectElement> = useCallback(
+    const onThemeChange: ChangeEventHandler<HTMLSelectElement> = useCallback(
         event => {
-            onThemePreferenceChange(event.target.value as ThemePreference)
+            setThemeSetting(event.target.value as ThemeSetting)
         },
-        [onThemePreferenceChange]
+        [setThemeSetting]
     )
 
     const onThemeCycle = useCallback((): void => {
-        onThemePreferenceChange(themePreference === ThemePreference.Dark ? ThemePreference.Light : ThemePreference.Dark)
-    }, [onThemePreferenceChange, themePreference])
+        setThemeSetting(themeSetting === ThemeSetting.Dark ? ThemeSetting.Light : ThemeSetting.Dark)
+    }, [setThemeSetting, themeSetting])
 
-    // Target ID for tooltip
-    const targetID = 'target-user-avatar'
-    const keyboardShortcutSwitchTheme = useKeyboardShortcut('switchTheme')
-    const organizations = props.authenticatedUser.organizations.nodes
+    const organizations = authenticatedUser.organizations.nodes
 
     return (
         <>
             {keyboardShortcutSwitchTheme?.keybindings.map((keybinding, index) => (
                 // `Shortcut` doesn't update its states when `onMatch` changes
                 // so we put `themePreference` in `key` binding to make it
-                <Shortcut key={`${themePreference}-${index}`} {...keybinding} onMatch={onThemeCycle} />
+                <Shortcut key={`${themeSetting}-${index}`} {...keybinding} onMatch={onThemeCycle} />
             ))}
             <Menu>
                 {({ isExpanded }) => (
@@ -94,22 +96,22 @@ export const UserNavItem: React.FunctionComponent<React.PropsWithChildren<UserNa
                         >
                             <div className="position-relative">
                                 <div className="align-items-center d-flex">
-                                    <UserAvatar
-                                        user={props.authenticatedUser}
-                                        targetID={targetID}
-                                        className={styles.avatar}
-                                    />
+                                    <UserAvatar user={authenticatedUser} className={styles.avatar} />
                                     <Icon svgPath={isExpanded ? mdiChevronUp : mdiChevronDown} aria-hidden={true} />
                                 </div>
                             </div>
                         </MenuButton>
 
-                        <MenuList position={position} className={styles.dropdownMenu} aria-label="User. Open menu">
+                        <MenuList
+                            position={Position.bottomEnd}
+                            className={styles.dropdownMenu}
+                            aria-label="User. Open menu"
+                        >
                             <MenuHeader className={styles.dropdownHeader}>
-                                Signed in as <strong>@{props.authenticatedUser.username}</strong>
+                                Signed in as <strong>@{authenticatedUser.username}</strong>
                             </MenuHeader>
                             <MenuDivider className={styles.dropdownDivider} />
-                            <MenuLink as={Link} to={props.authenticatedUser.settingsURL!}>
+                            <MenuLink as={Link} to={authenticatedUser.settingsURL!}>
                                 Settings
                             </MenuLink>
                             <MenuDivider />
@@ -122,15 +124,15 @@ export const UserNavItem: React.FunctionComponent<React.PropsWithChildren<UserNa
                                         selectSize="sm"
                                         data-testid="theme-toggle"
                                         onChange={onThemeChange}
-                                        value={props.themePreference}
+                                        value={themeSetting}
                                         className="mb-0 flex-1"
                                     >
-                                        <option value={ThemePreference.Light}>Light</option>
-                                        <option value={ThemePreference.Dark}>Dark</option>
-                                        <option value={ThemePreference.System}>System</option>
+                                        <option value={ThemeSetting.Light}>Light</option>
+                                        <option value={ThemeSetting.Dark}>Dark</option>
+                                        <option value={ThemeSetting.System}>System</option>
                                     </Select>
                                 </div>
-                                {props.themePreference === ThemePreference.System && !supportsSystemTheme && (
+                                {themeSetting === ThemeSetting.System && !supportsSystemTheme && (
                                     <div className="text-wrap">
                                         <small>
                                             <AnchorLink
@@ -155,14 +157,14 @@ export const UserNavItem: React.FunctionComponent<React.PropsWithChildren<UserNa
                                         </MenuLink>
                                     ))}
                                     {organizations.length > MAX_VISIBLE_ORGS && (
-                                        <MenuLink as={Link} to={props.authenticatedUser.settingsURL!}>
+                                        <MenuLink as={Link} to={authenticatedUser.settingsURL!}>
                                             Show all organizations
                                         </MenuLink>
                                     )}
                                 </>
                             )}
                             <MenuDivider className={styles.dropdownDivider} />
-                            {props.authenticatedUser.siteAdmin && (
+                            {authenticatedUser.siteAdmin && (
                                 <MenuLink as={Link} to="/site-admin">
                                     Site admin
                                 </MenuLink>
@@ -171,17 +173,17 @@ export const UserNavItem: React.FunctionComponent<React.PropsWithChildren<UserNa
                                 Help <Icon aria-hidden={true} svgPath={mdiOpenInNew} />
                             </MenuLink>
 
-                            <MenuItem onSelect={props.showFeedbackModal}>Feedback</MenuItem>
+                            <MenuItem onSelect={showFeedbackModal}>Feedback</MenuItem>
 
-                            <MenuItem onSelect={props.showKeyboardShortcutsHelp}>Keyboard shortcuts</MenuItem>
+                            <MenuItem onSelect={showKeyboardShortcutsHelp}>Keyboard shortcuts</MenuItem>
 
-                            {props.authenticatedUser.session?.canSignOut && (
+                            {authenticatedUser.session?.canSignOut && (
                                 <MenuLink as={AnchorLink} to="/-/sign-out">
                                     Sign out
                                 </MenuLink>
                             )}
                             <MenuDivider className={styles.dropdownDivider} />
-                            {props.isSourcegraphDotCom && (
+                            {isSourcegraphDotCom && (
                                 <MenuLink
                                     as={AnchorLink}
                                     to="https://about.sourcegraph.com"
diff --git a/client/web/src/nav/__snapshots__/GlobalNavbar.test.tsx.snap b/client/web/src/nav/__snapshots__/GlobalNavbar.test.tsx.snap
index 6ce6369bfd7f..bb77d5f6a63a 100644
--- a/client/web/src/nav/__snapshots__/GlobalNavbar.test.tsx.snap
+++ b/client/web/src/nav/__snapshots__/GlobalNavbar.test.tsx.snap
@@ -281,7 +281,6 @@ exports[`GlobalNavbar default 1`] = `
       selectedsearchcontextspec=""
       settingscascade="[object Object]"
       telemetryservice="[object Object]"
-      themepreference="light"
     />
   </div>
 </DocumentFragment>
diff --git a/client/web/src/nav/__snapshots__/UserNavItem.test.tsx.snap b/client/web/src/nav/__snapshots__/UserNavItem.test.tsx.snap
index c2580b782733..8a9d6fbeada2 100644
--- a/client/web/src/nav/__snapshots__/UserNavItem.test.tsx.snap
+++ b/client/web/src/nav/__snapshots__/UserNavItem.test.tsx.snap
@@ -20,7 +20,6 @@ exports[`UserNavItem simple 1`] = `
       >
         <div
           class="userAvatar avatar"
-          id="target-user-avatar"
         >
           <span
             class="initials"
diff --git a/client/web/src/notebooks/GlobalNotebooksArea.tsx b/client/web/src/notebooks/GlobalNotebooksArea.tsx
index 0d4774ff5d85..dfec462ce028 100644
--- a/client/web/src/notebooks/GlobalNotebooksArea.tsx
+++ b/client/web/src/notebooks/GlobalNotebooksArea.tsx
@@ -8,7 +8,6 @@ import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
 import { SearchContextProps } from '@sourcegraph/shared/src/search'
 import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { lazyComponent } from '@sourcegraph/shared/src/util/lazyComponent'
 
 import { AuthenticatedUser } from '../auth'
@@ -22,8 +21,7 @@ const CreateNotebookPage = lazyComponent(() => import('./createPage/CreateNotebo
 const NotebooksListPage = lazyComponent(() => import('./listPage/NotebooksListPage'), 'NotebooksListPage')
 
 export interface GlobalNotebooksAreaProps
-    extends ThemeProps,
-        TelemetryProps,
+    extends TelemetryProps,
         PlatformContextProps,
         SettingsCascadeProps,
         NotebookProps,
diff --git a/client/web/src/notebooks/blocks/file/NotebookFileBlock.tsx b/client/web/src/notebooks/blocks/file/NotebookFileBlock.tsx
index c0c67b6f3116..9bbb5e74a91d 100644
--- a/client/web/src/notebooks/blocks/file/NotebookFileBlock.tsx
+++ b/client/web/src/notebooks/blocks/file/NotebookFileBlock.tsx
@@ -10,7 +10,6 @@ import { CodeExcerpt } from '@sourcegraph/branded'
 import { isErrorLike } from '@sourcegraph/common'
 import { getRepositoryUrl } from '@sourcegraph/shared/src/search/stream'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { codeCopiedEvent } from '@sourcegraph/shared/src/tracking/event-log-creators'
 import { toPrettyBlobURL } from '@sourcegraph/shared/src/util/url'
 import { LoadingSpinner, useObservable, Icon, Alert } from '@sourcegraph/wildcard'
@@ -29,7 +28,7 @@ import { NotebookFileBlockInputs } from './NotebookFileBlockInputs'
 
 import styles from './NotebookFileBlock.module.scss'
 
-interface NotebookFileBlockProps extends BlockProps<FileBlock>, TelemetryProps, ThemeProps {
+interface NotebookFileBlockProps extends BlockProps<FileBlock>, TelemetryProps {
     isSourcegraphDotCom: boolean
     globbing: boolean
 }
diff --git a/client/web/src/notebooks/blocks/file/NotebookFileBlockInputs.tsx b/client/web/src/notebooks/blocks/file/NotebookFileBlockInputs.tsx
index e4979980a330..22add9943540 100644
--- a/client/web/src/notebooks/blocks/file/NotebookFileBlockInputs.tsx
+++ b/client/web/src/notebooks/blocks/file/NotebookFileBlockInputs.tsx
@@ -8,7 +8,6 @@ import { createDefaultSuggestions } from '@sourcegraph/branded'
 import { isMacPlatform as isMacPlatformFunc } from '@sourcegraph/common'
 import { PathMatch } from '@sourcegraph/shared/src/search/stream'
 import { fetchStreamSuggestions } from '@sourcegraph/shared/src/search/suggestions'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { Icon, Button, Input, InputStatus } from '@sourcegraph/wildcard'
 
 import { BlockProps, FileBlockInput } from '../..'
@@ -20,7 +19,7 @@ import { fetchSuggestions } from '../suggestions/suggestions'
 
 import styles from './NotebookFileBlockInputs.module.scss'
 
-interface NotebookFileBlockInputsProps extends Pick<BlockProps, 'onRunBlock'>, ThemeProps {
+interface NotebookFileBlockInputsProps extends Pick<BlockProps, 'onRunBlock'> {
     id: string
     queryInput: string
     lineRange: HighlightLineRange | null
diff --git a/client/web/src/notebooks/blocks/markdown/NotebookMarkdownBlock.tsx b/client/web/src/notebooks/blocks/markdown/NotebookMarkdownBlock.tsx
index bfdb922f650d..a1495d52a617 100644
--- a/client/web/src/notebooks/blocks/markdown/NotebookMarkdownBlock.tsx
+++ b/client/web/src/notebooks/blocks/markdown/NotebookMarkdownBlock.tsx
@@ -11,7 +11,6 @@ import classNames from 'classnames'
 
 import { changeListener } from '@sourcegraph/branded'
 import { useCodeMirror, editorHeight } from '@sourcegraph/shared/src/components/CodeMirrorEditor'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { Icon, Markdown } from '@sourcegraph/wildcard'
 
 import { BlockProps, MarkdownBlock } from '../..'
@@ -82,7 +81,7 @@ const staticExtensions: Extension[] = [
     editorHeight({ maxHeight: '60rem' }),
 ]
 
-interface NotebookMarkdownBlockProps extends BlockProps<MarkdownBlock>, ThemeProps {
+interface NotebookMarkdownBlockProps extends BlockProps<MarkdownBlock> {
     isEmbedded?: boolean
 }
 
@@ -93,7 +92,6 @@ export const NotebookMarkdownBlock: React.FunctionComponent<React.PropsWithChild
             input,
             output,
             isSelected,
-            isLightTheme,
             isReadOnly,
             isEmbedded,
             onBlockInputChange,
diff --git a/client/web/src/notebooks/blocks/query/NotebookQueryBlock.tsx b/client/web/src/notebooks/blocks/query/NotebookQueryBlock.tsx
index cc49db976a7a..bf7ea6e1c3bc 100644
--- a/client/web/src/notebooks/blocks/query/NotebookQueryBlock.tsx
+++ b/client/web/src/notebooks/blocks/query/NotebookQueryBlock.tsx
@@ -18,7 +18,6 @@ import { SearchContextProps } from '@sourcegraph/shared/src/search'
 import { fetchStreamSuggestions } from '@sourcegraph/shared/src/search/suggestions'
 import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { buildSearchURLQuery } from '@sourcegraph/shared/src/util/url'
 import { LoadingSpinner, useObservable, Icon } from '@sourcegraph/wildcard'
 
@@ -37,7 +36,6 @@ import styles from './NotebookQueryBlock.module.scss'
 interface NotebookQueryBlockProps
     extends BlockProps<QueryBlock>,
         Pick<SearchContextProps, 'searchContextsEnabled'>,
-        ThemeProps,
         SettingsCascadeProps,
         TelemetryProps,
         PlatformContextProps<'requestGraphQL' | 'urlToFile' | 'settings'> {
@@ -63,7 +61,6 @@ export const NotebookQueryBlock: React.FunctionComponent<React.PropsWithChildren
         id,
         input,
         output,
-        isLightTheme,
         telemetryService,
         settingsCascade,
         isSelected,
@@ -171,7 +168,6 @@ export const NotebookQueryBlock: React.FunctionComponent<React.PropsWithChildren
                                 value={input.query}
                                 patternType={SearchPatternType.standard}
                                 interpretComments={true}
-                                isLightTheme={isLightTheme}
                                 onEditorCreated={setEditor}
                                 extensions={useMemo(
                                     () => [
@@ -199,7 +195,6 @@ export const NotebookQueryBlock: React.FunctionComponent<React.PropsWithChildren
                                 searchContextsEnabled={searchContextsEnabled}
                                 allExpanded={false}
                                 results={searchResults}
-                                isLightTheme={isLightTheme}
                                 fetchHighlightedFileLineRanges={fetchHighlightedFileLineRanges}
                                 telemetryService={telemetryService}
                                 settingsCascade={settingsCascade}
diff --git a/client/web/src/notebooks/blocks/suggestions/SearchTypeSuggestionsInput.tsx b/client/web/src/notebooks/blocks/suggestions/SearchTypeSuggestionsInput.tsx
index 61f8c6472f56..88bb1f745932 100644
--- a/client/web/src/notebooks/blocks/suggestions/SearchTypeSuggestionsInput.tsx
+++ b/client/web/src/notebooks/blocks/suggestions/SearchTypeSuggestionsInput.tsx
@@ -10,7 +10,6 @@ import { pluralize } from '@sourcegraph/common'
 import { createQueryExampleFromString, updateQueryWithFilterAndExample } from '@sourcegraph/shared/src/search'
 import { FilterType } from '@sourcegraph/shared/src/search/query/filters'
 import { PathMatch, SymbolMatch } from '@sourcegraph/shared/src/search/stream'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { Button, Label, useObservable } from '@sourcegraph/wildcard'
 
 import { BlockProps } from '../..'
@@ -19,9 +18,7 @@ import { blockKeymap, focusEditor } from '../../codemirror-utils'
 
 import styles from './SearchTypeSuggestionsInput.module.scss'
 
-interface SearchTypeSuggestionsInputProps<S extends SymbolMatch | PathMatch>
-    extends ThemeProps,
-        Pick<BlockProps, 'onRunBlock'> {
+interface SearchTypeSuggestionsInputProps<S extends SymbolMatch | PathMatch> extends Pick<BlockProps, 'onRunBlock'> {
     id: string
     label: string
     queryPrefix: string
@@ -43,7 +40,6 @@ export const SearchTypeSuggestionsInput = <S extends SymbolMatch | PathMatch>({
     queryPrefix,
     queryInput,
     setQueryInput,
-    isLightTheme,
     fetchSuggestions,
     countSuggestions,
     renderSuggestions,
@@ -119,7 +115,6 @@ export const SearchTypeSuggestionsInput = <S extends SymbolMatch | PathMatch>({
                 </div>
                 <CodeMirrorQueryInput
                     value={queryInput}
-                    isLightTheme={isLightTheme}
                     onEditorCreated={onEditorCreatedLocal}
                     patternType={SearchPatternType.standard}
                     interpretComments={true}
diff --git a/client/web/src/notebooks/blocks/symbol/NotebookSymbolBlock.tsx b/client/web/src/notebooks/blocks/symbol/NotebookSymbolBlock.tsx
index 4dc910e03080..128ede298e2a 100644
--- a/client/web/src/notebooks/blocks/symbol/NotebookSymbolBlock.tsx
+++ b/client/web/src/notebooks/blocks/symbol/NotebookSymbolBlock.tsx
@@ -12,7 +12,6 @@ import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
 import { getRepositoryUrl } from '@sourcegraph/shared/src/search/stream'
 import { SymbolKind } from '@sourcegraph/shared/src/symbols/SymbolKind'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { codeCopiedEvent } from '@sourcegraph/shared/src/tracking/event-log-creators'
 import { toPrettyBlobURL } from '@sourcegraph/shared/src/util/url'
 import { Alert, Icon, LoadingSpinner, Tooltip, useObservable } from '@sourcegraph/wildcard'
@@ -32,7 +31,6 @@ import styles from './NotebookSymbolBlock.module.scss'
 
 interface NotebookSymbolBlockProps
     extends BlockProps<SymbolBlock>,
-        ThemeProps,
         TelemetryProps,
         PlatformContextProps<'requestGraphQL' | 'urlToFile' | 'settings'> {
     isSourcegraphDotCom: boolean
@@ -57,7 +55,6 @@ export const NotebookSymbolBlock: React.FunctionComponent<React.PropsWithChildre
             isSelected,
             showMenu,
             isReadOnly,
-            isLightTheme,
             onRunBlock,
             onBlockInputChange,
             ...props
@@ -181,7 +178,6 @@ export const NotebookSymbolBlock: React.FunctionComponent<React.PropsWithChildre
                         <NotebookSymbolBlockInput
                             id={id}
                             queryInput={symbolQueryInput}
-                            isLightTheme={isLightTheme}
                             onEditorCreated={setEditor}
                             setQueryInput={debouncedSetSymbolQueryInput}
                             onSymbolSelected={onSymbolSelected}
diff --git a/client/web/src/notebooks/blocks/symbol/NotebookSymbolBlockInput.tsx b/client/web/src/notebooks/blocks/symbol/NotebookSymbolBlockInput.tsx
index 76a352dec9bc..7d4e9c7120b2 100644
--- a/client/web/src/notebooks/blocks/symbol/NotebookSymbolBlockInput.tsx
+++ b/client/web/src/notebooks/blocks/symbol/NotebookSymbolBlockInput.tsx
@@ -6,7 +6,6 @@ import { createDefaultSuggestions, RepoFileLink } from '@sourcegraph/branded'
 import { getFileMatchUrl, getRepositoryUrl, SymbolMatch } from '@sourcegraph/shared/src/search/stream'
 import { fetchStreamSuggestions } from '@sourcegraph/shared/src/search/suggestions'
 import { SymbolKind } from '@sourcegraph/shared/src/symbols/SymbolKind'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { Button, Code } from '@sourcegraph/wildcard'
 
 import { BlockProps, SymbolBlockInput } from '../..'
@@ -16,7 +15,7 @@ import { fetchSuggestions } from '../suggestions/suggestions'
 
 import styles from './NotebookSymbolBlockInput.module.scss'
 
-interface NotebookSymbolBlockInputProps extends ThemeProps, Pick<BlockProps, 'onRunBlock'> {
+interface NotebookSymbolBlockInputProps extends Pick<BlockProps, 'onRunBlock'> {
     id: string
     queryInput: string
     onEditorCreated: (editor: EditorView) => void
diff --git a/client/web/src/notebooks/listPage/NotebooksGettingStartedTab.tsx b/client/web/src/notebooks/listPage/NotebooksGettingStartedTab.tsx
index 266ba62f0f55..416e0c94196a 100644
--- a/client/web/src/notebooks/listPage/NotebooksGettingStartedTab.tsx
+++ b/client/web/src/notebooks/listPage/NotebooksGettingStartedTab.tsx
@@ -6,11 +6,11 @@ import classNames from 'classnames'
 import { AuthenticatedUser } from '@sourcegraph/shared/src/auth'
 import { useTemporarySetting } from '@sourcegraph/shared/src/settings/temporary/useTemporarySetting'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
+import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
 import { Container, Icon, Link, H2, H3, Text } from '@sourcegraph/wildcard'
 
 import { CallToActionBanner } from '../../components/CallToActionBanner'
 import { EnterprisePageRoutes } from '../../routes.constants'
-import { useTheme, ThemePreference } from '../../theme'
 import { eventLogger } from '../../tracking/eventLogger'
 
 import styles from './NotebooksGettingStartedTab.module.scss'
@@ -69,7 +69,7 @@ export const NotebooksGettingStartedTab: React.FunctionComponent<
         return canAutoplay ? { autoPlay: true, loop: true, controls: false } : { controls: true }
     }, [])
 
-    const isLightTheme = useTheme().enhancedThemePreference === ThemePreference.Light
+    const isLightTheme = useIsLightTheme()
 
     return (
         <>
diff --git a/client/web/src/notebooks/listPage/NotepadCta.tsx b/client/web/src/notebooks/listPage/NotepadCta.tsx
index ab091a1caa9e..7ad06f77271a 100644
--- a/client/web/src/notebooks/listPage/NotepadCta.tsx
+++ b/client/web/src/notebooks/listPage/NotepadCta.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
 
+import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
 import { ProductStatusBadge, Button, H3, Text } from '@sourcegraph/wildcard'
 
 import { NotepadIcon } from '../../search/Notepad'
-import { useTheme, ThemePreference } from '../../theme'
 
 export const NOTEPAD_CTA_ID = 'notepad-cta'
 
@@ -17,7 +17,7 @@ export const NotepadCTA: React.FunctionComponent<React.PropsWithChildren<Notepad
     onCancel,
 }) => {
     const assetsRoot = window.context?.assetsRoot || ''
-    const isLightTheme = useTheme().enhancedThemePreference === ThemePreference.Light
+    const isLightTheme = useIsLightTheme()
 
     return (
         <div>
diff --git a/client/web/src/notebooks/notebook/NotebookComponent.tsx b/client/web/src/notebooks/notebook/NotebookComponent.tsx
index b77d3e78d559..bff49737f41c 100644
--- a/client/web/src/notebooks/notebook/NotebookComponent.tsx
+++ b/client/web/src/notebooks/notebook/NotebookComponent.tsx
@@ -11,7 +11,6 @@ import { StreamingSearchResultsListProps } from '@sourcegraph/branded'
 import { asError, isErrorLike } from '@sourcegraph/common'
 import { PlatformContext } from '@sourcegraph/shared/src/platform/context'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { Button, useEventObservable, Icon } from '@sourcegraph/wildcard'
 
 import { Block, BlockDirection, BlockInit, BlockInput, BlockType } from '..'
@@ -34,7 +33,6 @@ import styles from './NotebookComponent.module.scss'
 
 export interface NotebookComponentProps
     extends SearchStreamingProps,
-        ThemeProps,
         TelemetryProps,
         Omit<StreamingSearchResultsListProps, 'location' | 'allExpanded' | 'executedQuery'> {
     globbing: boolean
@@ -84,7 +82,6 @@ export const NotebookComponent: React.FunctionComponent<React.PropsWithChildren<
         exportedFileName,
         isEmbedded,
         authenticatedUser,
-        isLightTheme,
         telemetryService,
         isSourcegraphDotCom,
         platformContext,
@@ -378,7 +375,6 @@ export const NotebookComponent: React.FunctionComponent<React.PropsWithChildren<
                     onAddBlock,
                     onMoveBlock,
                     onDuplicateBlock,
-                    isLightTheme,
                     isReadOnly,
                     isSelected,
                     showMenu: isSelected || !isSomethingElseSelected,
@@ -434,7 +430,6 @@ export const NotebookComponent: React.FunctionComponent<React.PropsWithChildren<
                 onMoveBlock,
                 onDuplicateBlock,
                 isEmbedded,
-                isLightTheme,
                 isReadOnly,
                 selectedBlockId,
                 telemetryService,
diff --git a/client/web/src/notebooks/notebookPage/EmbeddedNotebookPage.tsx b/client/web/src/notebooks/notebookPage/EmbeddedNotebookPage.tsx
index 57610d0c7bf7..5ee484e581be 100644
--- a/client/web/src/notebooks/notebookPage/EmbeddedNotebookPage.tsx
+++ b/client/web/src/notebooks/notebookPage/EmbeddedNotebookPage.tsx
@@ -23,7 +23,7 @@ import { NotebookContent, NotebookContentProps } from './NotebookContent'
 interface EmbeddedNotebookPageProps
     extends Pick<
             NotebookContentProps,
-            'isLightTheme' | 'searchContextsEnabled' | 'isSourcegraphDotCom' | 'authenticatedUser' | 'settingsCascade'
+            'searchContextsEnabled' | 'isSourcegraphDotCom' | 'authenticatedUser' | 'settingsCascade'
         >,
         PlatformContextProps<'sourcegraphURL' | 'requestGraphQL' | 'urlToFile' | 'settings'> {}
 
diff --git a/client/web/src/notebooks/notebookPage/NotebookContent.tsx b/client/web/src/notebooks/notebookPage/NotebookContent.tsx
index 24ed49de2746..40beeb7cc89d 100644
--- a/client/web/src/notebooks/notebookPage/NotebookContent.tsx
+++ b/client/web/src/notebooks/notebookPage/NotebookContent.tsx
@@ -7,7 +7,6 @@ import { StreamingSearchResultsListProps } from '@sourcegraph/branded'
 import { AuthenticatedUser } from '@sourcegraph/shared/src/auth'
 import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 
 import { Block, BlockInit } from '..'
 import { NotebookFields } from '../../graphql-operations'
@@ -17,7 +16,6 @@ import { NotebookComponent } from '../notebook/NotebookComponent'
 
 export interface NotebookContentProps
     extends SearchStreamingProps,
-        ThemeProps,
         TelemetryProps,
         Omit<StreamingSearchResultsListProps, 'allExpanded' | 'platformContext' | 'executedQuery'>,
         PlatformContextProps<'sourcegraphURL' | 'requestGraphQL' | 'urlToFile' | 'settings'> {
@@ -41,7 +39,6 @@ export const NotebookContent: React.FunctionComponent<React.PropsWithChildren<No
         onUpdateBlocks,
         globbing,
         streamSearch,
-        isLightTheme,
         telemetryService,
         searchContextsEnabled,
         isSourcegraphDotCom,
@@ -81,7 +78,6 @@ export const NotebookContent: React.FunctionComponent<React.PropsWithChildren<No
             <NotebookComponent
                 globbing={globbing}
                 streamSearch={streamSearch}
-                isLightTheme={isLightTheme}
                 telemetryService={telemetryService}
                 searchContextsEnabled={searchContextsEnabled}
                 isSourcegraphDotCom={isSourcegraphDotCom}
diff --git a/client/web/src/notebooks/notebookPage/NotebookPage.tsx b/client/web/src/notebooks/notebookPage/NotebookPage.tsx
index 1db6c1d21326..f603b3e8e889 100644
--- a/client/web/src/notebooks/notebookPage/NotebookPage.tsx
+++ b/client/web/src/notebooks/notebookPage/NotebookPage.tsx
@@ -13,7 +13,7 @@ import { asError, isErrorLike } from '@sourcegraph/common'
 import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
 import { useTemporarySetting } from '@sourcegraph/shared/src/settings/temporary/useTemporarySetting'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
+import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
 import {
     LoadingSpinner,
     PageHeader,
@@ -34,7 +34,6 @@ import { PageTitle } from '../../components/PageTitle'
 import { NotebookFields, NotebookInput } from '../../graphql-operations'
 import { SearchStreamingProps } from '../../search'
 import { NotepadIcon } from '../../search/Notepad'
-import { useTheme, ThemePreference } from '../../theme'
 import {
     fetchNotebook as _fetchNotebook,
     updateNotebook as _updateNotebook,
@@ -51,10 +50,8 @@ import { NotebookPageHeaderActions } from './NotebookPageHeaderActions'
 import { NotebookTitle } from './NotebookTitle'
 
 import styles from './NotebookPage.module.scss'
-
 interface NotebookPageProps
     extends SearchStreamingProps,
-        ThemeProps,
         TelemetryProps,
         Omit<StreamingSearchResultsListProps, 'allExpanded' | 'platformContext' | 'executedQuery'>,
         PlatformContextProps<'sourcegraphURL' | 'requestGraphQL' | 'urlToFile' | 'settings'> {
@@ -83,7 +80,6 @@ export const NotebookPage: React.FunctionComponent<React.PropsWithChildren<Noteb
     copyNotebook = _copyNotebook,
     globbing,
     streamSearch,
-    isLightTheme,
     telemetryService,
     searchContextsEnabled,
     isSourcegraphDotCom,
@@ -311,7 +307,6 @@ export const NotebookPage: React.FunctionComponent<React.PropsWithChildren<Noteb
                                 exportedFileName={exportedFileName}
                                 globbing={globbing}
                                 streamSearch={streamSearch}
-                                isLightTheme={isLightTheme}
                                 telemetryService={telemetryService}
                                 searchContextsEnabled={searchContextsEnabled}
                                 isSourcegraphDotCom={isSourcegraphDotCom}
@@ -348,7 +343,7 @@ interface NotepadCTAProps {
 
 const NotepadCTA: React.FunctionComponent<React.PropsWithChildren<NotepadCTAProps>> = ({ onEnable, onClose }) => {
     const assetsRoot = window.context?.assetsRoot || ''
-    const isLightTheme = useTheme().enhancedThemePreference === ThemePreference.Light
+    const isLightTheme = useIsLightTheme()
 
     return (
         <MarketingBlock wrapperClassName={classNames(styles.notepadCta, 'd-none d-md-block')}>
diff --git a/client/web/src/org/OrgsArea.tsx b/client/web/src/org/OrgsArea.tsx
index 020397fe436a..4854823705fd 100644
--- a/client/web/src/org/OrgsArea.tsx
+++ b/client/web/src/org/OrgsArea.tsx
@@ -5,7 +5,6 @@ import { Routes, Route, useParams, useLocation, useNavigate } from 'react-router
 import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
 import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 
 import { AuthenticatedUser } from '../auth'
 import { withAuthenticatedUser } from '../auth/withAuthenticatedUser'
@@ -23,7 +22,6 @@ import { OrgSettingsSidebarItems } from './settings/OrgSettingsSidebar'
 export interface Props
     extends PlatformContextProps,
         SettingsCascadeProps,
-        ThemeProps,
         TelemetryProps,
         BreadcrumbsProps,
         BreadcrumbSetters,
diff --git a/client/web/src/org/area/OrgArea.tsx b/client/web/src/org/area/OrgArea.tsx
index 6dfb88123598..c6fc39849d7b 100644
--- a/client/web/src/org/area/OrgArea.tsx
+++ b/client/web/src/org/area/OrgArea.tsx
@@ -12,7 +12,6 @@ import { gql, dataOrThrowErrors } from '@sourcegraph/http-client'
 import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
 import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { LoadingSpinner, ErrorMessage } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../../auth'
@@ -90,7 +89,6 @@ export interface OrgAreaRoute extends RouteV6Descriptor<OrgAreaRouteContext> {
 export interface OrgAreaProps
     extends PlatformContextProps,
         SettingsCascadeProps,
-        ThemeProps,
         TelemetryProps,
         BreadcrumbsProps,
         BreadcrumbSetters,
@@ -124,7 +122,6 @@ interface State extends BreadcrumbSetters {
 export interface OrgAreaRouteContext
     extends PlatformContextProps,
         SettingsCascadeProps,
-        ThemeProps,
         TelemetryProps,
         NamespaceProps,
         BreadcrumbsProps,
@@ -237,7 +234,6 @@ export class OrgArea extends React.Component<OrgAreaProps> {
             onOrganizationUpdate: this.onDidUpdateOrganization,
             platformContext: this.props.platformContext,
             settingsCascade: this.props.settingsCascade,
-            isLightTheme: this.props.isLightTheme,
             namespace: this.state.orgOrError,
             telemetryService: this.props.telemetryService,
             isSourcegraphDotCom: this.props.isSourcegraphDotCom,
diff --git a/client/web/src/org/area/routes.tsx b/client/web/src/org/area/routes.tsx
index 73a02307a95d..31befe332cf5 100644
--- a/client/web/src/org/area/routes.tsx
+++ b/client/web/src/org/area/routes.tsx
@@ -20,7 +20,6 @@ export const orgAreaRoutes: readonly OrgAreaRoute[] = [
                 {...props}
                 routes={props.orgSettingsAreaRoutes}
                 sideBarItems={props.orgSettingsSideBarItems}
-                isLightTheme={props.isLightTheme}
             />
         ),
     },
diff --git a/client/web/src/org/settings/OrgSettingsArea.tsx b/client/web/src/org/settings/OrgSettingsArea.tsx
index ed4ebc5bce83..a508fb32062c 100644
--- a/client/web/src/org/settings/OrgSettingsArea.tsx
+++ b/client/web/src/org/settings/OrgSettingsArea.tsx
@@ -4,7 +4,6 @@ import MapSearchIcon from 'mdi-react/MapSearchIcon'
 import { Routes, Route, useLocation } from 'react-router-dom'
 
 import { useQuery } from '@sourcegraph/http-client'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { LoadingSpinner } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../../auth'
@@ -32,7 +31,7 @@ const NotFoundPage: React.FunctionComponent<React.PropsWithChildren<unknown>> =
 
 export interface OrgSettingsAreaRoute extends RouteV6Descriptor<OrgSettingsAreaRouteContext> {}
 
-export interface OrgSettingsAreaProps extends OrgAreaRouteContext, ThemeProps {
+export interface OrgSettingsAreaProps extends OrgAreaRouteContext {
     authenticatedUser: AuthenticatedUser
     sideBarItems: OrgSettingsSidebarItems
     routes: readonly OrgSettingsAreaRoute[]
diff --git a/client/web/src/org/settings/routes.tsx b/client/web/src/org/settings/routes.tsx
index ba7f0bf84788..c175ab188f90 100644
--- a/client/web/src/org/settings/routes.tsx
+++ b/client/web/src/org/settings/routes.tsx
@@ -1,40 +1,20 @@
+import { FC } from 'react'
+
+import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
 import { lazyComponent } from '@sourcegraph/shared/src/util/lazyComponent'
 import { Text } from '@sourcegraph/wildcard'
 
 import { SiteAdminAlert } from '../../site-admin/SiteAdminAlert'
 
 import { DeleteOrg } from './DeleteOrg'
-import { OrgSettingsAreaRoute } from './OrgSettingsArea'
+import { OrgSettingsAreaRoute, OrgSettingsAreaRouteContext } from './OrgSettingsArea'
 
 const SettingsArea = lazyComponent(() => import('../../settings/SettingsArea'), 'SettingsArea')
 
 export const orgSettingsAreaRoutes: readonly OrgSettingsAreaRoute[] = [
     {
         path: '',
-        render: props => (
-            <div>
-                <SettingsArea
-                    {...props}
-                    subject={props.org}
-                    extraHeader={
-                        <>
-                            {props.authenticatedUser && props.org.viewerCanAdminister && !props.org.viewerIsMember && (
-                                <SiteAdminAlert className="sidebar__alert">
-                                    Viewing settings for <strong>{props.org.name}</strong>
-                                </SiteAdminAlert>
-                            )}
-                            <Text>
-                                Organization settings apply to all members. User settings override organization
-                                settings.
-                            </Text>
-                        </>
-                    }
-                />
-                {props.isSourcegraphDotCom && props.org.viewerIsMember && props.showOrgDeletion && (
-                    <DeleteOrg {...props} />
-                )}
-            </div>
-        ),
+        render: props => <SettingsAreaIndexPage {...props} />,
     },
     {
         path: 'profile',
@@ -45,3 +25,32 @@ export const orgSettingsAreaRoutes: readonly OrgSettingsAreaRoute[] = [
         render: lazyComponent(() => import('./members/OrgSettingsMembersPage'), 'OrgSettingsMembersPage'),
     },
 ]
+
+interface SettingsAreaIndexPageProps extends OrgSettingsAreaRouteContext {}
+
+const SettingsAreaIndexPage: FC<SettingsAreaIndexPageProps> = props => {
+    const isLightTheme = useIsLightTheme()
+
+    return (
+        <div>
+            <SettingsArea
+                {...props}
+                isLightTheme={isLightTheme}
+                subject={props.org}
+                extraHeader={
+                    <>
+                        {props.authenticatedUser && props.org.viewerCanAdminister && !props.org.viewerIsMember && (
+                            <SiteAdminAlert className="sidebar__alert">
+                                Viewing settings for <strong>{props.org.name}</strong>
+                            </SiteAdminAlert>
+                        )}
+                        <Text>
+                            Organization settings apply to all members. User settings override organization settings.
+                        </Text>
+                    </>
+                }
+            />
+            {props.isSourcegraphDotCom && props.org.viewerIsMember && props.showOrgDeletion && <DeleteOrg {...props} />}
+        </div>
+    )
+}
diff --git a/client/web/src/repo/RepoContainer.tsx b/client/web/src/repo/RepoContainer.tsx
index c0444f82d9b5..9549e5a71523 100644
--- a/client/web/src/repo/RepoContainer.tsx
+++ b/client/web/src/repo/RepoContainer.tsx
@@ -23,7 +23,6 @@ import { SearchContextProps } from '@sourcegraph/shared/src/search'
 import { escapeSpaces } from '@sourcegraph/shared/src/search/query/filters'
 import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { lazyComponent } from '@sourcegraph/shared/src/util/lazyComponent'
 import { makeRepoURI } from '@sourcegraph/shared/src/util/url'
 import { Button, Icon, Link, useObservable } from '@sourcegraph/wildcard'
@@ -71,7 +70,6 @@ export interface RepoContainerContext
         SettingsCascadeProps,
         ExtensionsControllerProps,
         PlatformContextProps,
-        ThemeProps,
         HoverThresholdProps,
         TelemetryProps,
         Pick<SearchContextProps, 'selectedSearchContextSpec' | 'searchContextsEnabled'>,
@@ -111,7 +109,6 @@ interface RepoContainerProps
         PlatformContextProps,
         TelemetryProps,
         ExtensionsControllerProps,
-        ThemeProps,
         Pick<SearchContextProps, 'selectedSearchContextSpec' | 'searchContextsEnabled'>,
         BreadcrumbSetters,
         BreadcrumbsProps,
diff --git a/client/web/src/repo/RepoRevisionContainer.tsx b/client/web/src/repo/RepoRevisionContainer.tsx
index 293b5fde816a..9f2e45328f49 100644
--- a/client/web/src/repo/RepoRevisionContainer.tsx
+++ b/client/web/src/repo/RepoRevisionContainer.tsx
@@ -9,7 +9,6 @@ import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
 import { SearchContextProps } from '@sourcegraph/shared/src/search'
 import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { RevisionSpec } from '@sourcegraph/shared/src/util/url'
 import { Button, LoadingSpinner, Popover, PopoverContent, PopoverTrigger, Position } from '@sourcegraph/wildcard'
 
@@ -44,7 +43,6 @@ export interface RepoRevisionContainerContext
         SettingsCascadeProps,
         ExtensionsControllerProps,
         PlatformContextProps,
-        ThemeProps,
         TelemetryProps,
         HoverThresholdProps,
         Omit<RepoContainerContext, 'onDidUpdateExternalLinks' | 'repo' | 'resolvedRevisionOrError'>,
@@ -80,7 +78,6 @@ interface RepoRevisionContainerProps
         TelemetryProps,
         HoverThresholdProps,
         ExtensionsControllerProps,
-        ThemeProps,
         Pick<SearchContextProps, 'selectedSearchContextSpec' | 'searchContextsEnabled'>,
         RevisionSpec,
         BreadcrumbSetters,
diff --git a/client/web/src/repo/blob/BlameColumn.tsx b/client/web/src/repo/blob/BlameColumn.tsx
index 7a5d04a7a389..9f396eb6362f 100644
--- a/client/web/src/repo/blob/BlameColumn.tsx
+++ b/client/web/src/repo/blob/BlameColumn.tsx
@@ -13,7 +13,6 @@ import styles from './BlameColumn.module.scss'
 interface BlameColumnProps {
     isBlameVisible?: boolean
     blameHunks?: { current: BlameHunk[] | undefined; firstCommitDate: Date | undefined }
-    isLightTheme: boolean
     codeViewElements: ReplaySubject<HTMLElement | null>
 }
 
@@ -25,123 +24,120 @@ const getRowByLine = (line: number): HTMLTableRowElement | null | undefined =>
 const selectRow = (line: number): void => getRowByLine(line)?.classList.add('highlighted')
 const deselectRow = (line: number): void => getRowByLine(line)?.classList.remove('highlighted')
 
-export const BlameColumn = React.memo<BlameColumnProps>(
-    ({ isBlameVisible, codeViewElements, blameHunks, isLightTheme }) => {
-        const navigate = useNavigate()
-        /**
-         * Array to store the DOM element and the blame hunk to render in it.
-         * As blame decorations are displayed in the column view, we need to add a corresponding
-         * cell to each row regrdless of whether there is a blame hunk to render in it or not (empty cell).
-         * Array length equals to the number of rows in the table.
-         * Array index represents 0-based line number.
-         */
-        const [cells, setCells] = React.useState<[HTMLTableCellElement, BlameHunk | undefined][]>([])
-
-        /*
+export const BlameColumn = React.memo<BlameColumnProps>(({ isBlameVisible, codeViewElements, blameHunks }) => {
+    const navigate = useNavigate()
+    /**
+     * Array to store the DOM element and the blame hunk to render in it.
+     * As blame decorations are displayed in the column view, we need to add a corresponding
+     * cell to each row regrdless of whether there is a blame hunk to render in it or not (empty cell).
+     * Array length equals to the number of rows in the table.
+     * Array index represents 0-based line number.
+     */
+    const [cells, setCells] = React.useState<[HTMLTableCellElement, BlameHunk | undefined][]>([])
+
+    /*
         `BlameColumn` uses `useLayoutEffect` instead of `useEffect` in order to synchronously re-render
         after mount/decoration updates, but before the browser has painted DOM updates.
         This prevents users from seeing inconsistent states where changes handled by React have been
         painted, but DOM manipulation handled by these effects are painted on the next tick.
      */
-        useLayoutEffect(() => {
-            const addedCells: [HTMLTableCellElement, BlameHunk | undefined][] = []
-
-            const cleanup = (): void => {
-                // remove added cells
-                for (const [cell] of addedCells) {
-                    const row = cell.closest('tr')
-                    cell.remove()
-
-                    // if no other columns with decorations
-                    if (!row?.querySelector(`.${styles.decoration}`)) {
-                        // remove line number cell extra horizontal padding
-                        row?.querySelector('td.line')?.classList.remove('px-2')
-                    }
+    useLayoutEffect(() => {
+        const addedCells: [HTMLTableCellElement, BlameHunk | undefined][] = []
+
+        const cleanup = (): void => {
+            // remove added cells
+            for (const [cell] of addedCells) {
+                const row = cell.closest('tr')
+                cell.remove()
+
+                // if no other columns with decorations
+                if (!row?.querySelector(`.${styles.decoration}`)) {
+                    // remove line number cell extra horizontal padding
+                    row?.querySelector('td.line')?.classList.remove('px-2')
                 }
-
-                // reset state
-                setCells([])
             }
 
-            const subscription = codeViewElements.subscribe(codeView => {
-                if (codeView?.firstElementChild instanceof HTMLTableElement) {
-                    const table = codeView.firstElementChild
-
-                    for (let index = 0; index < table.rows.length; index++) {
-                        const row = table.rows[index]
-                        let cell = row.querySelector<HTMLTableCellElement>(`td.${styles.decoration}`)
-                        if (!cell) {
-                            cell = row.insertCell(1)
-                            cell.classList.add(styles.decoration)
-
-                            // add line number cell extra horizontal padding
-                            row.querySelector('td.line')?.classList.add('px-2')
-
-                            // add decorations wrapper
-                            const wrapper = document.createElement('div')
-                            wrapper.classList.add(styles.wrapper)
-                            if (isBlameVisible) {
-                                // ensure blame column has needed width to avoid content jumping after blame hunks are loaded
-                                wrapper.classList.add(styles.visible)
-                            }
-                            cell.append(wrapper)
-
-                            // add extra spacers to first and last rows (if table has only one row add both spacers)
-                            if (index === 0) {
-                                const spacer = document.createElement('div')
-                                spacer.classList.add('top-spacer')
-                                cell.prepend(spacer)
-                            }
-
-                            if (index === table.rows.length - 1) {
-                                const spacer = document.createElement('div')
-                                spacer.classList.add('bottom-spacer')
-                                cell.append(spacer)
-                            }
+            // reset state
+            setCells([])
+        }
+
+        const subscription = codeViewElements.subscribe(codeView => {
+            if (codeView?.firstElementChild instanceof HTMLTableElement) {
+                const table = codeView.firstElementChild
+
+                for (let index = 0; index < table.rows.length; index++) {
+                    const row = table.rows[index]
+                    let cell = row.querySelector<HTMLTableCellElement>(`td.${styles.decoration}`)
+                    if (!cell) {
+                        cell = row.insertCell(1)
+                        cell.classList.add(styles.decoration)
+
+                        // add line number cell extra horizontal padding
+                        row.querySelector('td.line')?.classList.add('px-2')
+
+                        // add decorations wrapper
+                        const wrapper = document.createElement('div')
+                        wrapper.classList.add(styles.wrapper)
+                        if (isBlameVisible) {
+                            // ensure blame column has needed width to avoid content jumping after blame hunks are loaded
+                            wrapper.classList.add(styles.visible)
                         }
+                        cell.append(wrapper)
 
-                        const currentLineDecorations = blameHunks?.current?.find(hunk => hunk.startLine - 1 === index)
+                        // add extra spacers to first and last rows (if table has only one row add both spacers)
+                        if (index === 0) {
+                            const spacer = document.createElement('div')
+                            spacer.classList.add('top-spacer')
+                            cell.prepend(spacer)
+                        }
 
-                        // store created cell and corresponding blame hunk (or undefined if no blame hunk)
-                        addedCells.push([cell, currentLineDecorations])
+                        if (index === table.rows.length - 1) {
+                            const spacer = document.createElement('div')
+                            spacer.classList.add('bottom-spacer')
+                            cell.append(spacer)
+                        }
                     }
 
-                    setCells(addedCells)
-                } else {
-                    // code view ref passed `null`, so element is leaving DOM
-                    cleanup()
+                    const currentLineDecorations = blameHunks?.current?.find(hunk => hunk.startLine - 1 === index)
+
+                    // store created cell and corresponding blame hunk (or undefined if no blame hunk)
+                    addedCells.push([cell, currentLineDecorations])
                 }
-            })
 
-            return () => {
-                subscription.unsubscribe()
+                setCells(addedCells)
+            } else {
+                // code view ref passed `null`, so element is leaving DOM
                 cleanup()
             }
-        }, [codeViewElements, isBlameVisible, blameHunks])
-
-        return (
-            <>
-                {cells.map(([portalRoot, blameHunk], index) =>
-                    ReactDOM.createPortal(
-                        <BlameDecoration
-                            line={index + 1}
-                            blameHunk={blameHunk}
-                            navigate={navigate}
-                            onSelect={selectRow}
-                            onDeselect={deselectRow}
-                            firstCommitDate={blameHunks?.firstCommitDate}
-                            isLightTheme={isLightTheme}
-                            hideRecency={true}
-                        />,
-                        // The classname can contain a +, so we would either need to escape it (boo!),
-                        // or just use getElementsByClassName.
-                        // eslint-disable-next-line unicorn/prefer-query-selector
-                        portalRoot.getElementsByClassName(styles.wrapper)[0] as HTMLDivElement
-                    )
-                )}
-            </>
-        )
-    }
-)
+        })
+
+        return () => {
+            subscription.unsubscribe()
+            cleanup()
+        }
+    }, [codeViewElements, isBlameVisible, blameHunks])
+
+    return (
+        <>
+            {cells.map(([portalRoot, blameHunk], index) =>
+                ReactDOM.createPortal(
+                    <BlameDecoration
+                        line={index + 1}
+                        blameHunk={blameHunk}
+                        navigate={navigate}
+                        onSelect={selectRow}
+                        onDeselect={deselectRow}
+                        firstCommitDate={blameHunks?.firstCommitDate}
+                        hideRecency={true}
+                    />,
+                    // The classname can contain a +, so we would either need to escape it (boo!),
+                    // or just use getElementsByClassName.
+                    // eslint-disable-next-line unicorn/prefer-query-selector
+                    portalRoot.getElementsByClassName(styles.wrapper)[0] as HTMLDivElement
+                )
+            )}
+        </>
+    )
+})
 
 BlameColumn.displayName = 'BlameColumn'
diff --git a/client/web/src/repo/blob/BlameDecoration.tsx b/client/web/src/repo/blob/BlameDecoration.tsx
index e9fb6353ba25..dd04eedae6cb 100644
--- a/client/web/src/repo/blob/BlameDecoration.tsx
+++ b/client/web/src/repo/blob/BlameDecoration.tsx
@@ -117,7 +117,6 @@ interface BlameDecorationProps {
     navigate: NavigateFunction
     onSelect?: (line: number) => void
     onDeselect?: (line: number) => void
-    isLightTheme: boolean
     hideRecency: boolean
 }
 
@@ -128,7 +127,6 @@ export const BlameDecoration: React.FunctionComponent<BlameDecorationProps> = ({
     onDeselect,
     firstCommitDate,
     externalURLs,
-    isLightTheme,
     hideRecency,
     navigate,
 }) => {
@@ -154,7 +152,7 @@ export const BlameDecoration: React.FunctionComponent<BlameDecorationProps> = ({
     // Prevent hitting the backend (full page reloads) for links that stay inside the app.
     const handleParentCommitLinkClick = useMemo(() => createLinkClickHandler(navigate), [navigate])
 
-    const recencyColor = useBlameRecencyColor(blameHunk?.displayInfo.commitDate, firstCommitDate, isLightTheme)
+    const recencyColor = useBlameRecencyColor(blameHunk?.displayInfo.commitDate, firstCommitDate)
 
     if (!blameHunk) {
         return null
diff --git a/client/web/src/repo/blob/BlameRecency.tsx b/client/web/src/repo/blob/BlameRecency.tsx
index ff932484e9e4..6b7dabafe8e5 100644
--- a/client/web/src/repo/blob/BlameRecency.tsx
+++ b/client/web/src/repo/blob/BlameRecency.tsx
@@ -2,6 +2,8 @@ import { useMemo } from 'react'
 
 import subYears from 'date-fns/subYears'
 
+import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
+
 // We use an exponential scale to get more diverse colors for more recent changes.
 //
 // The values are sampled from the following function:
@@ -25,11 +27,9 @@ const LIGHT_COLORS = COLORS.slice(0).reverse()
 const ONE_YEAR_AGO = subYears(Date.now(), 1).getTime()
 const THREE_YEARS_AGO = subYears(Date.now(), 3).getTime()
 
-export function useBlameRecencyColor(
-    commit: Date | undefined,
-    firstCommitDate: Date | undefined,
-    isLightTheme: boolean
-): string {
+export function useBlameRecencyColor(commit: Date | undefined, firstCommitDate: Date | undefined): string {
+    const isLightTheme = useIsLightTheme()
+
     return useMemo(() => {
         const colors = isLightTheme ? LIGHT_COLORS : COLORS
 
diff --git a/client/web/src/repo/blob/BlobPage.tsx b/client/web/src/repo/blob/BlobPage.tsx
index a442b331fb71..ba4a78714725 100644
--- a/client/web/src/repo/blob/BlobPage.tsx
+++ b/client/web/src/repo/blob/BlobPage.tsx
@@ -24,7 +24,6 @@ import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
 import { SearchContextProps } from '@sourcegraph/shared/src/search'
 import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { lazyComponent } from '@sourcegraph/shared/src/util/lazyComponent'
 import { ModeSpec, parseQueryAndHash, RepoFile } from '@sourcegraph/shared/src/util/url'
 import {
@@ -89,7 +88,6 @@ interface BlobPageProps
         PlatformContextProps,
         TelemetryProps,
         ExtensionsControllerProps,
-        ThemeProps,
         HoverThresholdProps,
         BreadcrumbSetters,
         SearchStreamingProps,
@@ -124,7 +122,7 @@ export const BlobPage: React.FunctionComponent<BlobPageProps> = ({ className, ..
     const { span } = useCurrentSpan()
     const [wrapCode, setWrapCode] = useState(ToggleLineWrap.getValue())
     let renderMode = getModeFromURL(location)
-    const { repoID, repoName, revision, commitID, filePath, isLightTheme, useBreadcrumb, mode } = props
+    const { repoID, repoName, revision, commitID, filePath, useBreadcrumb, mode } = props
     const enableCodeMirror = useExperimentalFeatures(features => features.enableCodeMirrorFileView ?? true)
     const experimentalCodeNavigation = useExperimentalFeatures(features => features.codeNavigation)
     const enableLazyBlobSyntaxHighlighting = useExperimentalFeatures(
@@ -587,7 +585,6 @@ export const BlobPage: React.FunctionComponent<BlobPageProps> = ({ className, ..
                         extensionsController={props.extensionsController}
                         settingsCascade={props.settingsCascade}
                         onHoverShown={props.onHoverShown}
-                        isLightTheme={isLightTheme}
                         telemetryService={props.telemetryService}
                         role="region"
                         ariaLabel="File blob"
diff --git a/client/web/src/repo/blob/CodeMirrorBlob.tsx b/client/web/src/repo/blob/CodeMirrorBlob.tsx
index 976ed1876cf6..32ce9dad7399 100644
--- a/client/web/src/repo/blob/CodeMirrorBlob.tsx
+++ b/client/web/src/repo/blob/CodeMirrorBlob.tsx
@@ -21,7 +21,7 @@ import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
 import { Shortcut } from '@sourcegraph/shared/src/react-shortcuts'
 import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
+import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
 import { AbsoluteRepoFile, ModeSpec, parseQueryAndHash } from '@sourcegraph/shared/src/util/url'
 import { useLocalStorage } from '@sourcegraph/wildcard'
 
@@ -61,7 +61,6 @@ export interface BlobProps
         TelemetryProps,
         HoverThresholdProps,
         ExtensionsControllerProps,
-        ThemeProps,
         CodeMirrorBlobProps {
     className: string
     wrapCode: boolean
@@ -178,7 +177,6 @@ export const CodeMirrorBlob: React.FunctionComponent<BlobProps> = props => {
     const {
         className,
         wrapCode,
-        isLightTheme,
         ariaLabel,
         role,
         extensionsController,
@@ -226,6 +224,7 @@ export const CodeMirrorBlob: React.FunctionComponent<BlobProps> = props => {
         [props, navigate, location]
     )
 
+    const isLightTheme = useIsLightTheme()
     const themeSettings = useMemo(() => EditorView.darkTheme.of(isLightTheme === false), [isLightTheme])
     const wrapCodeSettings = useMemo<Extension>(() => (wrapCode ? EditorView.lineWrapping : []), [wrapCode])
 
diff --git a/client/web/src/repo/blob/LegacyBlob.tsx b/client/web/src/repo/blob/LegacyBlob.tsx
index f42b94009252..65c37453ace0 100644
--- a/client/web/src/repo/blob/LegacyBlob.tsx
+++ b/client/web/src/repo/blob/LegacyBlob.tsx
@@ -130,7 +130,6 @@ const domFunctions = {
  */
 export const LegacyBlob: FC<BlobProps> = props => {
     const {
-        isLightTheme,
         extensionsController,
         blobInfo,
         platformContext,
@@ -668,7 +667,6 @@ export const LegacyBlob: FC<BlobProps> = props => {
                     isBlameVisible={props.isBlameVisible}
                     blameHunks={props.blameHunks}
                     codeViewElements={codeViewElements}
-                    isLightTheme={isLightTheme}
                 />
             </div>
         </>
diff --git a/client/web/src/repo/blob/codemirror/blame-decorations.tsx b/client/web/src/repo/blob/codemirror/blame-decorations.tsx
index 8322019f791d..892883ae716f 100644
--- a/client/web/src/repo/blob/codemirror/blame-decorations.tsx
+++ b/client/web/src/repo/blob/codemirror/blame-decorations.tsx
@@ -88,7 +88,6 @@ class BlameDecorationWidget extends WidgetType {
                     onDeselect={this.deselectRow}
                     firstCommitDate={this.blameHunkMetadata.firstCommitDate}
                     externalURLs={this.blameHunkMetadata.externalURLs}
-                    isLightTheme={this.isLightTheme}
                     hideRecency={false}
                 />
             )
diff --git a/client/web/src/repo/blob/codemirror/hovercard.tsx b/client/web/src/repo/blob/codemirror/hovercard.tsx
index ef31abedca1f..f481b9a528b2 100644
--- a/client/web/src/repo/blob/codemirror/hovercard.tsx
+++ b/client/web/src/repo/blob/codemirror/hovercard.tsx
@@ -636,7 +636,6 @@ export class HovercardView implements TooltipView {
                         // Blob props
                         location={props.location}
                         onHoverShown={props.onHoverShown}
-                        isLightTheme={props.isLightTheme}
                         platformContext={props.platformContext}
                         settingsCascade={props.settingsCascade}
                         telemetryService={props.telemetryService}
diff --git a/client/web/src/repo/blob/panel/BlobPanel.tsx b/client/web/src/repo/blob/panel/BlobPanel.tsx
index 339f085affdd..bb17acf5d6fa 100644
--- a/client/web/src/repo/blob/panel/BlobPanel.tsx
+++ b/client/web/src/repo/blob/panel/BlobPanel.tsx
@@ -12,7 +12,6 @@ import { Scalars } from '@sourcegraph/shared/src/graphql-operations'
 import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
 import { Settings, SettingsCascadeOrError, SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { AbsoluteRepoFile, ModeSpec, parseQueryAndHash } from '@sourcegraph/shared/src/util/url'
 
 import { CodeIntelligenceProps } from '../../../codeintel'
@@ -26,7 +25,6 @@ interface Props
         ModeSpec,
         SettingsCascadeProps,
         ExtensionsControllerProps,
-        ThemeProps,
         PlatformContextProps,
         Pick<CodeIntelligenceProps, 'useCodeIntel'>,
         TelemetryProps {
@@ -48,7 +46,6 @@ function useBlobPanelViews({
     filePath,
     repoID,
     settingsCascade,
-    isLightTheme,
     platformContext,
     useCodeIntel,
     telemetryService,
@@ -85,7 +82,6 @@ function useBlobPanelViews({
                               <ReferencesPanel
                                   settingsCascade={settingsCascade}
                                   platformContext={platformContext}
-                                  isLightTheme={isLightTheme}
                                   extensionsController={extensionsController}
                                   telemetryService={telemetryService}
                                   key="references"
@@ -132,7 +128,6 @@ function useBlobPanelViews({
             position,
             settingsCascade,
             platformContext,
-            isLightTheme,
             extensionsController,
             telemetryService,
             fetchHighlightedFileLineRanges,
diff --git a/client/web/src/repo/commit/RepositoryCommitPage.tsx b/client/web/src/repo/commit/RepositoryCommitPage.tsx
index 47ea639ef6b9..19d85f1bf74f 100644
--- a/client/web/src/repo/commit/RepositoryCommitPage.tsx
+++ b/client/web/src/repo/commit/RepositoryCommitPage.tsx
@@ -9,7 +9,6 @@ import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
 import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
 import { useTemporarySetting } from '@sourcegraph/shared/src/settings/temporary/useTemporarySetting'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { LoadingSpinner, ErrorAlert } from '@sourcegraph/wildcard'
 
 import { FileDiffNode, FileDiffNodeProps } from '../../components/diff/FileDiffNode'
@@ -44,7 +43,7 @@ const COMMIT_QUERY = gql`
     ${gitCommitFragment}
 `
 
-interface RepositoryCommitPageProps extends TelemetryProps, PlatformContextProps, ThemeProps, SettingsCascadeProps {
+interface RepositoryCommitPageProps extends TelemetryProps, PlatformContextProps, SettingsCascadeProps {
     repo: RepositoryFields
     onDidUpdateExternalLinks: (externalLinks: ExternalLinkFields[] | undefined) => void
 }
diff --git a/client/web/src/repo/compare/RepositoryCompareArea.tsx b/client/web/src/repo/compare/RepositoryCompareArea.tsx
index 1300c5306b59..ac4b73843861 100644
--- a/client/web/src/repo/compare/RepositoryCompareArea.tsx
+++ b/client/web/src/repo/compare/RepositoryCompareArea.tsx
@@ -3,7 +3,6 @@ import { FC } from 'react'
 import classNames from 'classnames'
 import { useLocation, useNavigate, useParams } from 'react-router-dom'
 
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { Alert, LoadingSpinner } from '@sourcegraph/wildcard'
 
 import { BreadcrumbSetters } from '../../components/Breadcrumbs'
@@ -14,7 +13,7 @@ import { RepositoryCompareOverviewPage } from './RepositoryCompareOverviewPage'
 
 import styles from './RepositoryCompareArea.module.scss'
 
-interface RepositoryCompareAreaProps extends ThemeProps, BreadcrumbSetters {
+interface RepositoryCompareAreaProps extends BreadcrumbSetters {
     repo?: RepositoryFields
 }
 
@@ -38,7 +37,7 @@ const BREADCRUMB = { key: 'compare', element: <>Compare</> }
  * Renders pages related to a repository comparison.
  */
 export const RepositoryCompareArea: FC<RepositoryCompareAreaProps> = props => {
-    const { repo, useBreadcrumb, isLightTheme } = props
+    const { repo, useBreadcrumb } = props
 
     const { '*': splat } = useParams<{ '*': string }>()
     const location = useLocation()
@@ -71,13 +70,7 @@ export const RepositoryCompareArea: FC<RepositoryCompareAreaProps> = props => {
             {spec === null ? (
                 <Alert variant="danger">Invalid comparison specifier</Alert>
             ) : (
-                <RepositoryCompareOverviewPage
-                    {...commonProps}
-                    path={path}
-                    isLightTheme={isLightTheme}
-                    location={location}
-                    navigate={navigate}
-                />
+                <RepositoryCompareOverviewPage {...commonProps} path={path} location={location} navigate={navigate} />
             )}
         </div>
     )
diff --git a/client/web/src/repo/compare/RepositoryCompareDiffPage.tsx b/client/web/src/repo/compare/RepositoryCompareDiffPage.tsx
index 791ad91fffbf..d3a28ab20bb9 100644
--- a/client/web/src/repo/compare/RepositoryCompareDiffPage.tsx
+++ b/client/web/src/repo/compare/RepositoryCompareDiffPage.tsx
@@ -5,7 +5,6 @@ import { map } from 'rxjs/operators'
 
 import { dataOrThrowErrors, gql } from '@sourcegraph/http-client'
 import { Scalars } from '@sourcegraph/shared/src/graphql-operations'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 
 import { fileDiffFields, diffStatFields } from '../../backend/diff'
 import { requestGraphQL } from '../../backend/graphql'
@@ -82,7 +81,7 @@ export function queryRepositoryComparisonFileDiffs(args: {
     )
 }
 
-interface RepositoryCompareDiffPageProps extends RepositoryCompareAreaPageProps, ThemeProps {
+interface RepositoryCompareDiffPageProps extends RepositoryCompareAreaPageProps {
     /** The base of the comparison. */
     base: { repoName: string; repoID: Scalars['ID']; revision: string | null; commitID: string }
 
diff --git a/client/web/src/repo/compare/RepositoryCompareOverviewPage.tsx b/client/web/src/repo/compare/RepositoryCompareOverviewPage.tsx
index 057793aee423..77879b28244a 100644
--- a/client/web/src/repo/compare/RepositoryCompareOverviewPage.tsx
+++ b/client/web/src/repo/compare/RepositoryCompareOverviewPage.tsx
@@ -6,7 +6,6 @@ import { catchError, distinctUntilChanged, map, switchMap } from 'rxjs/operators
 
 import { asError, createAggregateError, ErrorLike, isErrorLike, logger } from '@sourcegraph/common'
 import { gql } from '@sourcegraph/http-client'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { LoadingSpinner, Text, ErrorAlert } from '@sourcegraph/wildcard'
 
 import { queryGraphQL } from '../../backend/graphql'
@@ -73,7 +72,7 @@ function queryRepositoryComparison(args: {
     )
 }
 
-interface Props extends RepositoryCompareAreaPageProps, ThemeProps {
+interface Props extends RepositoryCompareAreaPageProps {
     /** The base of the comparison. */
     base: { repoName: string; repoID: Scalars['ID']; revision?: string | null }
 
diff --git a/client/web/src/repo/settings/RepoSettingsArea.tsx b/client/web/src/repo/settings/RepoSettingsArea.tsx
index c41ae692d7e9..f381c84ce43c 100644
--- a/client/web/src/repo/settings/RepoSettingsArea.tsx
+++ b/client/web/src/repo/settings/RepoSettingsArea.tsx
@@ -9,7 +9,6 @@ import { catchError } from 'rxjs/operators'
 
 import { asError, ErrorLike, isErrorLike } from '@sourcegraph/common'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { useObservable, ErrorMessage } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../../auth'
@@ -23,13 +22,13 @@ import { RepoSettingsSidebar, RepoSettingsSideBarGroups } from './RepoSettingsSi
 
 import styles from './RepoSettingsArea.module.scss'
 
-export interface RepoSettingsAreaRouteContext extends ThemeProps, TelemetryProps {
+export interface RepoSettingsAreaRouteContext extends TelemetryProps {
     repo: SettingsAreaRepositoryFields
 }
 
 export interface RepoSettingsAreaRoute extends RouteV6Descriptor<RepoSettingsAreaRouteContext> {}
 
-interface Props extends BreadcrumbSetters, ThemeProps, TelemetryProps {
+interface Props extends BreadcrumbSetters, TelemetryProps {
     repoSettingsAreaRoutes: readonly RepoSettingsAreaRoute[]
     repoSettingsSidebarGroups: RepoSettingsSideBarGroups
     repoName: string
@@ -82,7 +81,6 @@ export const RepoSettingsArea: React.FunctionComponent<React.PropsWithChildren<P
 
     const context: RepoSettingsAreaRouteContext = {
         repo: repoOrError,
-        isLightTheme: props.isLightTheme,
         telemetryService: props.telemetryService,
     }
 
diff --git a/client/web/src/repo/tree/TreePage.tsx b/client/web/src/repo/tree/TreePage.tsx
index 4ab5947ec553..19aae9a8e53c 100644
--- a/client/web/src/repo/tree/TreePage.tsx
+++ b/client/web/src/repo/tree/TreePage.tsx
@@ -15,7 +15,6 @@ import { Settings } from '@sourcegraph/shared/src/schema/settings.schema'
 import { SearchContextProps } from '@sourcegraph/shared/src/search'
 import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { toURIWithPath, toPrettyBlobURL } from '@sourcegraph/shared/src/util/url'
 import {
     Container,
@@ -49,7 +48,6 @@ interface Props
     extends SettingsCascadeProps<Settings>,
         ExtensionsControllerProps,
         PlatformContextProps,
-        ThemeProps,
         TelemetryProps,
         CodeIntelligenceProps,
         BatchChangesProps,
diff --git a/client/web/src/repo/tree/TreePageContent.tsx b/client/web/src/repo/tree/TreePageContent.tsx
index c93844b4f83a..4bcf06900db3 100644
--- a/client/web/src/repo/tree/TreePageContent.tsx
+++ b/client/web/src/repo/tree/TreePageContent.tsx
@@ -12,7 +12,6 @@ import { ExtensionsControllerProps } from '@sourcegraph/shared/src/extensions/co
 import { SearchPatternType, TreeFields } from '@sourcegraph/shared/src/graphql-operations'
 import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { buildSearchURLQuery } from '@sourcegraph/shared/src/util/url'
 import { Card, CardHeader, Link, Tooltip } from '@sourcegraph/wildcard'
 
@@ -169,7 +168,7 @@ export const fetchDiffStats = (args: {
         })
     )
 
-interface TreePageContentProps extends ExtensionsControllerProps, ThemeProps, TelemetryProps, PlatformContextProps {
+interface TreePageContentProps extends ExtensionsControllerProps, TelemetryProps, PlatformContextProps {
     filePath: string
     tree: TreeFields
     repo: TreePageRepositoryFields
diff --git a/client/web/src/routes.tsx b/client/web/src/routes.tsx
index 9274ea967ebc..e501f060d3ae 100644
--- a/client/web/src/routes.tsx
+++ b/client/web/src/routes.tsx
@@ -2,7 +2,6 @@ import { useEffect } from 'react'
 
 import { Navigate } from 'react-router-dom'
 
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { lazyComponent } from '@sourcegraph/shared/src/util/lazyComponent'
 
 import { BatchChangesProps } from './batches'
@@ -13,7 +12,6 @@ import type { LegacyLayoutProps } from './LegacyLayout'
 import { PageRoutes } from './routes.constants'
 import { SearchPageWrapper } from './search/SearchPageWrapper'
 import { getExperimentalFeatures } from './stores'
-import { ThemePreferenceProps } from './theme'
 
 const SiteAdminArea = lazyComponent(() => import('./site-admin/SiteAdminArea'), 'SiteAdminArea')
 const SearchConsolePage = lazyComponent(() => import('./search/SearchConsolePage'), 'SearchConsolePage')
@@ -39,8 +37,6 @@ const RepoContainer = lazyComponent(() => import('./repo/RepoContainer'), 'RepoC
 
 export interface LegacyLayoutRouteComponentProps
     extends Omit<LegacyLayoutProps, 'match'>,
-        ThemeProps,
-        ThemePreferenceProps,
         BreadcrumbsProps,
         BreadcrumbSetters,
         CodeIntelligenceProps,
diff --git a/client/web/src/savedSearches/SavedSearchCreateForm.tsx b/client/web/src/savedSearches/SavedSearchCreateForm.tsx
index 9b03bd754770..18b5d8ecc99e 100644
--- a/client/web/src/savedSearches/SavedSearchCreateForm.tsx
+++ b/client/web/src/savedSearches/SavedSearchCreateForm.tsx
@@ -6,7 +6,6 @@ import { catchError, map, switchMap } from 'rxjs/operators'
 import { Omit } from 'utility-types'
 
 import { ErrorLike, isErrorLike, asError } from '@sourcegraph/common'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { screenReaderAnnounce } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../auth'
@@ -16,7 +15,7 @@ import { eventLogger } from '../tracking/eventLogger'
 
 import { SavedQueryFields, SavedSearchForm } from './SavedSearchForm'
 
-interface Props extends NamespaceProps, ThemeProps {
+interface Props extends NamespaceProps {
     authenticatedUser: AuthenticatedUser | null
     isSourcegraphDotCom: boolean
     location: Location
diff --git a/client/web/src/savedSearches/SavedSearchForm.tsx b/client/web/src/savedSearches/SavedSearchForm.tsx
index b67deb6c9ae5..71a472cd67db 100644
--- a/client/web/src/savedSearches/SavedSearchForm.tsx
+++ b/client/web/src/savedSearches/SavedSearchForm.tsx
@@ -5,7 +5,6 @@ import { Omit } from 'utility-types'
 
 import { LazyQueryInput } from '@sourcegraph/branded'
 import { QueryState } from '@sourcegraph/shared/src/search'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import {
     Container,
     PageHeader,
@@ -38,7 +37,7 @@ export interface SavedQueryFields {
     slackWebhookURL: string | null
 }
 
-export interface SavedSearchFormProps extends NamespaceProps, ThemeProps {
+export interface SavedSearchFormProps extends NamespaceProps {
     authenticatedUser: AuthenticatedUser | null
     defaultValues?: Partial<SavedQueryFields>
     title?: string
@@ -131,7 +130,6 @@ export const SavedSearchForm: React.FunctionComponent<React.PropsWithChildren<Sa
 
                         <LazyQueryInput
                             className={classNames('form-control', styles.queryInput)}
-                            isLightTheme={props.isLightTheme}
                             patternType={SearchPatternType.standard}
                             isSourcegraphDotCom={props.isSourcegraphDotCom}
                             caseSensitive={false}
diff --git a/client/web/src/savedSearches/SavedSearchUpdateForm.tsx b/client/web/src/savedSearches/SavedSearchUpdateForm.tsx
index 54ce30070937..642bad09de4f 100644
--- a/client/web/src/savedSearches/SavedSearchUpdateForm.tsx
+++ b/client/web/src/savedSearches/SavedSearchUpdateForm.tsx
@@ -15,7 +15,6 @@ import {
 } from 'rxjs/operators'
 
 import { asError, ErrorLike, isErrorLike } from '@sourcegraph/common'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { Alert, LoadingSpinner } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../auth'
@@ -26,7 +25,7 @@ import { eventLogger } from '../tracking/eventLogger'
 
 import { SavedQueryFields, SavedSearchForm } from './SavedSearchForm'
 
-interface Props extends NamespaceProps, ThemeProps {
+interface Props extends NamespaceProps {
     authenticatedUser: AuthenticatedUser | null
     isSourcegraphDotCom: boolean
     searchId: string
diff --git a/client/web/src/search/SearchConsolePage.tsx b/client/web/src/search/SearchConsolePage.tsx
index 50bca6e44293..5b6e117b069a 100644
--- a/client/web/src/search/SearchConsolePage.tsx
+++ b/client/web/src/search/SearchConsolePage.tsx
@@ -120,7 +120,6 @@ export const SearchConsolePage: React.FunctionComponent<React.PropsWithChildren<
                     <div className={styles.editor}>
                         <CodeMirrorQueryInput
                             className="d-flex flex-column overflow-hidden"
-                            isLightTheme={props.isLightTheme}
                             patternType={patternType}
                             interpretComments={true}
                             value={searchQuery.value}
diff --git a/client/web/src/search/home/SearchPage.story.tsx b/client/web/src/search/home/SearchPage.story.tsx
index eb3eb2440e9c..e13f2c90a7e2 100644
--- a/client/web/src/search/home/SearchPage.story.tsx
+++ b/client/web/src/search/home/SearchPage.story.tsx
@@ -6,15 +6,13 @@ import {
     mockGetUserSearchContextNamespaces,
 } from '@sourcegraph/shared/src/testing/searchContexts/testHelpers'
 import { extensionsController } from '@sourcegraph/shared/src/testing/searchTestHelpers'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 
 import { WebStory } from '../../components/WebStory'
 import { MockedFeatureFlagsProvider } from '../../featureFlags/MockedFeatureFlagsProvider'
-import { ThemePreference } from '../../theme'
 
 import { SearchPage, SearchPageProps } from './SearchPage'
 
-const defaultProps = (props: ThemeProps): SearchPageProps => ({
+const defaultProps: SearchPageProps = {
     isSourcegraphDotCom: false,
     settingsCascade: {
         final: null,
@@ -22,18 +20,15 @@ const defaultProps = (props: ThemeProps): SearchPageProps => ({
     },
     extensionsController,
     telemetryService: NOOP_TELEMETRY_SERVICE,
-    themePreference: ThemePreference.Light,
-    onThemePreferenceChange: () => undefined,
     authenticatedUser: null,
     globbing: false,
     platformContext: {} as any,
     searchContextsEnabled: true,
     selectedSearchContextSpec: '',
     setSelectedSearchContextSpec: () => {},
-    isLightTheme: props.isLightTheme,
     fetchSearchContexts: mockFetchSearchContexts,
     getUserSearchContextNamespaces: mockGetUserSearchContextNamespaces,
-})
+}
 
 window.context.allowSignup = true
 
@@ -50,20 +45,20 @@ const config: Meta = {
 
 export default config
 export const CloudAuthedHome: Story = () => (
-    <WebStory>{webProps => <SearchPage {...defaultProps(webProps)} isSourcegraphDotCom={true} />}</WebStory>
+    <WebStory>{() => <SearchPage {...defaultProps} isSourcegraphDotCom={true} />}</WebStory>
 )
 
 CloudAuthedHome.storyName = 'Cloud authenticated home'
 
-export const ServerHome: Story = () => <WebStory>{webProps => <SearchPage {...defaultProps(webProps)} />}</WebStory>
+export const ServerHome: Story = () => <WebStory>{() => <SearchPage {...defaultProps} />}</WebStory>
 
 ServerHome.storyName = 'Server home'
 
 export const CloudMarketingHome: Story = () => (
     <WebStory>
-        {webProps => (
+        {() => (
             <MockedFeatureFlagsProvider overrides={{}}>
-                <SearchPage {...defaultProps(webProps)} isSourcegraphDotCom={true} authenticatedUser={null} />
+                <SearchPage {...defaultProps} isSourcegraphDotCom={true} authenticatedUser={null} />
             </MockedFeatureFlagsProvider>
         )}
     </WebStory>
diff --git a/client/web/src/search/home/SearchPage.tsx b/client/web/src/search/home/SearchPage.tsx
index c757cb38f845..5fb6e430cb49 100644
--- a/client/web/src/search/home/SearchPage.tsx
+++ b/client/web/src/search/home/SearchPage.tsx
@@ -10,7 +10,7 @@ import { Settings } from '@sourcegraph/shared/src/schema/settings.schema'
 import { QueryState, SearchContextInputProps } from '@sourcegraph/shared/src/search'
 import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
+import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
 import { Icon, Link, Tooltip, useWindowSize, VIEWPORT_SM } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../../auth'
@@ -18,7 +18,6 @@ import { BrandLogo } from '../../components/branding/BrandLogo'
 import { CodeInsightsProps } from '../../insights/types'
 import { AddCodeHostWidget, useShouldShowAddCodeHostWidget } from '../../onboarding/AddCodeHostWidget'
 import { useExperimentalFeatures } from '../../stores'
-import { ThemePreferenceProps } from '../../theme'
 import { eventLogger } from '../../tracking/eventLogger'
 
 import { SearchPageFooter } from './SearchPageFooter'
@@ -28,8 +27,6 @@ import styles from './SearchPage.module.scss'
 
 export interface SearchPageProps
     extends SettingsCascadeProps<Settings>,
-        ThemeProps,
-        ThemePreferenceProps,
         TelemetryProps,
         ExtensionsControllerProps<'extHostAPI' | 'executeCommand'>,
         PlatformContextProps<'settings' | 'sourcegraphURL' | 'updateSettings' | 'requestGraphQL'>,
@@ -48,6 +45,7 @@ export interface SearchPageProps
  */
 export const SearchPage: React.FunctionComponent<React.PropsWithChildren<SearchPageProps>> = props => {
     const { width } = useWindowSize()
+    const isLightTheme = useIsLightTheme()
     const shouldShowAddCodeHostWidget = useShouldShowAddCodeHostWidget(props.authenticatedUser)
     const experimentalQueryInput = useExperimentalFeatures(features => features.searchQueryInput === 'experimental')
 
@@ -68,7 +66,7 @@ export const SearchPage: React.FunctionComponent<React.PropsWithChildren<SearchP
 
     return (
         <div className={classNames('d-flex flex-column align-items-center px-3', styles.searchPage)}>
-            <BrandLogo className={styles.logo} isLightTheme={props.isLightTheme} variant="logo" />
+            <BrandLogo className={styles.logo} isLightTheme={isLightTheme} variant="logo" />
             {props.isSourcegraphDotCom && (
                 <div className="d-sm-flex flex-row text-center">
                     <div className={classNames(width >= VIEWPORT_SM && 'border-right', 'text-muted mt-3 mr-sm-2 pr-2')}>
@@ -119,7 +117,7 @@ export const SearchPage: React.FunctionComponent<React.PropsWithChildren<SearchP
                 )}
             </div>
 
-            <SearchPageFooter {...props} />
+            <SearchPageFooter {...props} isLightTheme={isLightTheme} />
         </div>
     )
 }
diff --git a/client/web/src/search/home/SearchPageFooter.tsx b/client/web/src/search/home/SearchPageFooter.tsx
index 44e3d889682a..66bd216cc6ea 100644
--- a/client/web/src/search/home/SearchPageFooter.tsx
+++ b/client/web/src/search/home/SearchPageFooter.tsx
@@ -3,7 +3,6 @@ import React from 'react'
 import classNames from 'classnames'
 
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { Link, H2 } from '@sourcegraph/wildcard'
 
 import { BrandLogo } from '../../components/branding/BrandLogo'
@@ -55,9 +54,16 @@ const footerLinkSections: { name: string; links: { name: string; to: string; eve
     },
 ]
 
-export const SearchPageFooter: React.FunctionComponent<
-    React.PropsWithChildren<ThemeProps & TelemetryProps & { isSourcegraphDotCom: boolean }>
-> = ({ isLightTheme, telemetryService, isSourcegraphDotCom }) => {
+interface SearchPageFooterProps extends TelemetryProps {
+    isLightTheme: boolean
+    isSourcegraphDotCom: boolean
+}
+
+export const SearchPageFooter: React.FC<SearchPageFooterProps> = ({
+    isLightTheme,
+    telemetryService,
+    isSourcegraphDotCom,
+}) => {
     const logLinkClicked = (name: string): void => {
         telemetryService.log('HomepageFooterCTASelected', { name }, { name })
     }
diff --git a/client/web/src/search/home/SearchPageInput.tsx b/client/web/src/search/home/SearchPageInput.tsx
index a4255e94b516..317adb2c244e 100644
--- a/client/web/src/search/home/SearchPageInput.tsx
+++ b/client/web/src/search/home/SearchPageInput.tsx
@@ -23,7 +23,7 @@ import {
 } from '@sourcegraph/shared/src/search'
 import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
+import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
 import { Form } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../../auth'
@@ -35,7 +35,6 @@ import {
     setSearchPatternType,
     setSearchMode,
 } from '../../stores'
-import { ThemePreferenceProps } from '../../theme'
 import { submitSearch } from '../helpers'
 import { useLazyCreateSuggestions, useLazyHistoryExtension } from '../input/lazy'
 import { useRecentSearches } from '../input/useRecentSearches'
@@ -44,8 +43,6 @@ import styles from './SearchPageInput.module.scss'
 
 interface Props
     extends SettingsCascadeProps<Settings>,
-        ThemeProps,
-        ThemePreferenceProps,
         TelemetryProps,
         PlatformContextProps<'settings' | 'sourcegraphURL' | 'requestGraphQL'>,
         Pick<SubmitSearchParameters, 'source'>,
@@ -72,6 +69,7 @@ export const SearchPageInput: React.FunctionComponent<React.PropsWithChildren<Pr
     const location = useLocation()
     const navigate = useNavigate()
 
+    const isLightTheme = useIsLightTheme()
     const { caseSensitive, patternType, searchMode } = useNavbarQueryState(queryStateSelector, shallow)
     const experimentalQueryInput = useExperimentalFeatures(features => features.searchQueryInput === 'experimental')
     const applySuggestionsOnEnter =
@@ -163,7 +161,7 @@ export const SearchPageInput: React.FunctionComponent<React.PropsWithChildren<Pr
             queryState={props.queryState}
             onChange={props.setQueryState}
             onSubmit={onSubmit}
-            isLightTheme={props.isLightTheme}
+            isLightTheme={isLightTheme}
             placeholder="Search for code or files..."
             suggestionSource={suggestionSource}
             extensions={experimentalExtensions}
diff --git a/client/web/src/search/input/SearchNavbarItem.tsx b/client/web/src/search/input/SearchNavbarItem.tsx
index c50f90e686d4..0618cc8d3a07 100644
--- a/client/web/src/search/input/SearchNavbarItem.tsx
+++ b/client/web/src/search/input/SearchNavbarItem.tsx
@@ -11,7 +11,6 @@ import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
 import { SearchContextInputProps, SubmitSearchParameters } from '@sourcegraph/shared/src/search'
 import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { Form } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../../auth'
@@ -23,7 +22,6 @@ import { useRecentSearches } from './useRecentSearches'
 
 interface Props
     extends SettingsCascadeProps,
-        ThemeProps,
         SearchContextInputProps,
         TelemetryProps,
         PlatformContextProps<'requestGraphQL'> {
@@ -32,6 +30,7 @@ interface Props
     globbing: boolean
     isSearchAutoFocusRequired?: boolean
     isRepositoryRelatedPage?: boolean
+    isLightTheme: boolean
 }
 
 const selectQueryState = ({
diff --git a/client/web/src/search/results/StreamingSearchResults.story.tsx b/client/web/src/search/results/StreamingSearchResults.story.tsx
index b2cb1693a838..32fa13533b60 100644
--- a/client/web/src/search/results/StreamingSearchResults.story.tsx
+++ b/client/web/src/search/results/StreamingSearchResults.story.tsx
@@ -42,7 +42,6 @@ const defaultProps: StreamingSearchResultsProps = {
         username: 'alice',
         emails: [{ email: 'alice@email.test', isPrimary: true, verified: true }],
     } as AuthenticatedUser,
-    isLightTheme: true,
 
     settingsCascade: {
         subjects: null,
diff --git a/client/web/src/search/results/StreamingSearchResults.test.tsx b/client/web/src/search/results/StreamingSearchResults.test.tsx
index 8285a904cdfe..bfa4ac000b99 100644
--- a/client/web/src/search/results/StreamingSearchResults.test.tsx
+++ b/client/web/src/search/results/StreamingSearchResults.test.tsx
@@ -47,7 +47,6 @@ describe('StreamingSearchResults', () => {
         streamSearch: () => of(MULTIPLE_SEARCH_RESULT),
 
         fetchHighlightedFileLineRanges: HIGHLIGHTED_FILE_LINES_REQUEST,
-        isLightTheme: true,
         isSourcegraphDotCom: false,
         searchContextsEnabled: true,
         searchAggregationEnabled: false,
diff --git a/client/web/src/search/results/StreamingSearchResults.tsx b/client/web/src/search/results/StreamingSearchResults.tsx
index 53a073e330fc..90f1acdcb528 100644
--- a/client/web/src/search/results/StreamingSearchResults.tsx
+++ b/client/web/src/search/results/StreamingSearchResults.tsx
@@ -18,7 +18,6 @@ import { LATEST_VERSION, StreamSearchOptions } from '@sourcegraph/shared/src/sea
 import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
 import { useTemporarySetting } from '@sourcegraph/shared/src/settings/temporary/useTemporarySetting'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { useDeepMemo } from '@sourcegraph/wildcard'
 
 import { SearchAggregationProps, SearchStreamingProps } from '..'
@@ -51,7 +50,6 @@ export interface StreamingSearchResultsProps
         ExtensionsControllerProps<'executeCommand' | 'extHostAPI'>,
         PlatformContextProps<'settings' | 'requestGraphQL' | 'sourcegraphURL'>,
         TelemetryProps,
-        ThemeProps,
         CodeInsightsProps,
         SearchAggregationProps,
         CodeMonitoringProps {
diff --git a/client/web/src/settings/DynamicallyImportedMonacoSettingsEditor.tsx b/client/web/src/settings/DynamicallyImportedMonacoSettingsEditor.tsx
index 8cd44cecf285..9942f18dad63 100644
--- a/client/web/src/settings/DynamicallyImportedMonacoSettingsEditor.tsx
+++ b/client/web/src/settings/DynamicallyImportedMonacoSettingsEditor.tsx
@@ -5,7 +5,6 @@ import { Subscription } from 'rxjs'
 
 import { logger } from '@sourcegraph/common'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { LoadingSpinner, BeforeUnloadPrompt } from '@sourcegraph/wildcard'
 
 import { SaveToolbarProps, SaveToolbar, SaveToolbarPropsGenerator } from '../components/SaveToolbar'
@@ -20,9 +19,9 @@ const disposableToFunc = (disposable: _monaco.IDisposable) => () => disposable.d
 
 interface Props<T extends object>
     extends Pick<_monacoSettingsEditorModule.Props, 'id' | 'readOnly' | 'height' | 'jsonSchema' | 'language'>,
-        ThemeProps,
         TelemetryProps {
     value: string
+    isLightTheme: boolean
 
     actions?: EditorAction[]
 
diff --git a/client/web/src/settings/MonacoSettingsEditor.tsx b/client/web/src/settings/MonacoSettingsEditor.tsx
index 4b7e060fc081..5dcfb901247b 100644
--- a/client/web/src/settings/MonacoSettingsEditor.tsx
+++ b/client/web/src/settings/MonacoSettingsEditor.tsx
@@ -8,7 +8,6 @@ import { distinctUntilChanged, distinctUntilKeyChanged, map, startWith } from 'r
 
 import { MonacoEditor } from '@sourcegraph/shared/src/components/MonacoEditor'
 import { TelemetryService } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 
 import jsonSchemaMetaSchema from '../../../../schema/json-schema-draft-07.schema.json'
 import settingsSchema from '../../../../schema/settings.schema.json'
@@ -23,10 +22,11 @@ interface JSONSchema {
     $id: string
 }
 
-export interface Props extends ThemeProps {
+export interface Props {
     id?: string
     className?: string
     value: string | undefined
+    isLightTheme: boolean
     onChange?: (newValue: string) => void
     readOnly?: boolean | undefined
     height?: number
diff --git a/client/web/src/settings/SettingsArea.tsx b/client/web/src/settings/SettingsArea.tsx
index c8f23707deb4..5c73d77f9dce 100644
--- a/client/web/src/settings/SettingsArea.tsx
+++ b/client/web/src/settings/SettingsArea.tsx
@@ -13,7 +13,6 @@ import { Scalars } from '@sourcegraph/shared/src/graphql-operations'
 import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
 import { gqlToCascade, SettingsCascadeProps, SettingsSubject } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { LoadingSpinner, PageHeader, ErrorMessage } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../auth'
@@ -26,7 +25,7 @@ import { mergeSettingsSchemas } from './configuration'
 import { SettingsPage } from './SettingsPage'
 
 /** Props shared by SettingsArea and its sub-pages. */
-interface SettingsAreaPageCommonProps extends PlatformContextProps, SettingsCascadeProps, ThemeProps, TelemetryProps {
+interface SettingsAreaPageCommonProps extends PlatformContextProps, SettingsCascadeProps, TelemetryProps {
     /** The subject whose settings to edit. */
     subject: Pick<SettingsSubject, '__typename' | 'id'>
 
@@ -34,6 +33,8 @@ interface SettingsAreaPageCommonProps extends PlatformContextProps, SettingsCasc
      * The currently authenticated user, NOT (necessarily) the user who is the subject of the page.
      */
     authenticatedUser: AuthenticatedUser | null
+
+    isLightTheme: boolean
 }
 
 interface SettingsData {
diff --git a/client/web/src/settings/SettingsFile.tsx b/client/web/src/settings/SettingsFile.tsx
index 0446dd521779..827c335b9b02 100644
--- a/client/web/src/settings/SettingsFile.tsx
+++ b/client/web/src/settings/SettingsFile.tsx
@@ -5,7 +5,6 @@ import { Subject, Subscription } from 'rxjs'
 import { distinctUntilChanged, filter, map, startWith } from 'rxjs/operators'
 
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { LoadingSpinner, BeforeUnloadPrompt } from '@sourcegraph/wildcard'
 
 import settingsSchemaJSON from '../../../../schema/settings.schema.json'
@@ -15,7 +14,7 @@ import { eventLogger } from '../tracking/eventLogger'
 
 import styles from './SettingsFile.module.scss'
 
-interface Props extends ThemeProps, TelemetryProps {
+interface Props extends TelemetryProps {
     settings: SiteAdminSettingsCascadeFields['subjects'][number]['latestSettings'] | null
 
     /**
@@ -33,6 +32,8 @@ interface Props extends ThemeProps, TelemetryProps {
      * if any.
      */
     commitError?: Error
+
+    isLightTheme: boolean
 }
 
 interface State {
diff --git a/client/web/src/settings/SettingsPage.tsx b/client/web/src/settings/SettingsPage.tsx
index 1f73b1e6897a..033d48a94b15 100644
--- a/client/web/src/settings/SettingsPage.tsx
+++ b/client/web/src/settings/SettingsPage.tsx
@@ -3,15 +3,15 @@ import * as React from 'react'
 import { logger } from '@sourcegraph/common'
 import { overwriteSettings } from '@sourcegraph/shared/src/settings/edit'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { Container } from '@sourcegraph/wildcard'
 
 import { SettingsAreaPageProps } from './SettingsArea'
 import { SettingsFile } from './SettingsFile'
 
-interface Props extends SettingsAreaPageProps, ThemeProps, TelemetryProps {
+interface Props extends SettingsAreaPageProps, TelemetryProps {
     /** Optional description to render above the editor. */
     description?: JSX.Element
+    isLightTheme: boolean
 }
 
 interface State {
diff --git a/client/web/src/site-admin/SiteAdminArea.tsx b/client/web/src/site-admin/SiteAdminArea.tsx
index 220ae1961f05..ef0a35b0e1ed 100644
--- a/client/web/src/site-admin/SiteAdminArea.tsx
+++ b/client/web/src/site-admin/SiteAdminArea.tsx
@@ -41,7 +41,6 @@ export interface SiteAdminAreaRouteContext
         TelemetryProps {
     site: Pick<SiteSettingFields, '__typename' | 'id'>
     authenticatedUser: AuthenticatedUser
-    isLightTheme: boolean
     isSourcegraphDotCom: boolean
 
     /** This property is only used by {@link SiteAdminOverviewPage}. */
@@ -55,7 +54,6 @@ interface SiteAdminAreaProps extends PlatformContextProps, SettingsCascadeProps,
     sideBarGroups: SiteAdminSideBarGroups
     overviewComponents: readonly React.ComponentType<React.PropsWithChildren<unknown>>[]
     authenticatedUser: AuthenticatedUser
-    isLightTheme: boolean
     isSourcegraphDotCom: boolean
 }
 
@@ -72,7 +70,6 @@ const AuthenticatedSiteAdminArea: React.FunctionComponent<React.PropsWithChildre
         authenticatedUser: props.authenticatedUser,
         platformContext: props.platformContext,
         settingsCascade: props.settingsCascade,
-        isLightTheme: props.isLightTheme,
         isSourcegraphDotCom: props.isSourcegraphDotCom,
         batchChangesEnabled: props.batchChangesEnabled,
         batchChangesExecutionEnabled: props.batchChangesExecutionEnabled,
diff --git a/client/web/src/site-admin/SiteAdminConfigurationPage.tsx b/client/web/src/site-admin/SiteAdminConfigurationPage.tsx
index 3365efafa2bc..74fa7925c0d4 100644
--- a/client/web/src/site-admin/SiteAdminConfigurationPage.tsx
+++ b/client/web/src/site-admin/SiteAdminConfigurationPage.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { FC } from 'react'
 
 import classNames from 'classnames'
 import * as jsonc from 'jsonc-parser'
@@ -8,7 +9,7 @@ import { delay, mergeMap, retryWhen, tap, timeout } from 'rxjs/operators'
 import { logger } from '@sourcegraph/common'
 import { SiteConfiguration } from '@sourcegraph/shared/src/schema/site.schema'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
+import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
 import {
     Button,
     LoadingSpinner,
@@ -209,7 +210,9 @@ const quickConfigureActions: {
     },
 ]
 
-interface Props extends ThemeProps, TelemetryProps {}
+interface Props extends TelemetryProps {
+    isLightTheme: boolean
+}
 
 interface State {
     site?: SiteResult['site']
@@ -223,10 +226,14 @@ interface State {
 
 const EXPECTED_RELOAD_WAIT = 7 * 1000 // 7 seconds
 
+export const SiteAdminConfigurationPage: FC<TelemetryProps> = props => (
+    <SiteAdminConfigurationContent {...props} isLightTheme={useIsLightTheme()} />
+)
+
 /**
  * A page displaying the site configuration.
  */
-export class SiteAdminConfigurationPage extends React.Component<Props, State> {
+class SiteAdminConfigurationContent extends React.Component<Props, State> {
     public state: State = {
         loading: true,
         restartToApply: window.context.needServerRestart,
diff --git a/client/web/src/site-admin/SiteAdminExternalServicesArea.tsx b/client/web/src/site-admin/SiteAdminExternalServicesArea.tsx
index 18d3e209a689..3577f617dd86 100644
--- a/client/web/src/site-admin/SiteAdminExternalServicesArea.tsx
+++ b/client/web/src/site-admin/SiteAdminExternalServicesArea.tsx
@@ -8,7 +8,6 @@ import { AuthenticatedUser } from '@sourcegraph/shared/src/auth'
 import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
 import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { lazyComponent } from '@sourcegraph/shared/src/util/lazyComponent'
 import { LoadingSpinner, ErrorAlert } from '@sourcegraph/wildcard'
 
@@ -33,7 +32,7 @@ const AddExternalServicesPage = lazyComponent(
     'AddExternalServicesPage'
 )
 
-interface Props extends ThemeProps, TelemetryProps, PlatformContextProps, SettingsCascadeProps {
+interface Props extends TelemetryProps, PlatformContextProps, SettingsCascadeProps {
     authenticatedUser: AuthenticatedUser
 }
 
diff --git a/client/web/src/site-admin/SiteAdminPingsPage.tsx b/client/web/src/site-admin/SiteAdminPingsPage.tsx
index 16f503ec325a..d4a1ad157b88 100644
--- a/client/web/src/site-admin/SiteAdminPingsPage.tsx
+++ b/client/web/src/site-admin/SiteAdminPingsPage.tsx
@@ -15,18 +15,19 @@ import {
     defaultEditorTheme,
     jsonHighlighting,
 } from '@sourcegraph/shared/src/components/CodeMirrorEditor'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
+import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
 import { LoadingSpinner, H2, H3, Text, useObservable } from '@sourcegraph/wildcard'
 
 import { PageTitle } from '../components/PageTitle'
 import { eventLogger } from '../tracking/eventLogger'
 
-interface Props extends ThemeProps {}
+interface Props {}
 
 /**
  * A page displaying information about telemetry pings for the site.
  */
-export const SiteAdminPingsPage: React.FunctionComponent<React.PropsWithChildren<Props>> = ({ isLightTheme }) => {
+export const SiteAdminPingsPage: React.FunctionComponent<React.PropsWithChildren<Props>> = () => {
+    const isLightTheme = useIsLightTheme()
     const latestPing = useObservable(
         useMemo(() => fromFetch<{}>('/site-admin/pings/latest', { selector: response => checkOk(response).json() }), [])
     )
diff --git a/client/web/src/site-admin/SiteAdminReportBugPage.tsx b/client/web/src/site-admin/SiteAdminReportBugPage.tsx
index 6dc0b109b3e6..03ff8e608781 100644
--- a/client/web/src/site-admin/SiteAdminReportBugPage.tsx
+++ b/client/web/src/site-admin/SiteAdminReportBugPage.tsx
@@ -4,7 +4,7 @@ import { mapValues, values } from 'lodash'
 
 import { ExternalServiceKind } from '@sourcegraph/shared/src/graphql-operations'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
+import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
 import { LoadingSpinner, useObservable, Alert, Link, H2, Text } from '@sourcegraph/wildcard'
 
 import awsCodeCommitJSON from '../../../../schema/aws_codecommit.schema.json'
@@ -109,12 +109,12 @@ const allConfigSchema = {
         .reduce((allDefinitions, definitions) => ({ ...allDefinitions, ...definitions }), {}),
 }
 
-interface Props extends ThemeProps, TelemetryProps {}
+interface Props extends TelemetryProps {}
 
 export const SiteAdminReportBugPage: React.FunctionComponent<React.PropsWithChildren<Props>> = ({
-    isLightTheme,
     telemetryService,
 }) => {
+    const isLightTheme = useIsLightTheme()
     const allConfig = useObservable(useMemo(fetchAllConfigAndSettings, []))
     return (
         <div>
diff --git a/client/web/src/site-admin/SiteAdminSettingsPage.tsx b/client/web/src/site-admin/SiteAdminSettingsPage.tsx
index 56c7f2727504..587818caed6e 100644
--- a/client/web/src/site-admin/SiteAdminSettingsPage.tsx
+++ b/client/web/src/site-admin/SiteAdminSettingsPage.tsx
@@ -3,7 +3,7 @@ import * as React from 'react'
 import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
 import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
+import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
 import { Text } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../auth'
@@ -11,24 +11,29 @@ import { PageTitle } from '../components/PageTitle'
 import { SiteResult } from '../graphql-operations'
 import { SettingsArea } from '../settings/SettingsArea'
 
-interface Props extends PlatformContextProps, SettingsCascadeProps, ThemeProps, TelemetryProps {
+interface Props extends PlatformContextProps, SettingsCascadeProps, TelemetryProps {
     authenticatedUser: AuthenticatedUser
     site: Pick<SiteResult['site'], '__typename' | 'id'>
 }
 
-export const SiteAdminSettingsPage: React.FunctionComponent<React.PropsWithChildren<Props>> = props => (
-    <>
-        <PageTitle title="Global settings" />
-        <SettingsArea
-            {...props}
-            subject={props.site}
-            authenticatedUser={props.authenticatedUser}
-            extraHeader={
-                <Text>
-                    Global settings apply to all organizations and users. Settings for a user or organization override
-                    global settings.
-                </Text>
-            }
-        />
-    </>
-)
+export const SiteAdminSettingsPage: React.FunctionComponent<React.PropsWithChildren<Props>> = props => {
+    const isLightTheme = useIsLightTheme()
+
+    return (
+        <>
+            <PageTitle title="Global settings" />
+            <SettingsArea
+                {...props}
+                isLightTheme={isLightTheme}
+                subject={props.site}
+                authenticatedUser={props.authenticatedUser}
+                extraHeader={
+                    <Text>
+                        Global settings apply to all organizations and users. Settings for a user or organization
+                        override global settings.
+                    </Text>
+                }
+            />
+        </>
+    )
+}
diff --git a/client/web/src/site-admin/init/SiteInitPage.test.tsx b/client/web/src/site-admin/init/SiteInitPage.test.tsx
index 74a5242f6faf..7697824c30b7 100644
--- a/client/web/src/site-admin/init/SiteInitPage.test.tsx
+++ b/client/web/src/site-admin/init/SiteInitPage.test.tsx
@@ -16,7 +16,6 @@ describe('SiteInitPage', () => {
     test('site already initialized', () => {
         const result = renderWithBrandedContext(
             <SiteInitPage
-                isLightTheme={true}
                 needsSiteInit={false}
                 authenticatedUser={null}
                 context={{
@@ -36,7 +35,6 @@ describe('SiteInitPage', () => {
         expect(
             renderWithBrandedContext(
                 <SiteInitPage
-                    isLightTheme={true}
                     needsSiteInit={true}
                     authenticatedUser={{ username: 'alice' }}
                     context={{
@@ -53,7 +51,6 @@ describe('SiteInitPage', () => {
         expect(
             renderWithBrandedContext(
                 <SiteInitPage
-                    isLightTheme={true}
                     needsSiteInit={true}
                     authenticatedUser={null}
                     context={{
diff --git a/client/web/src/site-admin/init/SiteInitPage.tsx b/client/web/src/site-admin/init/SiteInitPage.tsx
index ce196cad1808..274c1a1b28e5 100644
--- a/client/web/src/site-admin/init/SiteInitPage.tsx
+++ b/client/web/src/site-admin/init/SiteInitPage.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import { Navigate } from 'react-router-dom'
 
 import { logger } from '@sourcegraph/common'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
+import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
 import { CardBody, Card, H2, Text } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../../auth'
@@ -43,7 +43,7 @@ const initSite = async (args: SignUpArguments): Promise<void> => {
     window.location.replace('/site-admin')
 }
 
-interface Props extends ThemeProps {
+interface Props {
     authenticatedUser: Pick<AuthenticatedUser, 'username'> | null
 
     /**
@@ -63,10 +63,11 @@ interface Props extends ThemeProps {
  */
 export const SiteInitPage: React.FunctionComponent<React.PropsWithChildren<Props>> = ({
     authenticatedUser,
-    isLightTheme,
     needsSiteInit = window.context.needsSiteInit,
     context,
 }) => {
+    const isLightTheme = useIsLightTheme()
+
     if (!needsSiteInit) {
         return <Navigate to={PageRoutes.Search} replace={true} />
     }
diff --git a/client/web/src/stores/index.ts b/client/web/src/stores/index.ts
index 87b89f7f4074..025596e7ebff 100644
--- a/client/web/src/stores/index.ts
+++ b/client/web/src/stores/index.ts
@@ -20,11 +20,13 @@ export {
     setSearchMode,
     buildSearchURLQueryFromQueryState,
 } from './navbarSearchQueryState'
+
 export {
     useExperimentalFeatures,
     getExperimentalFeatures,
     setExperimentalFeaturesFromSettings,
 } from './experimentalFeatures'
+
 export { useNotepadState, useNotepad } from './notepad'
 
 /**
diff --git a/client/web/src/theme.test.tsx b/client/web/src/theme.test.tsx
deleted file mode 100644
index 278594b4e6cb..000000000000
--- a/client/web/src/theme.test.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-// causes false positive on act()
-/* eslint-disable @typescript-eslint/no-floating-promises */
-import { renderHook, act } from '@testing-library/react'
-
-import { ThemePreference, useThemeProps } from './theme'
-
-// Don't test reacting to system-wide theme changes, for simplicity. This means that
-// observeSystemIsLightTheme's initial value will be used, but it will not monitor for subsequent
-// changes.
-jest.mock('@sourcegraph/wildcard', () => {
-    const actual = jest.requireActual('@sourcegraph/wildcard')
-
-    return {
-        ...actual,
-        useObservable: () => undefined,
-    }
-})
-
-const mockSystemTheme = (systemTheme: 'light' | 'dark') => {
-    window.matchMedia = query => {
-        if (query === '(prefers-color-scheme: dark)') {
-            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-            return { matches: systemTheme === 'dark' } as MediaQueryList
-        }
-        throw new Error('unexpected matchMedia query')
-    }
-}
-
-describe('useTheme()', () => {
-    describe('defaults to system', () => {
-        it('light', () => {
-            mockSystemTheme('light')
-
-            const { result } = renderHook(() => useThemeProps())
-
-            expect(result.current.isLightTheme).toBe(true)
-            expect(result.current.themePreference).toBe(ThemePreference.System)
-            expect(document.documentElement.classList).toContain('theme-light')
-            expect(document.documentElement.classList).not.toContain('theme-dark')
-            // Local storage item not set by default, will get set when the preference is changed
-            expect(localStorage).toHaveLength(0)
-        })
-
-        it('dark', () => {
-            mockSystemTheme('dark')
-
-            const { result } = renderHook(() => useThemeProps())
-
-            expect(result.current.isLightTheme).toBe(false)
-            expect(result.current.themePreference).toBe(ThemePreference.System)
-            expect(document.documentElement.classList).toContain('theme-dark')
-            expect(document.documentElement.classList).not.toContain('theme-light')
-            // Local storage item not set by default, will get set when the preference is changed
-            expect(localStorage).toHaveLength(0)
-        })
-    })
-
-    describe('respects theme preference', () => {
-        it('light', () => {
-            mockSystemTheme('dark')
-            const { result } = renderHook(() => useThemeProps())
-            act(() => result.current.onThemePreferenceChange(ThemePreference.Light))
-
-            expect(result.current.isLightTheme).toBe(true)
-            expect(result.current.themePreference).toBe(ThemePreference.Light)
-            expect(document.documentElement.classList).toContain('theme-light')
-            expect(document.documentElement.classList).not.toContain('theme-dark')
-            expect(JSON.parse(localStorage.getItem('temporarySettings') ?? '')).toEqual({
-                'user.themePreference': 'light',
-            })
-        })
-
-        it('dark', () => {
-            mockSystemTheme('light')
-            const { result } = renderHook(() => useThemeProps())
-            act(() => result.current.onThemePreferenceChange(ThemePreference.Dark))
-
-            expect(result.current.isLightTheme).toBe(false)
-            expect(result.current.themePreference).toBe(ThemePreference.Dark)
-            expect(document.documentElement.classList).toContain('theme-dark')
-            expect(document.documentElement.classList).not.toContain('theme-light')
-            expect(JSON.parse(localStorage.getItem('temporarySettings') ?? '')).toEqual({
-                'user.themePreference': 'dark',
-            })
-        })
-
-        it('system', () => {
-            mockSystemTheme('dark')
-            const { result } = renderHook(() => useThemeProps())
-            act(() => result.current.onThemePreferenceChange(ThemePreference.System))
-
-            expect(result.current.isLightTheme).toBe(false)
-            expect(result.current.themePreference).toBe(ThemePreference.System)
-            expect(document.documentElement.classList).toContain('theme-dark')
-            expect(document.documentElement.classList).not.toContain('theme-light')
-            expect(JSON.parse(localStorage.getItem('temporarySettings') ?? '')).toEqual({
-                'user.themePreference': 'system',
-            })
-        })
-    })
-
-    it('changes theme preference', () => {
-        mockSystemTheme('light')
-        const { result } = renderHook(() => useThemeProps())
-        expect(result.current.isLightTheme).toBe(true)
-        expect(result.current.themePreference).toBe(ThemePreference.System)
-
-        // Change to dark theme.
-        act(() => {
-            result.current.onThemePreferenceChange(ThemePreference.Dark)
-        })
-        expect(result.current.isLightTheme).toBe(false)
-        expect(result.current.themePreference).toBe(ThemePreference.Dark)
-        expect(document.documentElement.classList).toContain('theme-dark')
-        expect(document.documentElement.classList).not.toContain('theme-light')
-        expect(JSON.parse(localStorage.getItem('temporarySettings') ?? '')).toEqual({ 'user.themePreference': 'dark' })
-
-        // Change to system.
-        act(() => {
-            result.current.onThemePreferenceChange(ThemePreference.System)
-        })
-        expect(result.current.isLightTheme).toBe(true)
-        expect(result.current.themePreference).toBe(ThemePreference.System)
-        expect(document.documentElement.classList).toContain('theme-light')
-        expect(document.documentElement.classList).not.toContain('theme-dark')
-        expect(JSON.parse(localStorage.getItem('temporarySettings') ?? '')).toEqual({
-            'user.themePreference': 'system',
-        })
-    })
-})
diff --git a/client/web/src/theme.ts b/client/web/src/theme.ts
deleted file mode 100644
index c0c2f9316503..000000000000
--- a/client/web/src/theme.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-import { useMemo } from 'react'
-
-import { useTemporarySetting } from '@sourcegraph/shared/src/settings/temporary/useTemporarySetting'
-import { observeSystemIsLightTheme, ThemeProps } from '@sourcegraph/shared/src/theme'
-import { useObservable } from '@sourcegraph/wildcard'
-
-/**
- * The user preference for the theme.
- * These values are stored in temporary settings.
- */
-export enum ThemePreference {
-    Light = 'light',
-    Dark = 'dark',
-    System = 'system',
-}
-export interface ThemeState {
-    /**
-     * Parsed from temporary settings theme preference value.
-     */
-    themePreference: ThemePreference
-
-    /**
-     * Calculated theme preference. It value takes system preference
-     * value into account if parsed value is equal to 'system'
-     */
-    enhancedThemePreference: ThemePreference.Light | ThemePreference.Dark
-
-    setThemePreference: (theme: ThemePreference) => void
-}
-
-export const useTheme = (): ThemeState => {
-    // React to system-wide theme change.
-    const { observable: systemIsLightThemeObservable, initialValue: systemIsLightThemeInitialValue } = useMemo(
-        () => observeSystemIsLightTheme(window),
-        []
-    )
-    const systemIsLightTheme = useObservable(systemIsLightThemeObservable) ?? systemIsLightThemeInitialValue
-    const [storedThemePreference, setThemePreference] = useTemporarySetting(
-        'user.themePreference',
-        ThemePreference.System
-    )
-
-    const themePreference = readStoredThemePreference(storedThemePreference)
-
-    const enhancedThemePreference =
-        themePreference === ThemePreference.System
-            ? systemIsLightTheme
-                ? ThemePreference.Light
-                : ThemePreference.Dark
-            : themePreference
-
-    useMemo(() => {
-        const isLightTheme = enhancedThemePreference === ThemePreference.Light
-
-        document.documentElement.classList.toggle('theme-light', isLightTheme)
-        document.documentElement.classList.toggle('theme-dark', !isLightTheme)
-    }, [enhancedThemePreference])
-
-    return {
-        themePreference,
-        enhancedThemePreference,
-        setThemePreference,
-    }
-}
-
-/**
- * Props that can be extended by any component's Props which needs to manipulate the theme preferences.
- *
- * @deprecated Use useTheme hook instead to get theme preference state
- */
-export interface ThemePreferenceProps {
-    themePreference: ThemePreference
-    onThemePreferenceChange: (theme: ThemePreference) => void
-}
-
-/**
- * A React hook for getting and setting the theme.
- *
- * @deprecated Use useTheme hook instead to get theme preference state
- */
-export const useThemeProps = (): ThemeProps & ThemePreferenceProps => {
-    const { themePreference, enhancedThemePreference, setThemePreference } = useTheme()
-    const isLightTheme = enhancedThemePreference === ThemePreference.Light
-
-    return {
-        isLightTheme,
-        themePreference,
-        onThemePreferenceChange: setThemePreference,
-    }
-}
-
-/** Reads the stored theme preference from temporary settings */
-export const readStoredThemePreference = (value?: string): ThemePreference => {
-    // Handle both old and new preference values
-    switch (value) {
-        case 'true':
-        case 'light':
-            return ThemePreference.Light
-        case 'false':
-        case 'dark':
-            return ThemePreference.Dark
-        default:
-            return ThemePreference.System
-    }
-}
diff --git a/client/web/src/user/UserAvatar.tsx b/client/web/src/user/UserAvatar.tsx
index b4c44d378d09..0252d6a4ce82 100644
--- a/client/web/src/user/UserAvatar.tsx
+++ b/client/web/src/user/UserAvatar.tsx
@@ -15,7 +15,6 @@ interface Props {
         username?: Maybe<string>
     }
     className?: string
-    targetID?: string
     alt?: string
     /**
      * Whether to render with icon-inline className
@@ -23,17 +22,12 @@ interface Props {
     inline?: boolean
 }
 
-/**
- * UserAvatar displays the avatar of a user.
- */
-// eslint-disable-next-line react/display-name
 export const UserAvatar = React.forwardRef(
     (
         {
             size,
             user,
             className,
-            targetID,
             inline,
             // Exclude children since neither <img /> nor mdi-react icons receive them
             children,
@@ -56,7 +50,6 @@ export const UserAvatar = React.forwardRef(
             const imgProps = {
                 className: classNames(styles.userAvatar, className),
                 src: url,
-                id: targetID,
                 role: 'presentation',
                 ...otherProps,
             }
@@ -86,7 +79,6 @@ export const UserAvatar = React.forwardRef(
         }
 
         const props = {
-            id: targetID,
             className: classNames(styles.userAvatar, className),
             children: <span className={styles.initials}>{getInitials(name)}</span>,
         }
diff --git a/client/web/src/user/area/UserArea.tsx b/client/web/src/user/area/UserArea.tsx
index 9c914adff109..dd594494e6a1 100644
--- a/client/web/src/user/area/UserArea.tsx
+++ b/client/web/src/user/area/UserArea.tsx
@@ -6,7 +6,6 @@ import { gql, useQuery } from '@sourcegraph/http-client'
 import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
 import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { LoadingSpinner } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../../auth'
@@ -68,7 +67,6 @@ export interface UserAreaRoute extends RouteV6Descriptor<UserAreaRouteContext> {
 interface UserAreaProps
     extends PlatformContextProps,
         SettingsCascadeProps,
-        ThemeProps,
         TelemetryProps,
         BreadcrumbsProps,
         BreadcrumbSetters,
@@ -93,7 +91,6 @@ interface UserAreaProps
 export interface UserAreaRouteContext
     extends PlatformContextProps,
         SettingsCascadeProps,
-        ThemeProps,
         TelemetryProps,
         NamespaceProps,
         BreadcrumbsProps,
diff --git a/client/web/src/user/settings/UserSettingsArea.tsx b/client/web/src/user/settings/UserSettingsArea.tsx
index 9f77a4f82fe0..eba8467c8893 100644
--- a/client/web/src/user/settings/UserSettingsArea.tsx
+++ b/client/web/src/user/settings/UserSettingsArea.tsx
@@ -6,7 +6,6 @@ import { Route, Routes, useLocation } from 'react-router-dom'
 
 import { gql, useQuery } from '@sourcegraph/http-client'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { ThemeProps } from '@sourcegraph/shared/src/theme'
 import { LoadingSpinner } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../../auth'
@@ -30,7 +29,7 @@ import styles from './UserSettingsArea.module.scss'
 
 export interface UserSettingsAreaRoute extends RouteV6Descriptor<UserSettingsAreaRouteContext> {}
 
-export interface UserSettingsAreaProps extends UserAreaRouteContext, ThemeProps, TelemetryProps {
+export interface UserSettingsAreaProps extends UserAreaRouteContext, TelemetryProps {
     authenticatedUser: AuthenticatedUser
     sideBarItems: UserSettingsSidebarItems
     routes: readonly UserSettingsAreaRoute[]
diff --git a/client/web/src/user/settings/routes.tsx b/client/web/src/user/settings/routes.tsx
index bdf9073059ed..848678e31fd9 100644
--- a/client/web/src/user/settings/routes.tsx
+++ b/client/web/src/user/settings/routes.tsx
@@ -1,8 +1,16 @@
+import { FC } from 'react'
+
 import { Navigate } from 'react-router-dom'
 
+import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
+import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
+import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
+import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
 import { lazyComponent } from '@sourcegraph/shared/src/util/lazyComponent'
 import { Text } from '@sourcegraph/wildcard'
 
+import { AuthenticatedUser } from '../../auth'
+import { UserSettingsAreaUserFields } from '../../graphql-operations'
 import { SiteAdminAlert } from '../../site-admin/SiteAdminAlert'
 
 import { UserSettingsAreaRoute } from './UserSettingsArea'
@@ -17,32 +25,7 @@ const UserSettingsSecurityPage = lazyComponent(
 export const userSettingsAreaRoutes: readonly UserSettingsAreaRoute[] = [
     {
         path: '',
-        render: props => {
-            if (props.isSourcegraphDotCom && props.authenticatedUser && props.user.id !== props.authenticatedUser.id) {
-                return (
-                    <SiteAdminAlert className="sidebar__alert" variant="danger">
-                        Only the user may access their individual settings.
-                    </SiteAdminAlert>
-                )
-            }
-            return (
-                <SettingsArea
-                    {...props}
-                    subject={props.user}
-                    isLightTheme={props.isLightTheme}
-                    extraHeader={
-                        <>
-                            {props.authenticatedUser && props.user.id !== props.authenticatedUser.id && (
-                                <SiteAdminAlert className="sidebar__alert">
-                                    Viewing settings for <strong>{props.user.username}</strong>
-                                </SiteAdminAlert>
-                            )}
-                            <Text>User settings override global and organization settings.</Text>
-                        </>
-                    }
-                />
-            )
-        },
+        render: props => <UserSettingAreaIndexPage {...props} />,
     },
     {
         path: 'profile',
@@ -76,3 +59,41 @@ export const userSettingsAreaRoutes: readonly UserSettingsAreaRoute[] = [
         render: lazyComponent(() => import('./aboutOrganization/AboutOrganizationPage'), 'AboutOrganizationPage'),
     },
 ]
+
+interface UserSettingAreaIndexPageProps extends PlatformContextProps, SettingsCascadeProps, TelemetryProps {
+    isSourcegraphDotCom: boolean
+    authenticatedUser: AuthenticatedUser
+    user: UserSettingsAreaUserFields
+    extraHeader?: JSX.Element
+    className?: string
+}
+
+const UserSettingAreaIndexPage: FC<UserSettingAreaIndexPageProps> = props => {
+    const { isSourcegraphDotCom, authenticatedUser, user } = props
+    const isLightTheme = useIsLightTheme()
+
+    if (isSourcegraphDotCom && authenticatedUser && user.id !== authenticatedUser.id) {
+        return (
+            <SiteAdminAlert className="sidebar__alert" variant="danger">
+                Only the user may access their individual settings.
+            </SiteAdminAlert>
+        )
+    }
+    return (
+        <SettingsArea
+            {...props}
+            subject={props.user}
+            isLightTheme={isLightTheme}
+            extraHeader={
+                <>
+                    {authenticatedUser && user.id !== authenticatedUser.id && (
+                        <SiteAdminAlert className="sidebar__alert">
+                            Viewing settings for <strong>{user.username}</strong>
+                        </SiteAdminAlert>
+                    )}
+                    <Text>User settings override global and organization settings.</Text>
+                </>
+            }
+        />
+    )
+}
diff --git a/client/wildcard/src/stories/BrandedStory.tsx b/client/wildcard/src/stories/BrandedStory.tsx
index 2a8d7cda3e55..b47cacb21ac6 100644
--- a/client/wildcard/src/stories/BrandedStory.tsx
+++ b/client/wildcard/src/stories/BrandedStory.tsx
@@ -2,9 +2,9 @@ import React from 'react'
 
 import { MemoryRouter, MemoryRouterProps } from 'react-router-dom'
 
-import { WildcardThemeContext } from '../hooks/useWildcardTheme'
+import { WildcardThemeContext } from '../hooks'
 
-import { usePrependStyles, useTheme } from './hooks'
+import { usePrependStyles, useStorybookTheme } from './hooks'
 
 import brandedStyles from '../global-styles/index.scss'
 
@@ -26,7 +26,7 @@ export const BrandedStory: React.FunctionComponent<BrandedProps> = ({
     styles = brandedStyles,
     ...memoryRouterProps
 }) => {
-    const isLightTheme = useTheme()
+    const isLightTheme = useStorybookTheme()
     usePrependStyles('branded-story-styles', styles)
 
     return (
diff --git a/client/wildcard/src/stories/hooks/index.ts b/client/wildcard/src/stories/hooks/index.ts
index 2d08529578fd..f7e9593f1fb4 100644
--- a/client/wildcard/src/stories/hooks/index.ts
+++ b/client/wildcard/src/stories/hooks/index.ts
@@ -1,3 +1,3 @@
 export * from './useChromaticTheme'
 export * from './usePrependStyles'
-export * from './useTheme'
+export * from './useStorybookTheme'
diff --git a/client/wildcard/src/stories/hooks/useTheme.ts b/client/wildcard/src/stories/hooks/useStorybookTheme.ts
similarity index 94%
rename from client/wildcard/src/stories/hooks/useTheme.ts
rename to client/wildcard/src/stories/hooks/useStorybookTheme.ts
index fb267d676a44..1805d7890ae3 100644
--- a/client/wildcard/src/stories/hooks/useTheme.ts
+++ b/client/wildcard/src/stories/hooks/useStorybookTheme.ts
@@ -13,7 +13,7 @@ const useDarkMode = isChromatic() ? useChromaticDarkMode : useRegularDarkMode
  *
  * @returns isLightTheme: boolean that is true if the light theme is enabled
  */
-export const useTheme = (): boolean => {
+export const useStorybookTheme = (): boolean => {
     const isDarkMode = useDarkMode()
     const [isLightTheme, setIsLightTheme] = useState(!isDarkMode)
 
diff --git a/client/wildcard/src/stories/index.ts b/client/wildcard/src/stories/index.ts
index 9240734ce20d..85ce2fb19a52 100644
--- a/client/wildcard/src/stories/index.ts
+++ b/client/wildcard/src/stories/index.ts
@@ -2,4 +2,4 @@ export * from './BrandedStory'
 export * from './utils/isChromatic'
 export * from './hooks/useChromaticTheme'
 export * from './hooks/usePrependStyles'
-export * from './hooks/useTheme'
+export * from './hooks/useStorybookTheme'