chore: Adds theme variants command to "Material Theme Settings"
This commit is contained in:
parent
aabf514ac9
commit
16029bade8
11 changed files with 144 additions and 103 deletions
|
@ -3,19 +3,15 @@ import * as gulp from 'gulp';
|
|||
import * as path from 'path';
|
||||
|
||||
import { CHARSET } from "../../extensions/consts/files";
|
||||
import { IGenericObject } from "../../extensions/interfaces/igeneric-object";
|
||||
import { IPackageJSON } from "../../extensions/interfaces/ipackage.json";
|
||||
import { IThemeIconsVariants } from "../interfaces/itheme-icons-variants";
|
||||
import PATHS from '../../extensions/consts/paths'
|
||||
import { getDefaultValues } from "../../extensions/helpers/fs";
|
||||
import { IDefaultsThemeVariantColours } from "../../extensions/interfaces/idefaults";
|
||||
|
||||
const PACKAGE_JSON: IPackageJSON = require(path.join(process.cwd(), './package.json'));
|
||||
|
||||
let variants: IGenericObject<string> = {
|
||||
Darker: '#424242',
|
||||
Default: '#4A616C',
|
||||
Light: '#90A4AE',
|
||||
Palenight: '#4E5579'
|
||||
}
|
||||
let variants: IDefaultsThemeVariantColours = getDefaultValues().themeVariantsColours;
|
||||
|
||||
function writeIconVariant(filepath: string, destpath: string, colour: string): void {
|
||||
let regexp = new RegExp('.st0\{fill:(#[a-zA-Z0-9]{3,6})')
|
||||
|
@ -37,14 +33,15 @@ export default gulp.task('build:icons.variants', callback => {
|
|||
let basepath: string = path.join(process.cwd(), contribute.path);
|
||||
let basetheme: IThemeIconsVariants = require(basepath);
|
||||
let theme: IThemeIconsVariants = JSON.parse(JSON.stringify(basetheme));
|
||||
let variant = variants[variantName];
|
||||
|
||||
theme.iconDefinitions._folder_dark.iconPath = theme.iconDefinitions._folder_dark.iconPath.replace('.svg', `${ variantName }.svg`);
|
||||
theme.iconDefinitions._file_folder.iconPath = theme.iconDefinitions._file_folder.iconPath.replace('.svg', `${ variantName }.svg`);
|
||||
theme.iconDefinitions["_file_folder-build"].iconPath = theme.iconDefinitions["_file_folder-build"].iconPath.replace('.svg', `${ variantName }.svg`);
|
||||
|
||||
writeIconVariant(basetheme.iconDefinitions._folder_dark.iconPath, theme.iconDefinitions._folder_dark.iconPath, variants[variantName]);
|
||||
writeIconVariant(basetheme.iconDefinitions._file_folder.iconPath, theme.iconDefinitions._file_folder.iconPath, variants[variantName]);
|
||||
writeIconVariant(basetheme.iconDefinitions["_file_folder-build"].iconPath, theme.iconDefinitions["_file_folder-build"].iconPath, variants[variantName]);
|
||||
writeIconVariant(basetheme.iconDefinitions._folder_dark.iconPath, theme.iconDefinitions._folder_dark.iconPath, variant);
|
||||
writeIconVariant(basetheme.iconDefinitions._file_folder.iconPath, theme.iconDefinitions._file_folder.iconPath, variant);
|
||||
writeIconVariant(basetheme.iconDefinitions["_file_folder-build"].iconPath, theme.iconDefinitions["_file_folder-build"].iconPath, variant);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
@ -3,7 +3,9 @@ import * as vscode from 'vscode';
|
|||
import {IAccentCustomProperty} from '../../interfaces/iaccent-custom-property';
|
||||
import { IDefaults } from "../../interfaces/idefaults";
|
||||
import {IGenericObject} from '../../interfaces/igeneric-object';
|
||||
import { updateAccent } from "../../helpers/settings";
|
||||
import { updateAccent, isMaterialTheme, isMaterialThemeIcons } from "../../helpers/settings";
|
||||
import { getCurrentThemeID, getCurrentThemeIconsID, askForWindowReload } from "../../helpers/vscode";
|
||||
import { THEME_ICONS } from "../theme-icons/index";
|
||||
|
||||
const REGEXP_HEX: RegExp = /^#([0-9A-F]{6}|[0-9A-F]{8})$/i;
|
||||
|
||||
|
@ -90,10 +92,14 @@ function isValidColour(colour: string | null | undefined): boolean {
|
|||
*/
|
||||
function setWorkbenchOptions(accentSelected: string | undefined, config: any): void {
|
||||
vscode.workspace.getConfiguration().update('workbench.colorCustomizations', config, true).then(() => {
|
||||
// let message: string = accentSelected !== undefined ? `${ accentSelected } set` : `Accents removed`;
|
||||
let themeID = getCurrentThemeID()
|
||||
let themeIconsID = getCurrentThemeIconsID()
|
||||
|
||||
updateAccent(accentSelected);
|
||||
// vscode.window.showInformationMessage(message).then(() => {
|
||||
// });
|
||||
|
||||
if (isMaterialTheme(themeID) && isMaterialThemeIcons(themeIconsID)) {
|
||||
THEME_ICONS().then(() => askForWindowReload());
|
||||
}
|
||||
}, reason => {
|
||||
vscode.window.showErrorMessage(reason);
|
||||
});
|
||||
|
@ -105,10 +111,8 @@ function setWorkbenchOptions(accentSelected: string | undefined, config: any): v
|
|||
export const THEME_ACCENTS_SETTER = () => {
|
||||
// shows the quick pick dropdown
|
||||
let options: string[] = Object.keys(themeConfigCommon.accents);
|
||||
// let customColourKey: string = 'Custom colour';
|
||||
let purgeColourKey: string = 'Remove accents';
|
||||
|
||||
// options.push(customColourKey);
|
||||
options.push(purgeColourKey);
|
||||
|
||||
vscode.window.showQuickPick(options).then(accentSelected => {
|
||||
|
@ -117,19 +121,6 @@ export const THEME_ACCENTS_SETTER = () => {
|
|||
let config: any = vscode.workspace.getConfiguration().get('workbench.colorCustomizations');
|
||||
|
||||
switch(accentSelected) {
|
||||
// case customColourKey:
|
||||
// vscode.window.showInputBox().then(colourCode => {
|
||||
// if (colourCode === null || colourCode === undefined) return;
|
||||
|
||||
// if (colourCode && !isValidColour(colourCode)) {
|
||||
// vscode.window.showWarningMessage('Invalid colour set, aborting.');
|
||||
// return;
|
||||
// }
|
||||
|
||||
// assignColorCustomizations(colourCode, config);
|
||||
// setWorkbenchOptions(accentSelected, config);
|
||||
// });
|
||||
// break;
|
||||
case purgeColourKey:
|
||||
assignColorCustomizations(undefined, config);
|
||||
setWorkbenchOptions(undefined, config);
|
||||
|
@ -137,7 +128,6 @@ export const THEME_ACCENTS_SETTER = () => {
|
|||
default:
|
||||
assignColorCustomizations(themeConfigCommon.accents[accentSelected], config);
|
||||
setWorkbenchOptions(accentSelected, config);
|
||||
// assignIconTheme(accentSelected);
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
|
|
@ -1,63 +1,55 @@
|
|||
import * as fs from 'fs';
|
||||
import * as vscode from 'vscode';
|
||||
|
||||
import { getAbsolutePath, getDefaultValues, getThemeIconsByContributeID, getThemeIconsContribute } from "../../helpers/fs";
|
||||
import { getCurrentThemeID, getCurrentThemeIconsID, reloadWindow } from "../../helpers/vscode";
|
||||
import { getCustomSettings, isAccent, shouldReloadWindow } from "../../helpers/settings";
|
||||
import { getCurrentThemeIconsID } from "../../helpers/vscode";
|
||||
import { getCustomSettings, isAccent, isMaterialThemeIcons } from "../../helpers/settings";
|
||||
|
||||
import { CHARSET } from "../../consts/files";
|
||||
import { IPackageJSONThemeIcons } from "../../interfaces/ipackage.json";
|
||||
import { IThemeIcons } from "../../interfaces/itheme-icons";
|
||||
|
||||
export const THEME_CHANGE_LISTENER = () => {
|
||||
vscode.workspace.onDidChangeConfiguration(() => {
|
||||
let themeID: string = getCurrentThemeID();
|
||||
let themeIconsID: string = getCurrentThemeIconsID();
|
||||
export const THEME_ICONS = () => {
|
||||
let deferred: any = {};
|
||||
let promise = new Promise((resolve, reject) => {
|
||||
deferred.resolve = resolve;
|
||||
deferred.reject = reject;
|
||||
});
|
||||
let themeIconsID: string = getCurrentThemeIconsID();
|
||||
|
||||
if (themeIconsID && /material-theme/i.test(themeIconsID)) {
|
||||
let customSettings = getCustomSettings();
|
||||
let defaults = getDefaultValues();
|
||||
let accentName = customSettings.accent;
|
||||
let variantNames: string[] = themeID.split('Material Theme');
|
||||
let variantName: string = variantNames[1] === undefined ? '' : variantNames[1].trim();
|
||||
let themeContribute: IPackageJSONThemeIcons = getThemeIconsContribute(themeIconsID);
|
||||
let theme: IThemeIcons = getThemeIconsByContributeID(themeIconsID);
|
||||
let themepath: string = getAbsolutePath(themeContribute.path);
|
||||
if (isMaterialThemeIcons(themeIconsID)) {
|
||||
let customSettings = getCustomSettings();
|
||||
let defaults = getDefaultValues();
|
||||
let accentName = customSettings.accent;
|
||||
let variantName: string = customSettings.themeColours === undefined ? '' : customSettings.themeColours;
|
||||
let themeContribute: IPackageJSONThemeIcons = getThemeIconsContribute(themeIconsID);
|
||||
let theme: IThemeIcons = getThemeIconsByContributeID(themeIconsID);
|
||||
let themepath: string = getAbsolutePath(themeContribute.path);
|
||||
|
||||
if (isAccent(accentName, defaults)) {
|
||||
let _accentName = accentName.replace(/\s+/, '-');
|
||||
theme.iconDefinitions._folder_open.iconPath = defaults.icons.theme.iconDefinitions._folder_open.iconPath.replace('.svg', `.accent.${ _accentName }.svg`);
|
||||
theme.iconDefinitions._folder_open_build.iconPath = defaults.icons.theme.iconDefinitions._folder_open_build.iconPath.replace('.svg', `.accent.${ _accentName }.svg`);
|
||||
} else {
|
||||
theme.iconDefinitions._folder_open.iconPath = defaults.icons.theme.iconDefinitions._folder_open.iconPath;
|
||||
theme.iconDefinitions._folder_open_build.iconPath = defaults.icons.theme.iconDefinitions._folder_open_build.iconPath;
|
||||
if (isAccent(accentName, defaults)) {
|
||||
let _accentName = accentName.replace(/\s+/, '-');
|
||||
theme.iconDefinitions._folder_open.iconPath = defaults.icons.theme.iconDefinitions._folder_open.iconPath.replace('.svg', `.accent.${ _accentName }.svg`);
|
||||
theme.iconDefinitions._folder_open_build.iconPath = defaults.icons.theme.iconDefinitions._folder_open_build.iconPath.replace('.svg', `.accent.${ _accentName }.svg`);
|
||||
} else {
|
||||
theme.iconDefinitions._folder_open.iconPath = defaults.icons.theme.iconDefinitions._folder_open.iconPath;
|
||||
theme.iconDefinitions._folder_open_build.iconPath = defaults.icons.theme.iconDefinitions._folder_open_build.iconPath;
|
||||
}
|
||||
|
||||
theme.iconDefinitions._folder_dark.iconPath = defaults.icons.theme.iconDefinitions._folder_dark.iconPath.replace('.svg', `${ variantName }.svg`);
|
||||
theme.iconDefinitions._file_folder.iconPath = defaults.icons.theme.iconDefinitions._file_folder.iconPath.replace('.svg', `${ variantName }.svg`);
|
||||
theme.iconDefinitions._folder_dark_build.iconPath = defaults.icons.theme.iconDefinitions._folder_dark_build.iconPath.replace('.svg', `${ variantName }.svg`);
|
||||
theme.iconDefinitions["_file_folder-build"].iconPath = defaults.icons.theme.iconDefinitions["_file_folder-build"].iconPath.replace('.svg', `${ variantName }.svg`);
|
||||
|
||||
fs.writeFile(themepath, JSON.stringify(theme), { encoding: CHARSET }, (error) => {
|
||||
if (error) {
|
||||
deferred.reject(error);
|
||||
return;
|
||||
}
|
||||
|
||||
theme.iconDefinitions._folder_dark.iconPath = defaults.icons.theme.iconDefinitions._folder_dark.iconPath.replace('.svg', `${ variantName }.svg`);
|
||||
theme.iconDefinitions._file_folder.iconPath = defaults.icons.theme.iconDefinitions._file_folder.iconPath.replace('.svg', `${ variantName }.svg`);
|
||||
theme.iconDefinitions._folder_dark_build.iconPath = defaults.icons.theme.iconDefinitions._folder_dark_build.iconPath.replace('.svg', `${ variantName }.svg`);
|
||||
theme.iconDefinitions["_file_folder-build"].iconPath = defaults.icons.theme.iconDefinitions["_file_folder-build"].iconPath.replace('.svg', `${ variantName }.svg`);
|
||||
deferred.resolve();
|
||||
});
|
||||
} else {
|
||||
deferred.reject();
|
||||
}
|
||||
|
||||
fs.writeFile(themepath, JSON.stringify(theme), { encoding: CHARSET }, (error) => {
|
||||
if (error) {
|
||||
console.trace(error);
|
||||
return;
|
||||
}
|
||||
|
||||
const PROMPT_MESSAGE: string = 'Material Theme requires VS Code reload in order to display icons correctly.';
|
||||
const PROMPT_MESSAGE_CONFIRM: string = 'Ok, reload';
|
||||
const PROMPT_MESSAGE_CANCEL: string = 'I will do it later';
|
||||
|
||||
if (shouldReloadWindow(themeID, themeIconsID)) {
|
||||
vscode.window.showInformationMessage(PROMPT_MESSAGE, PROMPT_MESSAGE_CONFIRM, PROMPT_MESSAGE_CANCEL).then((response) => {
|
||||
if (response === PROMPT_MESSAGE_CONFIRM) {
|
||||
reloadWindow();
|
||||
}
|
||||
}, (error) => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
return promise;
|
||||
}
|
37
extensions/commands/theme-variant/index.ts
Normal file
37
extensions/commands/theme-variant/index.ts
Normal file
|
@ -0,0 +1,37 @@
|
|||
import * as vscode from 'vscode';
|
||||
import { getDefaultValues, getPackageJSON, getAbsolutePath } from "../../helpers/fs";
|
||||
import { setCustomSettings, getCustomSettings } from "../../helpers/settings";
|
||||
import { THEME_ICONS } from "../theme-icons/index";
|
||||
import * as fs from "fs";
|
||||
import { CHARSET } from "../../consts/files";
|
||||
import { reloadWindow } from "../../helpers/vscode";
|
||||
|
||||
export const THEME_VARIANT = () => {
|
||||
let defaults = getDefaultValues();
|
||||
let options: string[] = Object.keys(defaults.themeVariants);
|
||||
let packageJSON = getPackageJSON();
|
||||
|
||||
options = options.filter(i => i !== packageJSON.contributes.themes[0].path);
|
||||
|
||||
vscode.window.showQuickPick(options).then((response: string) => {
|
||||
let customSettings = getCustomSettings();
|
||||
let themepath: string = defaults.themeVariants[response];
|
||||
let themeUITheme: string = defaults.themeVariantsUITheme[response];
|
||||
|
||||
customSettings.themeColours = response;
|
||||
|
||||
packageJSON.contributes.themes[0].path = themepath;
|
||||
packageJSON.contributes.themes[0].uiTheme = themeUITheme;
|
||||
|
||||
fs.writeFile(getAbsolutePath('./package.json'), JSON.stringify(packageJSON, null, 2), { encoding: CHARSET }, (error) => {
|
||||
if (error) {
|
||||
console.trace(error);
|
||||
return;
|
||||
}
|
||||
|
||||
setCustomSettings(customSettings);
|
||||
|
||||
THEME_ICONS().then(() => reloadWindow()).catch(error => console.trace(error));
|
||||
});
|
||||
});
|
||||
}
|
|
@ -42,9 +42,21 @@
|
|||
}
|
||||
},
|
||||
"themeVariants": {
|
||||
"Darker": "./themes/Material-Theme-Darker.json",
|
||||
"Default": "./themes/Material-Theme-Default.json",
|
||||
"Light": "./themes/Material-Theme-Lighter.json",
|
||||
"Palenight": "./themes/Material-Theme-Palenight.json"
|
||||
},
|
||||
"themeVariantsColours": {
|
||||
"Darker": "#424242",
|
||||
"Default": "#4A616C",
|
||||
"Light": "#90A4AE",
|
||||
"Palenight": "#4E5579"
|
||||
},
|
||||
"themeVariantsUITheme": {
|
||||
"Darker": "vs-dark",
|
||||
"Default": "vs-dark",
|
||||
"Light": "vs",
|
||||
"Palenight": "vs-dark"
|
||||
}
|
||||
}
|
|
@ -96,7 +96,7 @@ export function shouldReloadWindow(themeColour: string, themeIcons: string): boo
|
|||
|
||||
let customSettings = getCustomSettings();
|
||||
|
||||
return customSettings.themeColours !== themeColour || customSettings.themeIcons !== themeIcons || customSettings.accent !== customSettings.accentPrevious;
|
||||
return customSettings.accent !== customSettings.accentPrevious;
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -105,7 +105,7 @@ export function shouldReloadWindow(themeColour: string, themeIcons: string): boo
|
|||
* @param {string} accentName
|
||||
*/
|
||||
export function updateAccent(accentName: string): Thenable<void> {
|
||||
let config: IThemeCustomProperties = {};
|
||||
let config: IThemeCustomProperties = getCustomSettings();
|
||||
let prevaccent = getAccent();
|
||||
|
||||
if (prevaccent !== undefined && prevaccent !== accentName) {
|
||||
|
|
|
@ -1,5 +1,20 @@
|
|||
import * as vscode from 'vscode'
|
||||
|
||||
|
||||
export function askForWindowReload(): Thenable<void> {
|
||||
const PROMPT_MESSAGE: string = 'Material Theme requires VS Code reload in order to display icons correctly.';
|
||||
const PROMPT_MESSAGE_CONFIRM: string = 'Ok, reload';
|
||||
const PROMPT_MESSAGE_CANCEL: string = 'I will do it later';
|
||||
|
||||
return vscode.window.showInformationMessage(PROMPT_MESSAGE, PROMPT_MESSAGE_CONFIRM, PROMPT_MESSAGE_CANCEL).then((response) => {
|
||||
if (response === PROMPT_MESSAGE_CONFIRM) {
|
||||
reloadWindow();
|
||||
}
|
||||
}, (error) => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets your current theme ID
|
||||
* @export
|
||||
|
|
|
@ -2,6 +2,8 @@ export interface IDefaults {
|
|||
accents: IAccents;
|
||||
icons: IDefaultsThemeIcons;
|
||||
themeVariants: IDefaultsThemeVariant;
|
||||
themeVariantsColours: IDefaultsThemeVariantColours;
|
||||
themeVariantsUITheme: IDefaultsThemeVariantUITheme;
|
||||
}
|
||||
|
||||
export interface IAccents {
|
||||
|
@ -35,8 +37,17 @@ export interface IDefaultsThemeIcons {
|
|||
}
|
||||
|
||||
export interface IDefaultsThemeVariant {
|
||||
[index: string]: string;
|
||||
Darker: string;
|
||||
Default: string;
|
||||
Light: string;
|
||||
Palenight: string;
|
||||
}
|
||||
|
||||
export interface IDefaultsThemeVariantColours extends IDefaultsThemeVariant {
|
||||
|
||||
}
|
||||
|
||||
export interface IDefaultsThemeVariantUITheme extends IDefaultsThemeVariant {
|
||||
|
||||
}
|
|
@ -2,15 +2,16 @@ import * as vscode from 'vscode';
|
|||
|
||||
import { IGenericObject } from "./interfaces/igeneric-object";
|
||||
import { THEME_ACCENTS_SETTER } from "./commands/accents-setter/index";
|
||||
import { THEME_CHANGE_LISTENER } from "./commands/theme-icons/index";
|
||||
import { THEME_VARIANT } from "./commands/theme-variant/index";
|
||||
|
||||
enum Commands {
|
||||
ACCENTS,
|
||||
COLOR_THEME
|
||||
COLOUR_VARIANT
|
||||
}
|
||||
|
||||
const OPTIONS: IGenericObject<number> = {
|
||||
'Change accent color': Commands.ACCENTS
|
||||
'Change accent color': Commands.ACCENTS,
|
||||
'Change color variant': Commands.COLOUR_VARIANT
|
||||
}
|
||||
|
||||
export function activate(context: vscode.ExtensionContext) {
|
||||
|
@ -23,11 +24,12 @@ export function activate(context: vscode.ExtensionContext) {
|
|||
case Commands.ACCENTS:
|
||||
THEME_ACCENTS_SETTER();
|
||||
break;
|
||||
case Commands.COLOUR_VARIANT:
|
||||
THEME_VARIANT();
|
||||
break;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
THEME_CHANGE_LISTENER();
|
||||
|
||||
context.subscriptions.push(command);
|
||||
}
|
||||
|
|
17
package.json
17
package.json
|
@ -66,22 +66,7 @@
|
|||
{
|
||||
"label": "Material Theme",
|
||||
"uiTheme": "vs-dark",
|
||||
"path": "./themes/Material-Theme-Default.json"
|
||||
},
|
||||
{
|
||||
"label": "Material Theme Darker",
|
||||
"uiTheme": "vs-dark",
|
||||
"path": "./themes/Material-Theme-Darker.json"
|
||||
},
|
||||
{
|
||||
"label": "Material Theme Palenight",
|
||||
"uiTheme": "vs-dark",
|
||||
"path": "./themes/Material-Theme-Palenight.json"
|
||||
},
|
||||
{
|
||||
"label": "Material Theme Lighter",
|
||||
"uiTheme": "vs",
|
||||
"path": "./themes/Material-Theme-Lighter.json"
|
||||
}
|
||||
],
|
||||
"iconThemes": [
|
||||
|
@ -131,4 +116,4 @@
|
|||
"yamljs": "0.3.0",
|
||||
"yargs": "8.0.2"
|
||||
}
|
||||
}
|
||||
}
|
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue