Is there a way by toggle document body class to switch to dark mode?
Hi,
I have understood your suggestion that changing theme by the follow way.
https://github.com/SyncfusionExamples/EJ2-Angular-Dynamic-theme-Switch
In my style.scss, I am using the gobal variants, and imported the syncfusion default control scss files , and also imported the custom syncfusion control scss files. Not a complete CSS file, and cannot change the innerHTML to switch dark mode.
Is there a way by toggle document body class to switch to dark mode ? eg:
My code for FYI.
$font-family: var(--tec-default-font);
$font-size: var(--tec-font-size);
$border-radius: 20px !default;
/*此变量是应用控件的主题色，它应该与--ion-color-primary值保持一致。在这里此属性不能使用变量，或者无法编译;*/
$accent: #004185;
$editor-value-text-border: 0px solid;
$calendar-date-font-size: var(--tec-font-size);
$tab-nrml-font-size: var(--tec-font-size-btn);
$listview-font-size: var(--tec-font-size);
$dialog-content-font-size: var(--tec-font-size);
$splitpane-font-size: var(--tec-font-size);
$grid-header-border-color: var(--tec-border-color);
$grid-cell-border-color: var(--tec-border-color);
$tbar-btn-family: var(--ion-font-family);
$tbar-default-font: var(--ion-color-medium);
$tooltip-font-size: var(--tec-font-size);
// syncfusion default control style
@import 'ej2-base/styles/material.scss';
@import 'ej2-icons/styles/material.scss';
@import 'ej2-buttons/styles/material.scss';
@import 'ej2-splitbuttons/styles/material.scss';
@import 'ej2-inputs/styles/material.scss';
@import 'ej2-lists/styles/material.scss';
@import 'ej2-navigations/styles/material.scss';
@import 'ej2-popups/styles/material.scss';
@import 'ej2-richtexteditor/styles/material.scss';
@import 'ej2-calendars/styles/material.scss';
@import 'ej2-angular-calendars/styles/material.scss';
@import 'ej2-grids/styles/material.scss';
@import 'ej2-layouts/styles/material.scss';
@import 'ej2-angular-inputs/styles/material.scss';
@import 'ej2-angular-navigations/styles/material.scss';
@import 'ej2-angular-dropdowns/styles/material.scss';
@import 'ej2-angular-navigations/styles/material.scss';
@import 'ej2-notifications/styles/material.scss';
@import "ej2-angular-lists/styles/material.scss";
@import 'ej2-treegrid/styles/material.scss';
@import 'ej2-calendars/styles/material.scss';
@import 'ej2-angular-calendars/styles/material.scss';
@import 'ej2-angular-layouts/styles/material.scss';
@import 'ej2-angular-kanban/styles/material.scss';
// custom syncfusion control style
@import './app/@core/control/input/textbox/textbox.global.scss';
@import './app/@core/control/searchbar/searchbar.global.scss';
@import "./app/@core/control/input/inplace-editor/inplace-editor.global.scss";
@import './app/@core/control/grids/grid.global.scss';
@import './app/@core/control/grids/treegrid.global.scss';
@import './app/@core/control/dialog/dialog.global.scss';
@import './app/@core/control/notifications/toast/toast.global.scss';
@import './app/@core/control/tabpage/tabpage.global.scss';
@import './app/@core/control/kanban/kanban.global.scss';
@import './app/@core/control/button/button.global.scss';
@import './app/@core/control/tooltip/tooltip.global.scss';
@import './app/@core/control/avatar/avatar.global.scss';
@import "./app/@core/control/master-header/master-header-global.scss";
@import "./app/@core/control/group/group.global.scss";
@import "./app/@core/control/treeview/treeview.global.scss";
@import './app/@core/control/splitter/splitter.global.scss';
