Themes

Themes

Click to view documentation for 5.7 onwards..

Page version: 5.6 build 3116

Themes can be swapped from the Theme Select marked by the Color Palette icon.

Theme color options decide the theme color. Since theme editor can reference theme color, this increases customization possibilities, e.g. monochromatic theme uses theme color for every icon.

Default theme option

You can change the default theme users see by setting Display_options.Theme value to name of a theme. If the theme is later deleted and this setting is not changed, it will default to 'default' theme on the browser.

Theme storage

Themes are stored in /plugins/Plan/web_themes folder and change colors of different elements on the website. Default themes are included in the Plan.jar.

In HTTP mode or on an Exported site, themes can be edited and they will be stored in browser local storage. They can also be downloaded, so that you can place them to web_themes -folder manually.

In HTTPS mode access.theme.editor web permission is required to go to theme editor, and manage.themes web permission is required to Save/Delete themes in web_themes -folder. Without manage.themes user can still store themes in their local storage as if in HTTP mode.

Being able to download themes allows collaboration and sharing themes between those using Plan.

Adding themes

Clicking 'Add theme' brings you to the Add theme -view.

Here you can select a theme to base yours on, the name for your theme, or alternatively - if you've downloaded a theme in the past, upload it directly to start editing right away.

Deleting themes

If you wish to delete a theme, you can go to 'Delete themes' inside the Theme editor

If in HTTP mode or in HTTPS mode without manage.themes permission, the user can only delete themes that are stored in their local storage.

Edge cases:

• If you have manage.themes permission, and a locally stored copy of a theme, the locally stored copy can be deleted first without worry that the file on disk is deleted.
• If you have made modifications to default themes, and such a file exists in web_files, deleting the theme will delete the file in web_files, but the default inside the jar will remain available.

Editing themes

After opening Theme editor you can edit the theme name and its colors.

Colors section

In the colors section you can define new colors.

Night mode colors

In night mode all the 'Colors' are desaturated by 30% to better suit the dark color space. If you wish to add a fully saturated color to night mode, the night mode colors section exists for this purpose.

Editing colors

Clicking a color or 'Add color' -button opens the color editor

The supported formats for colors are:

• Hex3 & Hex6 #123 or #212121 https://www.w3schools.com/css/css_colors_hex.asp
• rgb & rgba in rgb(0, 0, 0) or rgba(0, 0, 0, 0.1) formats
• hsl & hsla in hsl(0, 50%, 40%) or hsla(0, 50%, 40%, 0.1) formats
• hsv in hsv(360, 100%, 100%) format
• linear-gradient & radial gradient (Limited to background elements)
• color-mix (Can be used with css variables generated by the theme) https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
  • This can be used to input colors not otherwise supported by the validation system

Use cases section

The use case section decides the actual colors that elements are on the website.

Clicking on a use case will bring up a dropdown to select a color

Example section

Hovering over a use case will bring up an Example that uses that color. On mobile the example is shown when the use case is tapped.

When you hover over the night mode use case the example shows in night mode

This allows you to see in real time what you are editing.

If the Example section gets in the way it can be collapsed/shown by tapping top of the section where the 'Example' text is.

Undo, Redo & Discard changes

The edit history bar will appear when you make changes

If you discard changes, all of the change history will be placed in a single 'Redo' action.

Any changes undone by the Undo button will disappear if you do another action

Saving the theme

Once satisfied with the changes you can press Save. When you save, the Change history will be applied and you can no longer Undo.

You will not be redirected, but the theme can then be taken into use.

Technical details

This section covers how it all works under the hood, if the words Cascading Style Sheets doesn't say anything to you, you can safely ignore this section.

Everything on the theme page produces a CSS variable based on the name. As an example, adding a color called 'red' adds a css-variable --color-red with the value in the color form. The use cases then produce further css variables that reference the css variables, e.g. --color-forms-input-background: var(--color-white);. Everything also produces a contrast color --contrast-color-{name} variable that is either #000 or #fff. The use-case variables are then used in the actual code, since they can not be deleted or renamed like the other variables.

The night mode colors and use cases override any values in the colors and use case section if they're defined. All colors in colors section are unsaturated by 30% and added as --color-{name} variables in a .night-mode-colors-block. This allows switching any and all colors with a single class change.

Older versions

version: 5.2 build 1068

Colors used on the page are changed in theme.yml.

• Default theme.yml

Default sidebar color or night mode

• Change DefaultColor in theme.yml to the name of the color you want to use for the sidebar (The color names are listed in theme.yml).
• Change Display_options.Theme in config.yml to "night" if you want the panel to appear in night-mode by default
• Reload Plan
• Clear browser cache if you have accessed the page to see default.

Themes

Here is a list of Themes currently available (Click the link to view an image.)

Default:

• Soft
• Mute
• Pastel
• Grey
• Sepia

All colors can be changed, so if you do not like a single color you can set it with the other settings.
If you want a certain themed theme to be created just ask - They're one of the easiest things to implement.

Borrow colors from other Themes

In order to copy colors from another theme:

• Change Display_options.Theme in config.yml to name of a theme you want colors from
• Remove the settings you want to copy inside the theme.yml
• Reload Plan

For example:

red: "#Value"
pink: "#Value"

Remove pink:

red: "#Value"

Reload:

red: "#Value"
pink: "#NewValue"

Custom colors

All the settings inside theme.yml accept a Html color code. This means that any setting can be set as any color.

Example: pink: '#ff75f3'

Changing the Font

The font can also be changed.
By default Nunito is in use. (https://fonts.googleapis.com/css?family=Nunito:400,700,800,900&display=swap&subset=latin-ext)

If you want to use another web font, set FontFamily: '''WebFontName'', sans-serif' and FontStyleSheet: 'linkToFontStyleSheet'

Pie Chart colors

Piecharts require multiple colors so they're all defined in a single row. The colors are placed on worlds in alphabetical order.

Format: '"#0099C6", "#66AA00", "#316395", "#994499", "#22AA99", "#AAAA11", "#6633CC", "#E67300", "#329262", "#5574A6"'