Skip to main content
Version: 1.0.161

Theme

Nano framework has inbuilt theme module, it helps you load your themes right away.

How to use theme module ?:

First create your themes list in nano.config.js like below. You can create as many themes as you like.

nano.config.js
const lightTheme = {
name: "light",
isDark: false,
colors: {
primary: "blue",
secondary: "#800460",
background: "#e0f4f4"
}
};


const darkTheme = {
name: "dark",
isDark: true,
colors: {
primary: "black",
secondary: "yellow",
background: "gray"
},
};

export const THEMES = [lightTheme, darkTheme];

Here is an example how you can use the theme colors in your code.


const button = {
component: NANO.BUTTON,
value: 'Button',
props: {
width: 100,
buttonColor: 'primary', // blue in light and black in dark
textColor: 'secondary', // #800460 in light and yellow in dark
}
};

And below is the code to switch betweens themes using setTheme. And read theme details using theme and isDark methods from theme module.

const buttonPress = {
component: NANO.BUTTON,
value: 'CLICK ME',
onPress: ({ moduleParams }) => {

// set theme
moduleParams["theme"].setTheme("light")

// theme Value
const theme = moduleParams["theme"].theme

// find if the current theme is dark
const isDark = moduleParams["theme"].isDark

}
};

const screen = {
name: 'HomeScreen',
screen: {
h1: [buttonPress],
}
};