💅 Theme

You are not required to use any of the styles from the @schedule-x/theme-default package. If you are up for it, you can create your own theme from scratch, or just override rules of the default theme. If you do so, however, you might want to pin your schedule-x dependencies to a specific version, to avoid unexpected updates that might break your custom styles.

Customizing the default theme colors

Schedule-X uses global CSS variables to define colors. Therefore, you can override the following CSS variables to customize the colors of the default theme:

:root {
  --sx-color-primary: #6750a4;
  --sx-color-on-primary: #fff;
  --sx-color-primary-container: #eaddff;
  --sx-color-on-primary-container: #21005e;
  --sx-color-secondary: #625b71;
  --sx-color-on-secondary: #fff;
  --sx-color-secondary-container: #e8def8;
  --sx-color-on-secondary-container: #1e192b;
  --sx-color-tertiary: #7d5260;
  --sx-color-on-tertiary: #fff;
  --sx-color-tertiary-container: #ffd8e4;
  --sx-color-on-tertiary-container: #370b1e;
  --sx-color-surface: #fef7ff;
  --sx-color-surface-dim: #ded8e1;
  --sx-color-surface-bright: #fef7ff;
  --sx-color-on-surface: #1c1b1f;
  --sx-color-surface-container: #f3edf7;
  --sx-color-surface-container-low: #f7f2fa;
  --sx-color-surface-container-high: #ece6f0;
  --sx-color-background: #fff; // deviation from material 3, which would be #FEF7FF
  --sx-color-on-background: #1c1b1f;
  --sx-color-outline: #79747e;
  --sx-color-outline-variant: #c4c7c5;
  --sx-color-shadow: #000;
  --sx-color-surface-tint: #6750a4;
  --sx-color-neutral: var(--sx-color-outline);
  --sx-color-neutral-variant: var(--sx-color-outline-variant);
 
  // internally defined colors, not belonging to the material design spec
  --sx-internal-color-gray-ripple-background: #e0e0e0;
  --sx-internal-color-light-gray: #fafafa;
  --sx-internal-color-text: #000;
}

⭐ Resource scheduler Demo