Jet change color theme

edited July 12 in Technical questions

Имею файл конфигурации 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 реализовать смену темы(светлая-темная) по кнопке например?

Comments

  • edited July 12

    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 - https://webix.gitbook.io/webix-jet/part-ii-webix-jet-in-details/plugins#theme-plugin.
    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 и как его подключить/реализовать функционал переключения скинов можно почитать тут - https://webix.gitbook.io/webix-jet/part-ii-webix-jet-in-details/plugins#theme-plugin.
    Вот небольшой пример реализации - https://snippet.webix.com/s7ft4jrg.

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

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

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

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

    Частично этот плагин реализован в старом Admin App demo https://github.com/webix-hub/webix-adminapp-demo/tree/jet0

  • edited July 12

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

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

  • edited July 15

    Как насчет такого? 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 (к примеру сама кнопка).

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

  • edited July 22

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

    this.app.getService("theme").setTheme(color);
    
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!