Skip to main content

Multi Theming

Morfeo natively support multi-theming, to add a new theme just call the method setTheme of morfeo:

import { morfeo } from "@morfeo/core";
import { lightTheme, darkTheme, anotherTheme, ... } from "./themes";

morfeo.setTheme("light", lightTheme);
morfeo.setTheme("dark", darkTheme);
morfeo.setTheme("another", anotherTheme);
// ... You can add as many themes as you want

The first parameter is the name of the new theme and must be unique, the second parameter is the theme object.

After the themes are added, you can easily change the current theme by calling the methodd usetTheme:

import { morfeo } from '@morfeo/core';

morfeo.setCurrentTheme('light');

console.log(morfeo.getCurrentTheme()); // light;

const style = morfeo.resolve({ color: 'background' }); // {color: "#ffffff"};

morfeo.setCurrentTheme('dark');

console.log(morfeo.getCurrentTheme()); // dark;

const style = morfeo.resolve({ color: 'background' }); // {color: "#000000"};

Typescript

If you're using typescript you'll need to add your custom theme names by augmenting the interfaces Themes:

morfeo.d.ts
declare module '@morfeo/core' {
export interface Themes {
yourCustomTheme: Theme;
anotherCustomTheme: Theme;
}
}

multi-theming