💅 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.
Shadcn Theme
For apps that are using Shadcn with its default design, you may want to use @schedule-x/theme-shadcn.
Schedule-X is in no way affiliated with Shadcn, and this theme is not an official Shadcn software. It is merely a theme for Schedule-X that is designed to match with the Shadcn design.
npm i @schedule-x/theme-shadcnimport '@schedule-x/theme-shadcn/dist/index.css'
import { createCalendar } from '@schedule-x/calendar'
const calendar = createCalendar({
// ... other config,
theme: 'shadcn'
})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;
}