refactor(devtools): move default theme to theme file, fix types (TanStack#2213)

Author: DamianOsipiuk

src/devtools/devtools.tsx

@@ -17,7 +17,7 @@ import {
   Select,
   ActiveQueryPanel,
 } from './styledComponents'
-import { ThemeProvider } from './theme'
+import { ThemeProvider, defaultTheme as theme } from './theme'
 import { getQueryStatusLabel, getQueryStatusColor } from './utils'
 import Explorer from './Explorer'
 import Logo from './Logo'
@@ -74,20 +74,6 @@ interface DevtoolsPanelOptions {
 
 const isServer = typeof window === 'undefined'
 
-const theme = {
-  background: '#0b1521',
-  backgroundAlt: '#132337',
-  foreground: 'white',
-  gray: '#3f4e60',
-  grayAlt: '#222e3e',
-  inputBackgroundColor: '#fff',
-  inputTextColor: '#000',
-  success: '#00ab52',
-  danger: '#ff0085',
-  active: '#006bff',
-  warning: '#ffb200',
-}
-
 export function ReactQueryDevtools({
   initialIsOpen,
   panelProps = {},

src/devtools/theme.tsx

@@ -1,10 +1,26 @@
-// @ts-nocheck
-
 import React from 'react'
 
-const ThemeContext = React.createContext()
+export const defaultTheme = {
+  background: '#0b1521',
+  backgroundAlt: '#132337',
+  foreground: 'white',
+  gray: '#3f4e60',
+  grayAlt: '#222e3e',
+  inputBackgroundColor: '#fff',
+  inputTextColor: '#000',
+  success: '#00ab52',
+  danger: '#ff0085',
+  active: '#006bff',
+  warning: '#ffb200',
+}
+
+interface ProviderProps {
+  theme: typeof defaultTheme
+}
+
+const ThemeContext = React.createContext(defaultTheme)
 
-export function ThemeProvider({ theme, ...rest }) {
+export function ThemeProvider({ theme, ...rest }: ProviderProps) {
   return <ThemeContext.Provider value={theme} {...rest} />
 }