Plugin Stylesheet

Colour Scheme

Designer automatically sets the browser’s colour scheme preference to dark mode when hosting plugins. This ensures that plugins will receive the correct colour scheme preference through the prefers-color-scheme CSS media feature.

To ensure your plugin’s web interface matches Designer’s dark theme, you should implement theme support using the prefers-color-scheme media feature:

/* Default dark theme */
:root {
  --background-color: #1a1a1a;
  --text-color: #ffffff;
  /* Add other dark theme variables */
}

/* Override for light theme if needed */
@media (prefers-color-scheme: light) {
  :root {
    --background-color: #ffffff;
    --text-color: #000000;
    /* Add other light theme variables */
  }
}

This ensures that your plugin’s interface will be consistent with Designer’s dark theme, providing a better user experience and maintaining visual consistency across the application.

Alpha Backgrounds

Designer supports alpha (transparent) backgrounds for plugin pages. When a plugin’s background is set to be transparent, it will inherit Designer’s default background, which is a lightly blurred background similar to other widgets in the application. This allows plugins to seamlessly integrate with Designer’s visual style.

To use a transparent background, you can set the background color with an alpha channel:

body {
  background-color: rgba(0, 0, 0, 0); /* Fully transparent */
  /* or */
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent */
}

This feature is particularly useful for creating floating or overlay-style interfaces that blend naturally with Designer’s environment.