Page 1 of 1

[VUE] Multi custom themes in Vue app

Posted: Wed Aug 10, 2022 10:47 am
by pmiklashevich

Hi! Is it possible to:

  1. Extend 2 themes at the same time? For example, classic-light and classic-dark.
  2. Switch between 2 custom themes programmatically?
  3. Do all above in a Vue app?

Product: SchedulerPro

I would appreciate for a small tutorial on one of your Vue demos.

Keep in mind I'm aware of the theming guides and I know scheduler/examples/theme demo.


Re: [VUE] Multi custom themes in Vue app

Posted: Thu Aug 11, 2022 8:48 am
by alex.l

Hi Pavel,

We don't have examples of creating 2 custom themes in one application.
Since you already know how to create a custom theme based on our theme (you've seen guides and examples https://bryntum.com/docs/scheduler-pro/guide/Scheduler/customization/styling#creating-a-custom-theme ), just repeat it twice. Do you have problems when using second custom theme?

To change theme programmatically, you need to specify data-bryntum-theme attribute in CSS tag as mentioned here https://bryntum.com/docs/scheduler-pro/guide/Scheduler/customization/styling#using-different-themes

The data-bryntum-theme attribute on the link tag is not strictly required, but it allows you to programmatically switch the theme at runtime using DomHelper.setTheme().

https://bryntum.com/docs/scheduler-pro/api/Core/helper/DomHelper#function-setTheme-static


Re: [VUE] Multi custom themes in Vue app

Posted: Thu Aug 11, 2022 10:14 am
by pmiklashevich

Hi Alex!

just repeat it twice.

This is a bit tricky. When you define a custom theme, you specify variables and import bryntum's scss file. So as an output you're going to have a css built automatically for the scss provided. How can I define different scss sources in one project? The only way I see it, create css in advance, for example with sass preprocessor. Then it might work. But I cannot find a solution to integrate 2 custom theme in a build process of Vue application. That's why I wonder if you can provide a small example showing how to achieve this in Vue app.
Thanks


Re: [VUE] Multi custom themes in Vue app

Posted: Thu Aug 11, 2022 11:39 am
by alex.l

Yep, you'll need a SASS compiler(bundler).
After you copied our theme sources and applied required changes, you'll need to compile files to CSS file, which you'll define in index.html (or similar). If you have 2 themes, put them all together using tags

<link rel="stylesheet" href="build/scheduler.classic.css" data-bryntum-theme>
<link rel="stylesheet" href="build/scheduler.classic-light.css" data-bryntum-theme>

data-bryntum-theme will do the job and allow you to select one theme as active from the list.