wmt-theme

typescript theme module

Usage no npm install needed!

<script type="module">
  import wmtTheme from 'https://cdn.skypack.dev/wmt-theme';
</script>

README

wmt-theme

This project is used to implement themes into your application.

Setting up the module

  • git clone git@bitbucket.org:wmtp/wmt-theme.git
  • cd wmt-theme
  • npm install

Building the module

The module uses Typescript compiler (TSC) to compile the source code. To build the project run the following command:

  • npm run build

Installing the module for testing

You can install the module into your own React project as a dependency. After you clone the module you can install using the following command:

  • npm install /absolute/path/to/wmt-theme
  • i.e. -> npm install /Users/wmt/Documents/projects/npm/wmt-theme

Installing the module from npm

Use the following command to install from npm:

  • npm install wmt-theme

Importing the module

Once you have the module installed you can import exported functions into your code like so:

import { DHA, DHAdark, custom } from "wmt-theme";

Using the module

Example of using the module:

//create a custom theme
//The custom method allows you create your own theme
//Parameters:(primary,secondary,darkTheme)
theme = custom("#EC407A", "#FFCA28", true);
//implementing the theme
class App extends Component {
    theme = custom("#EC407A", "#FFCA28", true);
    render() {
        return (
            <div className="App">
                <MuiThemeProvider
                    theme={createMuiTheme(this.theme as ThemeOptions)}>
                    <Provider store={store}>
                        <HashRouter>
                            {routes}
                        </HashRouter>
                    </Provider>
                </MuiThemeProvider>
            </div>
        );
    }
}

Testing

  • Tests can be ran with the npm test command.
  • Tests are ran using Jest - More information about getting started with Jest can be found here.

Viewing API docs

Here you can find the API docs that detail all functions of this module: https://wmtp.bitbucket.io/TypescriptModules/docs/wmt-theme/docs

Viewing source code

https://bitbucket.org/wmtp/wmt-theme

Published module

Here is where the module is currently published: https://www.npmjs.com/package/wmt-theme

License

This project is licensed under the MIT License.