archive/vsc-material-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: Adds theme variants command to "Material Theme Settings"

Browse source
This commit is contained in:
octod 2017-07-21 20:20:17 +02:00
parent aabf514ac9
commit 16029bade8
11 changed files with 144 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
.gulp/tasks/icons-variants.ts
View file

@ -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);
});
});

30
extensions/commands/accents-setter/index.ts
View file

@ -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;
}
});

90
extensions/commands/theme-icons/index.ts
View file

@ -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
View 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));
});
});
}

12
extensions/defaults.json
View file

@ -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"
}
}

4
extensions/helpers/settings.ts
View file

@ -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) {

15
extensions/helpers/vscode.ts
View file

@ -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

11
extensions/interfaces/idefaults.ts
View file

@ -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 {
}

12
extensions/material.theme.config.ts
View file

@ -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
View file

@ -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"
}
}
}

2
themes/Material-Theme-Icons.json
View file

File diff suppressed because one or more lines are too long