Color Customization

You can customize the colors using config file. Here, the examples are focused on light mode. If you want to customize dark mode too, you can.

Navy Variant

• demo Gif
• demo Img

color:
    textColor: "#F5F5F5"
    secondaryTextColor: "#F5F5F5"
    backgroundColor: "#313552"
    primaryColor: "#F1E0AC"
    secondaryColor: "#30475E"

Blue Variant

• demo Gif
• demo Img

color:
    textColor: "#2C3333"
    secondaryTextColor: "#F5F5F5"
    backgroundColor: "#54BAB9"
    primaryColor: "#F0F0F0"
    secondaryColor: "#78C2C3"

Red Variant

• demo Gif
• demo Img

color:
    textColor: "#121212"
    secondaryTextColor: "#311D3F"
    backgroundColor: "#FF6363"
    primaryColor: "#30475E"
    secondaryColor: "#F05454"

Green Variant

• demo Gif
• demo Img

color:
    textColor: "#161616"
    secondaryTextColor: "#311D3F"
    backgroundColor: "#34BE82" 
    primaryColor: "#194350"
    secondaryColor: "#2FDD92"

Pink Variant

• demo Gif
• demo Img

color:
    textColor: "#D1D1D1"
    secondaryTextColor: "#C1A3A3"
    backgroundColor: "#470D21"
    primaryColor: "#F3F0D7"
    secondaryColor: "#781D42"

General format

You can use your own color preference

color:
  textColor: <value>
  secondaryTextColor: <value>
  backgroundColor: <value>
  secondaryBackgroundColor: <value> 
  primaryColor: <value>
  secondaryColor: <value>

  darkmode:
    textColor: <value>
    secondaryTextColor: <value>
    backgroundColor: <value>
    secondaryBackgroundColor: <value>
    primaryColor: <value>
    secondaryColor: <value>