Jet change color theme

Webix JS
1

Имею файл конфигурации app.js Webix Jet

/*
App configuration
*/

define([
“libs/webix-mvc-core/core”,
“libs/webix-mvc-core/plugins/menu”,
], function(
core, menu
){

//configuration
var app = core.create({
	id:			"Test", //change this line!
    name:		"Смета",
	version:	"1.1.0",
	debug:		true,
	start:		"/app/budgets"
});

app.use(menu);

return app;

});

Можно ли для этой версии Jet реализовать смену темы(светлая-темная) по кнопке например?

2

Hey @Javaq, you can try and implement the theme switching via a Theme plugin inside a Jet app, with the help of this plugin we can switch between different skins. If you wish to simply change the colors you can customize the skin you want to use via a Skin Builder tool - https://webix.com/skin-builder/. Please note that you need to link the skins you’re going to use inside your HTML , you can read more about the Theme plugin here - Plugins - Webix Jet.
Here’s an example of how this might work: https://snippet.webix.com/s7ft4jrg.

Добрый день, @Javaq. В Webix Jet есть встроенный плагин (Theme plugin), позволяющий реализовать нам переключение между скинами. Если же, допустим, вам просто нужно поменять цвет скина, можно воспользоваться Skin Builder Tool - https://webix.com/skin-builder/, и настроить скин по вкусу. Пожалуйста, обратите внимание, что вам нужно будет подключить все ваши используемые скины в HTML файле. Подробнее о Theme plugin и как его подключить/реализовать функционал переключения скинов можно почитать тут - Plugins - Webix Jet.
Вот небольшой пример реализации - https://snippet.webix.com/s7ft4jrg.

3

Этот плагин работает со всеми версиями Jet?

4

И мне все таки нужно переключения между светлой и темной темой,это не отдельные файлы скинов…

5

В версиях Webix Jet до 1.0 этот theme плагин тоже существовал, но его механика была иной и гораздо более простой.

При установке темы плагин просто запоминал идентификатор темы (по принципу “name:skin”) в window local storage и перегружал страницу, а уже пользователь задействовал соответствующие CSS файлы в индексе своего приложения: webix-jet/theme.js at 0.1.5 · webix-hub/webix-jet · GitHub

Частично этот плагин реализован в старом Admin App demo GitHub - webix-hub/webix-adminapp-demo at jet0

6

можете использовать такой финт
https://snippet.webix.com/j4ymiff6

7

Да, для смены скинов работает, но мне нужно как в демо проектах менять светлую тему на темную скина материал

8

Как насчет такого? https://snippet.webix.com/9rt6tuy0
На самом деле, webix_dark можно применить к ограниченному кол-ву view, здесь перечислены все элементы, которые поддерживают этот css класс - https://docs.webix.com/desktop__material_skin.html#darktheme (а отдельной, глобальной темы вроде Material Dark нету). Т.е. если нужно переключить весь ui в тот или иной режим, тут уже надо свой css подключать и реализовывать функционал переключения.
Также для большей подробности советую глянуть внутрь Booking App Demo, чтобы посмотреть на пример реализации вместе с использованием local storage: https://github.com/webix-hub/booking-app-demo (к примеру сама кнопка).

9

В раннем Jet тема эта конструкция действительна? - this.$scope.app.config.theme = color;
this.$scope.app.refresh();

10

если для приложения был активирован Theme плагин то можно использоват

this.app.getService("theme").setTheme(color);