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],
}
};