@c8y/style/variables/_brand-vars.less

Styles for Cumulocity IoT applications

/* CUMULOCITY-IOT BRAND CSS VARS */


@image-path: '';

//falbacks
@brand-logo-img-fallback: if(@use-relative-paths, '../img/logo-platform.svg', 'img/logo-platform.svg'); // Logo for login and loading
@brand-logo-img-fallback-dark: if(@use-relative-paths, '../img/logo-platform-white.svg', 'img/logo-platform-white.svg'); // Logo for login and loading

@brand-logo-height-fallback: 20%;

@navigator-platform-logo-fallback:if(@appLogo=deprecated, if(@use-relative-paths, '../img/logo-platform.svg', 'img/logo-platform.svg'), @appLogo); // legacy support
@navigator-platform-logo-dark-fallback:   if(@appLogo=deprecated, if(@use-relative-paths, '../img/logo-platform-white.svg', 'img/logo-platform-white.svg'), @appLogo); // legacy support

@navigator-platform-logo-height-fallback: 32px;


/* DEPRECATED */
@appLogo: deprecated; // replaces the app icon with an image.
@appLogo-height: deprecated;
@appBranding: ''; //When different from empty, hides app name in navigator
@powered-by: ''; // when set adds an image below login form. ex.: trackerando


// Login
@brand-logo-img: var(--brand-logo-img, var(--c8y-brand-logo-img));
@brand-logo-height: var(--brand-logo-img-height, var(--c8y-brand-logo-img-height));

@navigator-platform-logo: var(--navigator-platform-logo, var(--c8y-navigator-platform-logo));

@navigator-platform-logo-height: var(--navigator-platform-logo-height, var(--c8y-navigator-platform-logo-height));

// Typography
@font-family-headings-css-var: var(--c8y-font-family-headings, @headings-font-family);
@font-family-base-css-var: var(--c8y-font-family-base, @font-family-base);

// Backward compatibility tokens

:root, .c8y-light-theme{
  --c8y-brand-logo-img: url('@{brand-logo-img-fallback}');
  --c8y-brand-logo-height: @brand-logo-height-fallback;

  --c8y-navigator-platform-logo: url('@{navigator-platform-logo-fallback}');
  --c8y-navigator-platform-logo-height: @navigator-platform-logo-height-fallback;

  --c8y-header-color: var(--c8y-main-header-background-default);
  --c8y-header-text-color: var(--c8y-main-header-text-color-default);
  --c8y-header-hover-color: var(--c8y-main-header-text-color-hover);

  --c8y-navigator-bg-color: var(--c8y-navigator-background-default);
  --c8y-navigator-header-bg: var(--c8y-navigator-header-background);

  --c8y-navigator-title-color: var(--c8y-navigator-header-color);

  --c8y-navigator-active-bg: var(--c8y-navigator-background-selected);

  --c8y-navigator-text-color: var(--c8y-navigator-text-color-default);
  --c8y-navigator-color-active: var(--c8y-navigator-text-color-selected);

  --c8y-navigator-border-active: var(--c8y-navigator-border-selected);

  --c8y-right-drawer-link-color: var(--c8y-right-drawer-link-color-default);
}

.c8y-dark-theme{
  --c8y-brand-logo-img: url('@{image-path}@{brand-logo-img-fallback-dark}');
  --c8y-navigator-platform-logo: url('@{navigator-platform-logo-dark-fallback}');

  --c8y-header-color: var(--c8y-main-header-background-default);
  --c8y-header-text-color: var(--c8y-main-header-text-color-default);
  --c8y-header-hover-color: var(--c8y-main-header-text-color-hover);

  --c8y-navigator-bg-color: var(--c8y-navigator-background-default);
  --c8y-navigator-header-bg: var(--c8y-navigator-header-background);

  --c8y-navigator-title-color: var(--c8y-navigator-header-color);

  --c8y-navigator-active-bg: var(--c8y-navigator-background-selected);

  --c8y-navigator-text-color: var(--c8y-navigator-text-color-default);
  --c8y-navigator-color-active: var(--c8y-navigator-text-color-selected);

  --c8y-navigator-border-active: var(--c8y-navigator-border-selected);

  --c8y-right-drawer-link-color: var(--c8y-right-drawer-link-color-default);

  --body-background-color: var(--c8y-body-background-color);
}

.c8y-system-theme {
  @media (prefers-color-scheme: dark){
    .c8y-dark-theme();
  }
}