old.Basic theme

This is a short explanation of how to make a theme.

Prerequisites:

• Graviton v1.1.0+

First, create your theme's folder in the .graviton/plugins directory. It might look like:

Note: The plugin folder should be called as the theme.

/.graviton  
│
└───/plugins
|   |
|   └───/myTheme
|   
└───/plugins_db
|   config.json
|   log.json

Now, move inside your theme and create a file, like:

/myTheme
|   
|   package.json

Inside package.json paste this:

{
   "name":"myTheme",
   "version":"0.0.1",
   "author":"An hero",
   "description":"A cool theme!",
   "highlight" : "default",
   "css":[],
   "colors": {
    "primaryColor": "#222222",
    "secondaryColor": "#171717",
    "accentColor":"#FF0048",
    "accentLightColor":"#FE3D78",
    "accentDarkColor":"#C8002F",
    "editor-background-color": "#191919",
    "white-black": "white",
    "black-white": "white",
    "widget-color": "#3B3B3B",
    "buttons-roundness":"4px",
    "dropmenu-background-color": "#2E2E2E",
    "dropmenu-span-color": "#818181",
    "titleBar-icons-color":"white",
    "window-radius":"8px",
    "window-border-color":"#2E2E2E",
    "notifications-background-color":"#474747",
    "notifications-window-radius":"5px",
    "shadows":"rgba(0,0,0,0.30)",
    "scalation":"0.98",
    "scroll-color":"rgba(255,255,255,0.2)",
    "scroll-color-hover":"rgba(255,255,255,0.5)"
  }
}   

The colors property contains all the CSS variables.

If you want to override the default CSS values, you can create a file in your theme directory, like:

/myTheme
|   
|   package.json
|   main.css

And then add it to the CSS property array in package.json:

"css":["main.css"],

Also add :

"type":"custom_theme",

And then start typing your code 🚀