Remove ThemeProps and add new theme state logic

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,

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[][]>
 }

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(), [])
 

client/branded/src/search-ui/input/QueryInput.ts

@@ -5,16 +5,14 @@ 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'
 
 /**
  * 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

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,48 +56,34 @@ 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>
                 <div className="w-100 d-flex my-2">
                     <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"
                     />

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}

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,

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}

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)

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

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,

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,18 +451,14 @@ 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)
 
         constructor(props: {}) {
             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}