Theme Guide

Abrahim edited this page Jan 15, 2018 · 6 revisions

Overview . . . . . . comments

  1. Theme file structure
    1. color section
    2. fonts section
    3. style section
  2. Creating your own themes
  3. Loading a theme + Setting

File Structure

Theme-files have 3 main entry points. These primary points are colors, fonts, and styles. Colors and Fonts are used for variable reference and styles are where the guts of the theme-system are.

NOTE: There is one other entry point but is simply an extends field. Use it to derive a theme from another, for example "extends":"default" for extending the default theme.

Color section

Colors are values you store under a global name. Each key inside of the color section will represent a color you can reference anywhere else in your theme/theme-file.

Example:

	"colors":{
		"clear": "#181818",
		"windowClearColor":"clear"
	},

As you can see, the keys are the name of the color, and the value is a hex string or even a color you already defined!

Font section

Fonts are exactly what they are. They're a collection of fonts under a name you will be using throughout your theme! Font's are defined in a string format as "file-name.ttf,integer".

Example:

	"fonts":{
		"normal":"DejaVuSans.ttf,16",
		"fixedWidth":"DejaVuSansMono.ttf,16",
		"small":"DejaVuSans.ttf,14"
	},

Now you can use the fonts normal, fixedWidth, or small as values for fonts in your styles section.

Styles

Styles are the primary focus for a theme. Here you will be defining what each style will be displayed as. It is a collection of keys which are later used in your app by their respective classes. All styles derive from the default style by default. . .

Styles are in charge of the following:

  • Defining properties
  • Extending from other styles
  • States of a style

Style Properties

A brief summary of what each property is supposed to do.

  • backgroundColor: Background color for an object. A string of hex or a color key index.
  • extends: Defines what style to inherit from. A string.
  • font: Defines what the text inside this style will be using. A string referencing a font key.
  • iconColor: Background color for an object. A string of hex or a color key index.
  • icons: This is a texture(example) full of other icons. A string link to a image file.
  • margin: ...
  • padding: ...
  • skin: Typically for texturing input, like a button. A string link to a image file.
  • skinColor: Defines the background color for a skin. A string of hex or a color key index.
  • textColor: Defines the color of the font being displayed. A string of hex or a color key index.

Style States

States are an important part of styles. They are what defines the responses to changing inputs and other things. There are currently 4 kinds of style-states used in vanilla mojox.

The states

  • disabled: When an element is disabled it cannot be interacted with. Applying styles here can imply this to the user.
  • hover: An element which has the mouse over it will have a hover state applied.
  • active: A state in which the element is, probably, being interacted with. Like a button press .. etc.
  • selected: State of an element which is currently selected. Ex: an element in a list.

Creating A Theme

To see what the default theme looks like take a look at the base theme, also take a look at a custom theme(ted2).

The Theme structure

{
  "extends": "default",          //1

  "colors": {                    //2
    "color-name": "#hex"
  },

  "fonts": {                     //3
    "font-name": "fontfile.ttf,16"
  },

  "styles": {                    //4

    "style-name": {              //5
      "property": "value"
      "states": {                //6
        "state-name": {
          "property": "value2"
        }
      }
    }

  }
}

This is essentially all you need to know, regarding structure, to make your own custom theme. It consists of all the primary parts and the more important things like the style stucture.

  1. This is how you extend a theme from another; if you want to do that. If you have your own themes to derive from just use the filename without the json extension.
  2. This is where you will store and reference all your colours from. It's just a collection of colors under key names.
  3. Similarly to fonts, this is where you'll store all your colours. It's simply a collection of fonts under key names.
  4. This is where you'll define all your styles. It's a collection of style definitions under a key name. These can be referenced later in code through your defined names.
  5. A style definition. It contains properties which you can define whatever is relevant for the object of your choice. The style definition also has a property for states.
  6. This is your state's property. Here you will have a collection of state objects which hold styling properties. When the gui element is in a state it will be retrieved from the appropriate state collection.

Loading a theme

Themes are resources and must be stored in a directory which has been imported in some way. In order for a theme to be correctly loaded and mounted, all files associated with the theme should also be imported.

Instructions

  1. Create a theme json file
  2. Make sure it is in an assets directory
  3. Make sure it is located in the assets directory, in a "themes" directory
  4. Import the assets directory into your app
  5. Before an application instance is created, set the MOJO_INITIAL_THEME config.

Demo

' ... imports
#Import "assets/"
' ... using statements
' ... other code
Function Main()
	SetConfig("MOJO_INITIAL_THEME", "theme_name") ' Set theme!
	New AppInstance
	' ... load window
	App.Run()
End

Home

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.