Writing your module

Writing your module

Theme

Now it's time to set the data of your theme: you have just to modify theme.json and add a background picture in your folder !

• Firstly, add a background image for your theme in the folder (or create a folder in the module folder with any name you want and add your background in it): you have the choice for the name and the resolution of your background - JPG or PNG files type are recommended -

• And then, add this content in the "theme.json" file and modify it:

{
  "BackgroundImagePath": "background_theme.jpg",

  "MainColor": {
    "R": 80,
    "G": 80,
    "B": 80,
    "A": 200
  },
  "MainColorFont": {
    "R": 255,
    "G": 255,
    "B": 255,
    "A": 255
  },
  "SecondaryColor": {
    "R": 46,
    "G": 46,
    "B": 46,
    "A": 255
  },
  "SecondaryColorFont": {
    "R": 200,
    "G": 200,
    "B": 200,
    "A": 255
  },
  "ToolbarColor": {
    "R": 62,
    "G": 33,
    "B": 89,
    "A": 40
  },
  "ToolbarColorFont": {
    "R": 255,
    "G": 255,
    "B": 255,
    "A": 230
  },
  "ToolbarRoundButtonColor": {
    "R": 255,
    "G": 255,
    "B": 255,
    "A": 230
  },
  "ToolbarRoundButtonColorFont": {
    "R": 62,
    "G": 33,
    "B": 89,
    "A": 250
  },
  "AddonDefaultColor": {
    "R": 255,
    "G": 255,
    "B": 255,
    "A": 1
  },
  "AddonDefaultFontColor": {
    "R": 255,
    "G": 255,
    "B": 255,
    "A": 1
  },
  "RoundNotificationColor": {
    "R": 255,
    "G": 255,
    "B": 255,
    "A": 1
  }
}

BackgroundImagePath: path of your background image (for this example, it's "background_theme.jpg" because the image is in the root of the theme folder)

R (color parameter): red color in RGBA

G (color parameter): green color in RGBA

B (color parameter): blue color in RGBA

A (color parameter): alpha (transparency) color in RGBA

• After that, you gonna create your module package for install your theme in Serris !

Addon

Now it's time to add the files (JavaScript, HTML pages etc...) of your addon and write the main.js !