react和vue设主题色

import React, { useState } from 'react';

interface IThemeProps {
  [key: string]: {
    color: string;
    background: string;
  }
}

// 主题色
const themes: IThemeProps = {
  'light': {
    color: '#000',
    background: '#eee'
  },
  'dark': {
    color: '#fff',
    background: '#222'
  }
}

export const ThemeContext = React.createContext(themes.dark)

function App() {
  return (
    <div className="App">
      <ThemeContext.Provider value={themes.light}>
          <Hello />
      </ThemeContext.Provider>
    </div>
  );
}

import React, { useContext } from 'react'
import { ThemeContext } from '../../app/App'

interface IProps {
  message?: string;
}

const Hello: React.FC<IProps> = (props) => {
  const theme = useContext(ThemeContext)
  const style = {
    background: theme.background,
    color: theme.color
  }

  return <h2 style={style}>{props.message}</h2>
}

Hello.defaultProps = {
  message: 'hello world'
}

export default Hello

import { couputed, defineComponent, PropType, provide } from "vue"

const THEME_PROVIDER_KEY = Symbol()

interface Theme {
}

const ThemeProvider defineComponent({
    name: 'ThemeProvider',
    props: {
        theme: {
            type: Object as PropType<Theme>,
            require: true
        }
    },
    setup(props, { slots }) {
        const context = computed(() => props.theme)
        provide(THEME_PROVIDER_KEY, context)
        
        return () => slots.default && slots.default()
    }
})

export function getWidget(name: String) {
    const context: ComputedRef<Theme> | undefined = inject<ComputedRef<Theme>>(
        THEME_PROVIDER_KEY,
    )
    
    if(!context) {
        throw new Error('theme required')
    }
        
    const widgetRef = computed(() => {
        return (context.value.widgets as any)[name]
    })
    
    return widgetRef
}

export default ThemeProvider

<ThemeProvider theme={themeDefault as any}>
    <Form />
</ThemeProvider>