ownCloud Web with Custom Theming

Introduction

Just like with other clients (Desktop, Android, iOS), themes can be used with ownCloud Web. As an organization or company you may be interested in theming the ownCloud Web user interface with your brand and slogan and playful individuals may simply enjoy the fun of decorating ownCloud Web the way they like.

This can be achieved by providing a json file that contains text snippets (like brand name and slogan), paths to images (e.g. logos or favicons) and design tokens for various parameters like color, sizing and spacing. In the following, we explain the setup and configuration options and provide an empty template for you to get started.

ownCloud Web can be seen as a hub for extensions like the files extension, the user management extension and others. The central part of ownCloud Web with respect to theming is the web-runtime which holds all general style definitions which can be used by but also be individually set by an extension. This makes it possible to e.g. individually style the general frame independent of an extension.

Providing a Theme

With Infinite Scale, you can define a theming json file via the WEB_UI_THEME_PATH environment variable. This theming json file takes precedence over the config/config.json that is used in the development process when building the Web UI. See an example config.json at GitHub.

If no theme is provided or the loading of your custom theme fails, the standard Infinite Scale theme will be loaded as a fallback. However, this doesn’t stop you from correctly loading a theme that is wrongly formatted, so please read the instructions below carefully.

Loading Themes

  • Web themes are loaded, if added in the Infinite Scale source code, at build-time from <ocis_repo>/services/web/assets/themes. This cannot be manipulated at runtime.

  • Additionally, the administrator can provide custom themes by storing it in the path defined by the environment variable WEB_ASSET_THEMES_PATH.

  • With the theme root directory defined, the system needs to know which theme to use. This can be done by setting the WEB_UI_THEME_PATH environment variable.

  • The final theme is composed of the built-in and the custom theme provided by the administrator via WEB_ASSET_THEMES_PATH and WEB_UI_THEME_PATH.

  • For example, Infinite Scale by default contains a built-in ownCloud theme. If the administrator provides a custom theme via the WEB_ASSET_THEMES_PATH directory like, WEB_ASSET_THEMES_PATH/owncloud/themes.json, this one will be used instead of the built-in one.

Some theme keys are mandatory, like the common.shareRoles settings. Such mandatory keys are injected automatically at runtime if not provided.

Configuring a Theme

Sourced from GitHub
{
  "common": {
    "name": "ownCloud",
    "slogan": "ownCloud – A safe home for all your data",
    "logo": "themes/owncloud/assets/logo.svg",
    "urls": {
      "accessDeniedHelp": "",
      "imprint": "",
      "privacy": "",
      "accessibilityStatement": "",
      "universalAccessEasyLanguage": "",
      "universalAccessSignLanguage": ""
    }
  },
  "clients": {
    "android": {},
    "desktop": {},
    "ios": {},
    "web": {
      "defaults": {
        "appBanner": {},
        "logo": {
          "topbar": "themes/owncloud/assets/logo.svg",
          "favicon": "themes/owncloud/assets/favicon.jpg",
          "login": "themes/owncloud/assets/logo.svg"
        },
        "loginPage": {
          "backgroundImg": "themes/owncloud/assets/loginBackground.jpg"
        },
        "icons": {
          "universalAccess": "",
          "universalAccessEasyLanguage": "",
          "universalAccessSignLanguage": ""
        },
        "designTokens": {
          "breakpoints": {
            "xsmall-max": "",
            "small-default": "",
            "small-max": "",
            "medium-default": "",
            "medium-max": "",
            "large-default": "",
            "large-max": "",
            "xlarge": ""
          },
          "fontSizes": {
            "default": "",
            "large": "",
            "medium": ""
          },
          "sizes": {
            "form-check-default": "",
            "height-small": "",
            "height-table-row": "",
            "icon-default": "",
            "max-height-logo": "",
            "max-width-logo": "",
            "width-medium": "",
            "tiles-default": "",
            "tiles-resize-step": ""
          },
          "spacing": {
            "xsmall": "",
            "small": "",
            "medium": "",
            "large": "",
            "xlarge": "",
            "xxlarge": ""
          }
        }
      },
      "themes": [
        {
          "isDark": false,
          "name": "Light Theme",
          "designTokens": {
            "colorPalette": {
              "background-accentuate": "rgba(255, 255, 5, 0.1)",
              "background-default": "#ffffff",
              "background-highlight": "#f3f6fc",
              "background-muted": "#F1F5FB",
              "background-secondary": "#ffffff",
              "background-hover": "#f3f6fc",
              "background-sidebar": "#ffffff",
              "color-components-apptopbar-background": "transparent",
              "color-components-apptopbar-border": "#ceddee",
              "border": "#ecebee",
              "input-bg": "#ffffff",
              "input-border": "#ceddee",
              "input-text-default": "#041e42",
              "input-text-muted": "#4c5f79",
              "swatch-brand-default": "#224474",
              "swatch-brand-hover": "#223959",
              "swatch-brand-contrast": "#ffffff",
              "swatch-danger-contrast": "#ffffff",
              "swatch-danger-default": "rgb(197, 48, 48)",
              "swatch-danger-hover": "#b12b2b",
              "swatch-danger-muted": "rgb(204, 117, 117)",
              "swatch-inverse-default": "#ffffff",
              "swatch-inverse-hover": "#ffffff",
              "swatch-inverse-muted": "#bfbfbf",
              "swatch-passive-default": "#264d7f",
              "swatch-passive-hover": "#264d7f",
              "swatch-passive-hover-outline": "#264d7f",
              "swatch-passive-muted": "#99bae0",
              "swatch-passive-contrast": "#ffffff",
              "swatch-primary-default": "#224474",
              "swatch-primary-hover": "#16243b",
              "swatch-primary-muted": "#224474",
              "swatch-primary-muted-hover": "#16243b",
              "swatch-primary-gradient": "#224474",
              "swatch-primary-gradient-hover": "#16243b",
              "swatch-primary-contrast": "#ffffff",
              "swatch-success-default": "rgb(3, 84, 63)",
              "swatch-success-hover": "#023b2c",
              "swatch-success-muted": "rgb(83, 150, 10)",
              "swatch-success-contrast": "#ffffff",
              "swatch-warning-default": "rgb(183, 76, 27)",
              "swatch-warning-hover": "#a04318",
              "swatch-warning-muted": "rgba(183, 76, 27, .5)",
              "swatch-warning-contrast": "#ffffff",
              "text-default": "oklch(13% 0.028 261.692)",
              "text-inverse": "#ffffff",
              "text-muted": "#4c5f79",
              "icon-folder": "#224474",
              "icon-archive": "#fbbe54",
              "icon-image": "#ee6b3b",
              "icon-spreadsheet": "#15c286",
              "icon-document": "#3b44a6",
              "icon-video": "#045459",
              "icon-audio": "#700460",
              "icon-presentation": "#ee6b3b",
              "icon-pdf": "#ec0d47",
              "icon-medical": "#0984db"
            }
          }
        },
        {
          "isDark": false,
          "name": "Light Theme – High Contrast",
          "logo": {
            "topbar": "themes/owncloud/assets/logo_dark.svg",
            "favicon": "themes/owncloud/assets/favicon.jpg",
            "login": "themes/owncloud/assets/logo.svg"
          },
          "designTokens": {
            "colorPalette": {
              "background-accentuate": "rgba(255, 255, 5, 0.1)",
              "background-default": "#ffffff",
              "background-highlight": "#ffffff",
              "background-muted": "#ffffff",
              "background-secondary": "#ffffff",
              "background-hover": "oklch(87.2% 0.01 258.338)",
              "background-sidebar": "#ffffff",
              "color-components-apptopbar-background": "transparent",
              "color-components-apptopbar-border": "#000000",
              "border": "#ecebee",
              "input-bg": "#ffffff",
              "input-border": "#000000",
              "input-text-default": "#000000",
              "input-text-muted": "#333333",
              "swatch-brand-default": "#FFFFFF",
              "swatch-brand-hover": "rgb(236, 236, 236)",
              "swatch-brand-contrast": "#000000",
              "swatch-danger-contrast": "#ffffff",
              "swatch-danger-default": "rgb(197, 48, 48)",
              "swatch-danger-hover": "#b12b2b",
              "swatch-danger-muted": "rgb(204, 117, 117)",
              "swatch-inverse-default": "#000000",
              "swatch-inverse-hover": "#555555",
              "swatch-inverse-muted": "#bfbfbf",
              "swatch-passive-default": "#000000",
              "swatch-passive-hover": "#555555",
              "swatch-passive-hover-outline": "#555555",
              "swatch-passive-muted": "#333333",
              "swatch-passive-contrast": "#ffffff",
              "swatch-primary-default": "#000000",
              "swatch-primary-hover": "#555555",
              "swatch-primary-muted": "#000000",
              "swatch-primary-muted-hover": "#555555",
              "swatch-primary-gradient": "#000000",
              "swatch-primary-gradient-hover": "#555555",
              "swatch-primary-contrast": "#ffffff",
              "swatch-success-default": "rgb(3, 84, 63)",
              "swatch-success-hover": "#023b2c",
              "swatch-success-muted": "rgb(83, 150, 10)",
              "swatch-success-contrast": "#ffffff",
              "swatch-warning-default": "rgb(183, 76, 27)",
              "swatch-warning-hover": "#a04318",
              "swatch-warning-muted": "rgba(183, 76, 27, .5)",
              "swatch-warning-contrast": "#ffffff",
              "text-default": "#000000",
              "text-inverse": "#ffffff",
              "text-muted": "#333333",
              "icon-folder": "#000000",
              "icon-archive": "#fbbe54",
              "icon-image": "#ee6b3b",
              "icon-spreadsheet": "#15c286",
              "icon-document": "#3b44a6",
              "icon-video": "#045459",
              "icon-audio": "#700460",
              "icon-presentation": "#ee6b3b",
              "icon-pdf": "#ec0d47",
              "icon-medical": "#0984db"
            }
          }
        },
        {
          "isDark": true,
          "name": "Dark Theme",
          "designTokens": {
            "colorPalette": {
              "background-accentuate": "#696969",
              "background-default": "#000000",
              "background-highlight": "#000000",
              "background-muted": "oklch(21% 0.034 264.665)",
              "background-secondary": "#404040",
              "background-hover": "#383838",
              "background-sidebar": "#000B1C",
              "color-components-apptopbar-background": "transparent",
              "color-components-apptopbar-border": "#ceddee",
              "border": "#383838",
              "input-bg": "#4f4f4f",
              "input-border": "#696969",
              "input-text-default": "#dadcdf",
              "input-text-muted": "#bdbfc3",
              "swatch-brand-default": "#191A25",
              "swatch-brand-hover": "#ffffff",
              "swatch-brand-contrast": "#dadcdf",
              "swatch-inverse-default": "",
              "swatch-inverse-hover": "",
              "swatch-inverse-muted": "#696969",
              "swatch-passive-default": "#ffffff",
              "swatch-passive-hover": "#f8f8f8",
              "swatch-passive-hover-outline": "#f8f8f8",
              "swatch-passive-muted": "#bdbfc3",
              "swatch-passive-contrast": "#000000",
              "swatch-primary-default": "#8EB1DB",
              "swatch-primary-hover": "#6297ce",
              "swatch-primary-muted": "#8EB1DB",
              "swatch-primary-muted-hover": "#6297ce",
              "swatch-primary-gradient": "#8EB1DB",
              "swatch-primary-gradient-hover": "#6297ce",
              "swatch-primary-contrast": "#000000",
              "swatch-success-background": "rgba(0, 188, 140, 0)",
              "swatch-success-default": "rgb(0, 200, 152)",
              "swatch-success-hover": "#00f0b4",
              "swatch-success-muted": "rgba(0, 188, 140, .5)",
              "swatch-success-contrast": "#000000",
              "swatch-warning-background": "rgba(0,0,0,0)",
              "swatch-warning-default": "rgb(232, 191, 73)",
              "swatch-warning-hover": "#eed077",
              "swatch-warning-muted": "rgba(232, 178, 19, .5)",
              "swatch-danger-default": "rgb(255, 137, 126)",
              "swatch-danger-hover": "#ff7566",
              "swatch-danger-muted": "rgba(255, 72, 53, .5)",
              "swatch-danger-contrast": "#000000",
              "swatch-warning-contrast": "#000000",
              "text-default": "#dadcdf",
              "text-inverse": "#000000",
              "text-muted": "#c2c2c2",
              "icon-folder": "#ffffff",
              "icon-archive": "rgb(255, 207, 1)",
              "icon-image": "rgb(255, 111, 0)",
              "icon-spreadsheet": "rgb(0, 182, 87)",
              "icon-document": "rgb(44, 101, 255)",
              "icon-video": "rgb(0, 187, 219)",
              "icon-audio": "rgb(208, 67, 236)",
              "icon-presentation": "rgb(255, 64, 6)",
              "icon-pdf": "rgb(225, 5, 14)",
              "icon-medical": "rgb(9,132,219)"
            }
          }
        },
        {
          "isDark": true,
          "name": "Dark Theme – High Contrast",
          "designTokens": {
            "colorPalette": {
              "background-accentuate": "#696969",
              "background-default": "#000000",
              "background-highlight": "#000000",
              "background-muted": "#000000",
              "background-secondary": "#000000",
              "background-hover": "oklch(21% 0.034 264.665)",
              "background-sidebar": "#000000",
              "color-components-apptopbar-background": "transparent",
              "color-components-apptopbar-border": "#ceddee",
              "border": "#383838",
              "input-bg": "#000000",
              "input-border": "#ffffff",
              "input-text-default": "#ffffff",
              "input-text-muted": "oklch(87.2% 0.01 258.338)",
              "swatch-brand-default": "#000000",
              "swatch-brand-hover": "#ffffff",
              "swatch-brand-contrast": "#ffffff",
              "swatch-inverse-default": "",
              "swatch-inverse-hover": "",
              "swatch-inverse-muted": "#f8f8f8",
              "swatch-passive-default": "#ffffff",
              "swatch-passive-hover": "#f8f8f8",
              "swatch-passive-hover-outline": "#f8f8f8",
              "swatch-passive-muted": "#ffffff",
              "swatch-passive-contrast": "#000000",
              "swatch-primary-default": "#ffffff",
              "swatch-primary-hover": "#f8f8f8",
              "swatch-primary-muted": "#ffffff",
              "swatch-primary-muted-hover": "#f8f8f8",
              "swatch-primary-gradient": "#ffffff",
              "swatch-primary-gradient-hover": "#f8f8f8",
              "swatch-primary-contrast": "#000000",
              "swatch-success-background": "rgba(0, 188, 140, 0)",
              "swatch-success-default": "rgb(0, 200, 152)",
              "swatch-success-hover": "#00f0b4",
              "swatch-success-muted": "rgba(0, 188, 140, .5)",
              "swatch-success-contrast": "#000000",
              "swatch-warning-background": "rgba(0,0,0,0)",
              "swatch-warning-default": "rgb(232, 191, 73)",
              "swatch-warning-hover": "#eed077",
              "swatch-warning-muted": "rgba(232, 178, 19, .5)",
              "swatch-danger-default": "rgb(255, 137, 126)",
              "swatch-danger-hover": "#ff7566",
              "swatch-danger-muted": "rgba(255, 72, 53, .5)",
              "swatch-danger-contrast": "#000000",
              "swatch-warning-contrast": "#000000",
              "text-default": "#ffffff",
              "text-inverse": "#000000",
              "text-muted": "#f8f8f8",
              "icon-folder": "#ffffff",
              "icon-archive": "rgb(255, 207, 1)",
              "icon-image": "rgb(255, 111, 0)",
              "icon-spreadsheet": "rgb(0, 182, 87)",
              "icon-document": "rgb(44, 101, 255)",
              "icon-video": "rgb(0, 187, 219)",
              "icon-audio": "rgb(208, 67, 236)",
              "icon-presentation": "rgb(255, 64, 6)",
              "icon-pdf": "rgb(225, 5, 14)",
              "icon-medical": "rgb(9,132,219)"
            }
          }
        },
        {
          "isDark": false,
          "mode": "vault",
          "name": "Light Theme",
          "logo": {
            "topbar": "themes/owncloud/assets/logo_dark.svg",
            "favicon": "themes/owncloud/assets/favicon.jpg",
            "login": "themes/owncloud/assets/logo.svg"
          },
          "designTokens": {
            "colorPalette": {
              "background-accentuate": "rgba(255, 255, 5, 0.1)",
              "background-default": "#ffffff",
              "background-highlight": "#FFFAE2",
              "background-muted": "#f8f8f8",
              "background-secondary": "#ffffff",
              "background-hover": "#FFFAE2",
              "background-sidebar": "#ffffff",
              "color-components-apptopbar-background": "transparent",
              "color-components-apptopbar-border": "#ceddee",
              "border": "#ecebee",
              "input-bg": "#ffffff",
              "input-border": "#ceddee",
              "input-text-default": "#041e42",
              "input-text-muted": "#4c5f79",
              "swatch-brand-default": "#F0AA39",
              "swatch-brand-hover": "#CA912B",
              "swatch-brand-contrast": "#000000",
              "swatch-danger-contrast": "#ffffff",
              "swatch-danger-default": "rgb(197, 48, 48)",
              "swatch-danger-hover": "#b12b2b",
              "swatch-danger-muted": "rgb(204, 117, 117)",
              "swatch-inverse-default": "#ffffff",
              "swatch-inverse-hover": "#ffffff",
              "swatch-inverse-muted": "#bfbfbf",
              "swatch-passive-default": "#000000",
              "swatch-passive-hover": "#555555",
              "swatch-passive-hover-outline": "#F7D496",
              "swatch-passive-muted": "#99bae0",
              "swatch-passive-contrast": "#000000",
              "swatch-primary-default": "#F0AA39",
              "swatch-primary-hover": "#CA912B",
              "swatch-primary-muted": "#F0AA39",
              "swatch-primary-muted-hover": "#CA912B",
              "swatch-primary-gradient": "#F0AA39",
              "swatch-primary-gradient-hover": "#CA912B",
              "swatch-primary-contrast": "#000000",
              "swatch-success-default": "rgb(3, 84, 63)",
              "swatch-success-hover": "#023b2c",
              "swatch-success-muted": "rgb(83, 150, 10)",
              "swatch-success-contrast": "#ffffff",
              "swatch-warning-default": "rgb(183, 76, 27)",
              "swatch-warning-hover": "#a04318",
              "swatch-warning-muted": "rgba(183, 76, 27, .5)",
              "swatch-warning-contrast": "#ffffff",
              "text-default": "oklch(13% 0.028 261.692)",
              "text-inverse": "#ffffff",
              "text-muted": "#4c5f79",
              "icon-folder": "#000000",
              "icon-archive": "#fbbe54",
              "icon-image": "#ee6b3b",
              "icon-spreadsheet": "#15c286",
              "icon-document": "#3b44a6",
              "icon-video": "#045459",
              "icon-audio": "#700460",
              "icon-presentation": "#ee6b3b",
              "icon-pdf": "#ec0d47",
              "icon-medical": "#0984db"
            }
          }
        },
        {
          "isDark": false,
          "mode": "vault",
          "name": "Light Theme – High Contrast",
          "logo": {
            "topbar": "themes/owncloud/assets/logo_dark.svg",
            "favicon": "themes/owncloud/assets/favicon.jpg",
            "login": "themes/owncloud/assets/logo.svg"
          },
          "designTokens": {
            "colorPalette": {
              "background-accentuate": "rgba(255, 255, 5, 0.1)",
              "background-default": "#ffffff",
              "background-highlight": "#ffffff",
              "background-muted": "#ffffff",
              "background-secondary": "#ffffff",
              "background-hover": "oklch(87.2% 0.01 258.338)",
              "background-sidebar": "#ffffff",
              "color-components-apptopbar-background": "transparent",
              "color-components-apptopbar-border": "#000000",
              "border": "#ecebee",
              "input-bg": "#ffffff",
              "input-border": "#000000",
              "input-text-default": "#000000",
              "input-text-muted": "#333333",
              "swatch-brand-default": "#F0AA39",
              "swatch-brand-hover": "#CA912B",
              "swatch-brand-contrast": "#000000",
              "swatch-danger-contrast": "#ffffff",
              "swatch-danger-default": "rgb(197, 48, 48)",
              "swatch-danger-hover": "#b12b2b",
              "swatch-danger-muted": "rgb(204, 117, 117)",
              "swatch-inverse-default": "#000000",
              "swatch-inverse-hover": "#555555",
              "swatch-inverse-muted": "#bfbfbf",
              "swatch-passive-default": "#000000",
              "swatch-passive-hover": "#555555",
              "swatch-passive-hover-outline": "#555555",
              "swatch-passive-muted": "#333333",
              "swatch-passive-contrast": "#ffffff",
              "swatch-primary-default": "#000000",
              "swatch-primary-hover": "#555555",
              "swatch-primary-muted": "#000000",
              "swatch-primary-muted-hover": "#555555",
              "swatch-primary-gradient": "#000000",
              "swatch-primary-gradient-hover": "#555555",
              "swatch-primary-contrast": "#ffffff",
              "swatch-success-default": "rgb(3, 84, 63)",
              "swatch-success-hover": "#023b2c",
              "swatch-success-muted": "rgb(83, 150, 10)",
              "swatch-success-contrast": "#ffffff",
              "swatch-warning-default": "rgb(183, 76, 27)",
              "swatch-warning-hover": "#a04318",
              "swatch-warning-muted": "rgba(183, 76, 27, .5)",
              "swatch-warning-contrast": "#ffffff",
              "text-default": "#000000",
              "text-inverse": "#ffffff",
              "text-muted": "#333333",
              "icon-folder": "#000000",
              "icon-archive": "#fbbe54",
              "icon-image": "#ee6b3b",
              "icon-spreadsheet": "#15c286",
              "icon-document": "#3b44a6",
              "icon-video": "#045459",
              "icon-audio": "#700460",
              "icon-presentation": "#ee6b3b",
              "icon-pdf": "#ec0d47",
              "icon-medical": "#0984db"
            }
          }
        },
        {
          "isDark": true,
          "mode": "vault",
          "name": "Dark Theme",
          "designTokens": {
            "colorPalette": {
              "background-accentuate": "#696969",
              "background-default": "#000000",
              "background-highlight": "#000000",
              "background-muted": "oklch(21% 0.034 264.665)",
              "background-secondary": "#404040",
              "background-hover": "#383838",
              "background-sidebar": "#000B1C",
              "color-components-apptopbar-background": "transparent",
              "color-components-apptopbar-border": "#ceddee",
              "border": "#383838",
              "input-bg": "#000000",
              "input-border": "#ffffff",
              "input-text-default": "#ffffff",
              "input-text-muted": "#f8f8f8",
              "search-input-text-muted": "#f8f8f8",
              "swatch-brand-default": "#191A25",
              "swatch-brand-hover": "#ffffff",
              "swatch-brand-contrast": "#F0AA39",
              "swatch-inverse-default": "",
              "swatch-inverse-hover": "",
              "swatch-inverse-muted": "#696969",
              "swatch-passive-default": "#F0AA39",
              "swatch-passive-hover": "#CA912B",
              "swatch-passive-hover-outline": "#CA912B",
              "swatch-passive-muted": "#bdbfc3",
              "swatch-passive-contrast": "#000000",
              "swatch-primary-default": "#F0AA39",
              "swatch-primary-hover": "#CA912B",
              "swatch-primary-muted": "#F0AA39",
              "swatch-primary-muted-hover": "#CA912B",
              "swatch-primary-gradient": "#F0AA39",
              "swatch-primary-gradient-hover": "#CA912B",
              "swatch-primary-contrast": "#000000",
              "swatch-success-background": "rgba(0, 188, 140, 0)",
              "swatch-success-default": "rgb(0, 200, 152)",
              "swatch-success-hover": "#00f0b4",
              "swatch-success-muted": "rgba(0, 188, 140, .5)",
              "swatch-success-contrast": "#000000",
              "swatch-warning-background": "rgba(0,0,0,0)",
              "swatch-warning-default": "rgb(232, 191, 73)",
              "swatch-warning-hover": "#eed077",
              "swatch-warning-muted": "rgba(232, 178, 19, .5)",
              "swatch-danger-default": "rgb(255, 137, 126)",
              "swatch-danger-hover": "#ff7566",
              "swatch-danger-muted": "rgba(255, 72, 53, .5)",
              "swatch-danger-contrast": "#000000",
              "swatch-warning-contrast": "#000000",
              "text-default": "#ffffff",
              "text-inverse": "#000000",
              "text-muted": "#E6C56B",
              "icon-folder": "#ffffff",
              "icon-archive": "rgb(255, 207, 1)",
              "icon-image": "rgb(255, 111, 0)",
              "icon-spreadsheet": "rgb(0, 182, 87)",
              "icon-document": "rgb(44, 101, 255)",
              "icon-video": "rgb(0, 187, 219)",
              "icon-audio": "rgb(208, 67, 236)",
              "icon-presentation": "rgb(255, 64, 6)",
              "icon-pdf": "rgb(225, 5, 14)",
              "icon-medical": "rgb(9,132,219)"
            }
          }
        },
        {
          "isDark": true,
          "mode": "vault",
          "name": "Dark Theme – High Contrast",
          "logo": {
            "topbar": "themes/owncloud/assets/logo_dark.svg",
            "favicon": "themes/owncloud/assets/favicon.jpg",
            "login": "themes/owncloud/assets/logo.svg"
          },
          "designTokens": {
            "colorPalette": {
              "background-accentuate": "#696969",
              "background-default": "#000000",
              "background-highlight": "#000000",
              "background-muted": "#000000",
              "background-secondary": "#000000",
              "background-hover": "oklch(21% 0.034 264.665)",
              "background-sidebar": "#000000",
              "color-components-apptopbar-background": "transparent",
              "color-components-apptopbar-border": "#ceddee",
              "border": "#383838",
              "input-bg": "#000000",
              "input-border": "#ffffff",
              "input-text-default": "#ffffff",
              "input-text-muted": "oklch(27.8% 0.033 256.848)",
              "search-input-bg": "#ffffff",
              "search-input-border": "#000000",
              "search-input-text-default": "#000000",
              "search-input-text-muted": "oklch(27.8% 0.033 256.848)",
              "swatch-brand-default": "#F0AA39",
              "swatch-brand-hover": "#CA912B",
              "swatch-brand-contrast": "#000000",
              "swatch-inverse-default": "",
              "swatch-inverse-hover": "",
              "swatch-inverse-muted": "#f8f8f8",
              "swatch-passive-default": "#ffffff",
              "swatch-passive-hover": "#f8f8f8",
              "swatch-passive-hover-outline": "#f8f8f8",
              "swatch-passive-muted": "#ffffff",
              "swatch-passive-contrast": "#000000",
              "swatch-primary-default": "#ffffff",
              "swatch-primary-hover": "#f8f8f8",
              "swatch-primary-muted": "#ffffff",
              "swatch-primary-muted-hover": "#f8f8f8",
              "swatch-primary-gradient": "#ffffff",
              "swatch-primary-gradient-hover": "#f8f8f8",
              "swatch-primary-contrast": "#000000",
              "swatch-success-background": "rgba(0, 188, 140, 0)",
              "swatch-success-default": "rgb(0, 200, 152)",
              "swatch-success-hover": "#00f0b4",
              "swatch-success-muted": "rgba(0, 188, 140, .5)",
              "swatch-success-contrast": "#000000",
              "swatch-warning-background": "rgba(0,0,0,0)",
              "swatch-warning-default": "rgb(232, 191, 73)",
              "swatch-warning-hover": "#eed077",
              "swatch-warning-muted": "rgba(232, 178, 19, .5)",
              "swatch-danger-default": "rgb(255, 137, 126)",
              "swatch-danger-hover": "#ff7566",
              "swatch-danger-muted": "rgba(255, 72, 53, .5)",
              "swatch-danger-contrast": "#000000",
              "swatch-warning-contrast": "#000000",
              "text-default": "#ffffff",
              "text-inverse": "#000000",
              "text-muted": "#f8f8f8",
              "icon-folder": "#ffffff",
              "icon-archive": "rgb(255, 207, 1)",
              "icon-image": "rgb(255, 111, 0)",
              "icon-spreadsheet": "rgb(0, 182, 87)",
              "icon-document": "rgb(44, 101, 255)",
              "icon-video": "rgb(0, 187, 219)",
              "icon-audio": "rgb(208, 67, 236)",
              "icon-presentation": "rgb(255, 64, 6)",
              "icon-pdf": "rgb(225, 5, 14)",
              "icon-medical": "rgb(9,132,219)"
            }
          }
        }
      ]
    }
  }
}