Creating themes

官方的demo是ts版本，下列react ts 版本为例。

$ yarn create react-app my-app --typescript
安装主题依赖yarn add@atlaskit/theme

创建CreateTheme.tsx文件

//atlaskit/theme
//1.theme.provider
//2.theme.consumer
import React from 'react';
import color from 'color';
import { createTheme } from '@atlaskit/theme';
console.log(color);
type ThemeProps = any;
interface ThemeTokens {
    backgroundColor?: string;
    textColor?: string;
}

const DisplayThemeColors = () => (
    
        {(tokens: Record) =>
            Object.keys(tokens).map(k => (
            
            {k}
            
            ))
        }
    
);

const Theme = createTheme(() => ({
    backgroundColor: '#333',
    textColor: '#eee',
}));
export default () => (
    
        
         ({ ...t({}), backgroundColor: '#cde4cb' })}
        >
            
        
    
);

注意：在react-app-evn.d.ts 文件添加declare module 'color';,否则ts 编译会报错。

运行结果

CreateCompontTheme

创建CreateCompontTheme文件

// @flow
import React, { Component } from 'react';
import { createTheme, ThemeProp } from '@atlaskit/theme';

interface LocalThemeProps {
    hover: boolean;
}

interface ThemeTokens {
    backgroundColor: string;
    textColor: string;
}

const defaultButtonTheme = (props: LocalThemeProps) => ({
    backgroundColor: props.hover ? '#ddd' : '#eee',
    textColor: '#333',
});

const contextButtonTheme: ThemeProp = (
    theme,
    props,
) => {
    return {
        ...theme(props),
        backgroundColor: props.hover ? 'rebeccapurple' : 'palevioletred',
        textColor: props.hover ? '#fff' : 'papayawhip',
    };
};

const propButtonTheme: ThemeProp = (
    theme,
    props,
) => {
    return {
        ...theme(props),
        backgroundColor: props.hover ? 'palevioletred' : 'rebeccapurple',
    };
};

const Theme = createTheme(defaultButtonTheme);

interface Props {
    children?: React.ReactNode;
    theme?: ThemeProp;
}

interface State {
    hover: boolean;
}

class Button extends Component {
    state = {
        hover: false,
    };

    onMouseEnter = () => this.setState({ hover: true });

    onMouseLeave = () => this.setState({ hover: false });

    render() {
        return (
            
                
                    {tokens => {
                        const { backgroundColor, textColor: color } = tokens;
                        return (
                            
                        );
                    }}
                
            
        );
    }
}

export default () => (
    <>
        
        
            
            
        
    
);

在App.js使用组件
效果

AtlaskitThemeProvider

非ts下必须安装styled-components并且启用flow,否则报错

创建ThemeProvider文件

// @flow
import React, { Component } from 'react';
import Button from '@atlaskit/button';
import { AtlaskitThemeProvider } from '@atlaskit/theme';

interface Props {}
type State = { themeMode: 'light' | 'dark' };

export default class extends Component {
    state: State = { themeMode: 'light' };

    switchTheme = () => {
        const { themeMode } = this.state;
        this.setState({
            themeMode: themeMode === 'light' ? 'dark' : 'light',
        });
    };

    render() {
        const { themeMode } = this.state;
        return (
            
                
                    
                    This is the old theming API
                
            
        );
    }
}

运行结果

略懂react，可以自己更改state查看效果。

ResetTheme

写ResetTheme.js文件

//@flow
import { Reset, ResetTheme } from '@atlaskit/theme';

 (

            { ...t({}), backgroundColor: '#fffbe5', textColor: '#000' })}
>
    

        You can also theme a reset.