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 ), 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

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().

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.

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.