本文整理匯總了TypeScript中@jupyterlab/apputils.ThemeManager類的典型用法代碼示例。如果您正苦於以下問題:TypeScript ThemeManager類的具體用法?TypeScript ThemeManager怎麽用?TypeScript ThemeManager使用的例子?那麽, 這裏精選的類代碼示例或許可以為您提供幫助。
在下文中一共展示了ThemeManager類的8個代碼示例,這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚,您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: ThemeManager
activate: (app: JupyterLab, settingRegistry: ISettingRegistry, splash: ISplashScreen, palette: ICommandPalette | null, mainMenu: IMainMenu | null): IThemeManager => {
const host = app.shell;
const when = app.started;
const commands = app.commands;
const manager = new ThemeManager({
key: themes.id,
host, settingRegistry,
url: app.info.urls.themes,
splash,
when
});
commands.addCommand(CommandIDs.changeTheme, {
label: args => {
const theme = args['theme'] as string;
return args['isPalette'] ? `Use ${theme} Theme` : theme;
},
isToggled: args => args['theme'] === manager.theme,
execute: args => {
if (args['theme'] === manager.theme) {
return;
}
manager.setTheme(args['theme'] as string);
}
});
// If we have a main menu, add the theme manager
// to the settings menu.
if (mainMenu) {
const themeMenu = new Menu({ commands });
themeMenu.title.label = 'JupyterLab Theme';
manager.ready.then(() => {
const command = CommandIDs.changeTheme;
const isPalette = false;
manager.themes.forEach(theme => {
themeMenu.addItem({ command, args: { isPalette, theme } });
});
});
mainMenu.settingsMenu.addGroup([{
type: 'submenu' as Menu.ItemType, submenu: themeMenu
}], 0);
}
// If we have a command palette, add theme switching options to it.
if (palette) {
manager.ready.then(() => {
const category = 'Settings';
const command = CommandIDs.changeTheme;
const isPalette = true;
manager.themes.forEach(theme => {
palette.addItem({ command, args: { isPalette, theme }, category });
});
});
}
return manager;
},
示例2: ThemeManager
activate: (
app: JupyterFrontEnd,
settings: ISettingRegistry,
paths: JupyterFrontEnd.IPaths,
splash: ISplashScreen | null
): IThemeManager => {
const host = app.shell;
const commands = app.commands;
const url = URLExt.join(paths.urls.base, paths.urls.themes);
const key = themes.id;
const manager = new ThemeManager({ key, host, settings, splash, url });
// Keep a synchronously set reference to the current theme,
// since the asynchronous setting of the theme in `changeTheme`
// can lead to an incorrect toggle on the currently used theme.
let currentTheme: string;
// Set data attributes on the application shell for the current theme.
manager.themeChanged.connect((sender, args) => {
currentTheme = args.newValue;
app.shell.dataset.themeLight = String(manager.isLight(currentTheme));
app.shell.dataset.themeName = currentTheme;
if (
app.shell.dataset.themeScrollbars !==
String(manager.themeScrollbars(currentTheme))
) {
app.shell.dataset.themeScrollbars = String(
manager.themeScrollbars(currentTheme)
);
}
commands.notifyCommandChanged(CommandIDs.changeTheme);
});
commands.addCommand(CommandIDs.changeTheme, {
label: args => {
const theme = args['theme'] as string;
return args['isPalette'] ? `Use ${theme} Theme` : theme;
},
isToggled: args => args['theme'] === currentTheme,
execute: args => {
const theme = args['theme'] as string;
if (theme === manager.theme) {
return;
}
return manager.setTheme(theme);
}
});
return manager;
},
示例3: ThemeManager
activate: (
app: JupyterLab,
settings: ISettingRegistry,
splash: ISplashScreen,
palette: ICommandPalette | null,
mainMenu: IMainMenu | null
): IThemeManager => {
const host = app.shell;
const commands = app.commands;
const url = URLExt.join(app.info.urls.base, app.info.urls.themes);
const key = themes.id;
const manager = new ThemeManager({ key, host, settings, splash, url });
// Keep a synchronously set reference to the current theme,
// since the asynchronous setting of the theme in `changeTheme`
// can lead to an incorrect toggle on the currently used theme.
let currentTheme: string;
// Set data attributes on the application shell for the current theme.
manager.themeChanged.connect((sender, args) => {
currentTheme = args.newValue;
app.shell.dataset.themeLight = String(manager.isLight(currentTheme));
app.shell.dataset.themeName = currentTheme;
commands.notifyCommandChanged(CommandIDs.changeTheme);
});
commands.addCommand(CommandIDs.changeTheme, {
label: args => {
const theme = args['theme'] as string;
return args['isPalette'] ? `Use ${theme} Theme` : theme;
},
isToggled: args => args['theme'] === currentTheme,
execute: args => {
const theme = args['theme'] as string;
if (theme === manager.theme) {
return;
}
manager.setTheme(theme);
}
});
// If we have a main menu, add the theme manager to the settings menu.
if (mainMenu) {
const themeMenu = new Menu({ commands });
themeMenu.title.label = 'JupyterLab Theme';
app.restored.then(() => {
const command = CommandIDs.changeTheme;
const isPalette = false;
manager.themes.forEach(theme => {
themeMenu.addItem({ command, args: { isPalette, theme } });
});
});
mainMenu.settingsMenu.addGroup(
[
{
type: 'submenu' as Menu.ItemType,
submenu: themeMenu
}
],
0
);
}
// If we have a command palette, add theme switching options to it.
if (palette) {
app.restored.then(() => {
const category = 'Settings';
const command = CommandIDs.changeTheme;
const isPalette = true;
currentTheme = manager.theme;
manager.themes.forEach(theme => {
palette.addItem({ command, args: { isPalette, theme }, category });
});
});
}
return manager;
},
示例4: String
manager.themeChanged.connect((sender, args) => {
currentTheme = args.newValue;
app.shell.dataset.themeLight = String(manager.isLight(currentTheme));
app.shell.dataset.themeName = currentTheme;
if (
app.shell.dataset.themeScrollbars !==
String(manager.themeScrollbars(currentTheme))
) {
app.shell.dataset.themeScrollbars = String(
manager.themeScrollbars(currentTheme)
);
}
commands.notifyCommandChanged(CommandIDs.changeTheme);
});
示例5:
execute: args => {
const theme = args['theme'] as string;
if (theme === manager.theme) {
return;
}
manager.setTheme(theme);
}
示例6:
execute: args => {
const theme = args['theme'] as string;
if (theme === manager.theme) {
return;
}
currentTheme = theme;
manager.setTheme(theme);
commands.notifyCommandChanged(CommandIDs.changeTheme);
}
示例7:
execute: args => {
if (args['theme'] === manager.theme) {
return;
}
manager.setTheme(args['theme'] as string).then(() => {
// The theme manager only loads new CSS onto the page,
// and anything that has rendered this command's `isToggled`
// state will not have updated when that happens (such as
// the application command palette). Force a refresh of those
// rendered commands.
commands.notifyCommandChanged(CommandIDs.changeTheme);
});
}
示例8:
execute: args => {
if (args['theme'] === manager.theme) {
return;
}
manager.setTheme(args['theme'] as string);
}