Themes

Themes

Themes provide a simple way for you to configure the appearance of your Liberouter GUI. Themes may work in release 1.0.0, but the theme system was reworked in 1.1.0. For the best user experience use themes in the newest releases of Liberouter GUI, as older versions may not support all theme features.

Themes can currently only change colors, name and logo of the GUI (excluding loading screen). If you want to change more features, you can edit scss files. Support for changing more features by using themes is currently not planned.

Please note, that not all modules support themes and they may look bad in some cases, especially with dark themes. Most official modules should support themes.

1. Installation
2. Themes
   1. Light themes
   2. Dark themes
   3. Experimental themes

Installation

Copy colorTheme from this page and replace it in your own module config or in modules/app.config.json, then run bootstrap.py. If your angular development server (ng) was running, restart it to apply changes. After it loads again, you should see your theme applied.

Light themes

Liberouter

Default Liberouter GUI theme in case you need to go back.

  "colorTheme": {
    "colorMain": "#008545",
    "colorHighlight": "#016d39",
    "colorSelected": "#00a354",
    "colorSelected2": "#00b55d",
    "colorBackground": "#fafafa",
    "colorItemBackground": "#fff",
    "colorText": "#231f20",
    "colorTextInverse": "#fff",
    "colorLink": "#0068a2",
    "colorLinkHover": "#00a1e3",
    "colorHeading": "#555"
},

Cesnet

Blue theme inspired by cesnet logo colors.

  "colorTheme": {
    "colorMain": "#0068a2",
    "colorHighlight": "#00a1e3",
    "colorSelected": "#0077ba",
    "colorSelected2": "#0284ce",
    "colorBackground": "#fafafa",
    "colorItemBackground": "#fff",
    "colorText": "#231f20",
    "colorTextInverse": "#fff",
    "colorLink": "#0068a2",
    "colorLinkHover": "#00a1e3",
    "colorHeading": "#555"
  },

Amethyst

Purple and grey theme.

"colorTheme": {
    "colorMain": "#8e44ad",
    "colorHighlight": "#9b59b6",
    "colorSelected": "#9b59b6",
    "colorSelected2": "#9b59b6",
    "colorBackground": "#bdc3c7",
    "colorItemBackground": "#ecf0f1",
    "colorText": "#231f20",
    "colorTextInverse": "#fff",
    "colorLink": "#0068a2",
    "colorLinkHover": "#00a1e3",
    "colorHeading": "#000"
  },

Dark themes

Dark mode

Beautiful dark mode perfect for OLED displays

  "colorTheme": {
    "colorMain": "#008545",
    "colorHighlight": "#00723b",
    "colorSelected": "#00a354",
    "colorSelected2": "#00b55d",
    "colorBackground": "#000",
    "colorItemBackground": "#222",
    "colorText": "#fff",
    "colorTextInverse": "#fff",
    "colorLink": "#ff975d",
    "colorLinkHover": "#ffb186",
    "colorHeading": "#fff"
  },

Red moon

Dark theme with red accents.

"colorTheme": {
    "colorMain": "#c0392b",
    "colorHighlight": "#e74c3c",
    "colorSelected": "#d35400",
    "colorSelected2": "#e67e22",
    "colorBackground": "#2c3e50",
    "colorItemBackground": "#34495e",
    "colorText": "#fff",
    "colorTextInverse": "#fff",
    "colorLink": "#0068a2",
    "colorLinkHover": "#00a1e3",
    "colorHeading": "#fff"
  },

Dracula

Dark theme perfect for working at night.

  "colorTheme": {
    "colorMain": "#2c3e50",
    "colorHighlight": "#34495e",
    "colorSelected": "#3a5066",
    "colorSelected2": "#40576d",
    "colorBackground": "#2d3436",
    "colorItemBackground": "#636e72",
    "colorText": "#fff",
    "colorTextInverse": "#fff",
    "colorLink": "#0068a2",
    "colorLinkHover": "#00a1e3",
    "colorHeading": "#fff"
  },

Midnight blue

Dark and blue theme

  "colorTheme": {
    "colorMain": "#222f3e",
    "colorHighlight": "#34495e",
    "colorSelected": "#2d3e4f",
    "colorSelected2": "#6a89cc",
    "colorBackground": "#2d3436",
    "colorItemBackground": "#3c6382",
    "colorText": "#fff",
    "colorTextInverse": "#fff",
    "colorLink": "#6a89cc",
    "colorLinkHover": "#4a69bd",
    "colorHeading": "#fff"
  },

Experimental themes

Use these themes with caution, they might not work in all browsers. Features in experimental themes may change over time, we recommend using them only for testing.

These themes were only tested in the latest versions of Liberouter GUI from the 'devel' branch.

Gradients

Theme using gradients on most elements. Please note, that we currently do not support fallback options for background, using gradients this way may result in the GUI being unusable in some browsers.

When using gradients, you should use property background, not background-color in your module's scss files. Gradients will not work as a text color.

This feature is a work in progress. If you want to try out gradients, please use liberouter GUI from the 'devel' branch.

  "colorTheme": {
    "colorMain": "linear-gradient(135deg, #0f2027, #203a43, #2c5364)",
    "colorHighlight": "linear-gradient(135deg, #141e30, #243b55)",
    "colorSelected": "linear-gradient(135deg, #2c3e50, #4ca1af)",
    "colorSelected2": "#00b55d",
    "colorBackground": "linear-gradient(135deg, #009fff, #ec2f4b)",
    "colorItemBackground": "rgba(255,255,255,0.9)",
    "colorText": "#231f20",
    "colorTextInverse": "#fff",
    "colorLink": "#0068a2",
    "colorLinkHover": "#00a1e3",
    "colorHeading": "rgba(0,0,0,0.5)"
  },