search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Scheduler - How to switch between dark and light themes

Asked by Anonymous
5 months ago.

Is is possible to apply dark/light theme to the scheduler component? If I would create both themes dark and light using https://themes.daypilot.org/scheduler/create, can I then switch between them?

Answer posted by Dan Letecky [DayPilot]
5 months ago.

You can switch the CSS theme using the update() method:

dp.update({theme: "my_dark_theme"});

And back:

dp.update({theme: "my_light_theme"});

Both theme files need to be included in the page using <link>.

Comment posted by Anonymous
5 months ago.

I have another issue when switching between light and dark themes. How can I keep the line and the hover effect when changing the background of the context menu? See please the attached video

I edited the picture for background-image of .menu_default_main. However, it gets covered by the value of background-color. I assume the same reason applies for the hover effect too?

.menu_default_main {
    border: 1px solid var(--scheduler-border-color) !important;
    background-color: var(--scheduler-base-background-color);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAABCAYAAADJsB7sAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOvAAADrwBlbxySQAAACl0RVh0Q3JlYXRpb24gVGltZQBwbyAxMCA1IDIwMTAgMjI6MzM6NTkgKzAxMDBs8u/iAAAAB3RJTUUH2gUKFCQHrI+FVAAAABNJREFUGFdj+E9nEBgYCST//wcAM6t1h3ShuFUAAAAASUVORK5CYII=) !important;
    background-repeat: repeat-y !important;
}

.menu_default_main,
.menu_default_main * {
    background-color: var(--scheduler-base-background-color) !important;
    color: var(--base-text-color) !important;
}
This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.