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