Skip to main content

主题

例子#

基本用法#

import { Window, Button, ThemeImage, ThemePredefined_Dark } from 'ave-ui';
export interface IThemeManager {    theme: ThemeImage;    themeDark: ThemePredefined_Dark;}
export function main(window: Window, themeManager: IThemeManager) {    const button = new Button(window);    button.SetText('Toggling Themes');
    let isDark = false;    button.OnClick((sender) => {        if (!isDark) {            themeManager.themeDark.SetStyle(themeManager.theme, 0); // 切换为暗色主题        } else {            themeManager.theme.ResetTheme(); // 重置,切换成明亮主题        }        isDark = !isDark;    });
    const container = getControlDemoContainer(window);    container.ControlAdd(button).SetGrid(1, 1);    window.SetContent(container);}

这个例子演示了如何切换主题,各组件的明/暗主题是内置的,只需要整体切换即可:

toggle theme

其中的themeManager是这样创建的:

export function run(main: Function) {    // ...    const theme = new ThemeImage();    if (!theme) process.exit(-1);
    cpWindow.Theme = theme;    globalThis.theme = theme; // 避免垃圾回收
    const themeDark = new ThemePredefined_Dark();    globalThis.themeDark = themeDark; // 避免垃圾回收
    const window = new Window(cpWindow);    globalThis.window = window;
    window.OnCreateContent((sender) => {        const themeManager = { theme, themeDark };        main(window, themeManager);        return true;    });    // ...}

API#

export interface IThemePredefined_Dark {    SetStyle(theme: IThemeImage, nStyle: number): void;}
export interface IThemeImage {    ResetTheme(): void;}