](./preview/monochrome-dark.png) |
| Monochrome Light | [
](./preview/monochrome-light.png) |
| Monochrome Dark Subtle | [
](./preview/monochrome-dark-subtle.png) |
| Monochrome Light Subtle | [
](./preview/monochrome-light-subtle.png) |
| Monochrome Dark Amplified | [
](./preview/monochrome-dark-amplified.png) |
| Monochrome Light Amplified | [
](./preview/monochrome-light-amplified.png) |
| Monochrome Dark Cool Gray | [
](./preview/monochrome-dark-cool-gray.png) |
| Monochrome Light Cool Gray | [
](./preview/monochrome-light-cool-gray.png) |
## Base Colors
As one should be expecting from a _monochromatic_ color scheme, there isn't much of them. There is just **Background** and **Foreground**, rest of the color scheme generated by tweaking the alpha channel of the **Foreground**.
| Name | Foreground | Background |
| --------------: | :--------: | :--------: |
| Dark | #EBEBEB | #101010 |
| Light | #101010 | #EBEBEB |
| Dark Subtle | #F1F5F9 | #0A1219 |
| Light Subtle | #0A1219 | #F1F5F9 |
| Dark Amplified | #FFFFFF | #000000 |
| Light Amplified | #000000 | #FFFFFF |
| Dark Cool Gray | #111827 | #F9FAFB |
| Light Cool Gray | #F9FAFB | #111827 |
## Fine Tunings
With the help of the new generator script, you can easily modify an existing color scheme or create a new one.
As an example, let's say you want to increase the overall readability of the `monochrome-dark`, in order to do that, head over the `src/themes.js` file and find the theme definition of the scheme that you want to modify, then append the `amplifier: factor` line to the theme definition like in the example below, this will modify the **foreground multipliers** by the given amount.
```javascript
theme({
name: "monochrome-dark",
background: "#101010",
foreground: "#EBEBEB",
amplifier: 1.5,
}),
```
You can also override theme definitions either with a **foreground multiplier** or a color like in the example below.
```javascript
theme({
name: "monochrome-dark",
background: "#101010",
foreground: "#EBEBEB",
override: {
color: {
"badge.background": 1,
"badge.foreground": 0,
"editorLineNumber.foreground": 0.10196078431372549,
"button.background": "#FF0000",
}
}
}),
```
Run the script below to automatically generate the themes on file modifications.
```shell
$ pnpm run start
```
Run the script below to build themes.
```shell
$ pnpm run build
```
## Suggested Settings
You can apply the settings below for a minimalist layout that fits well into the monochromatic screen.
```json
{
"breadcrumbs.enabled": false,
"breadcrumbs.icons": false,
"editor.colorDecorators": false,
"editor.cursorBlinking": "solid",
"editor.cursorStyle": "block",
"editor.find.addExtraSpaceOnTop": false,
"editor.fontFamily": "'IBM Plex Mono', monospace",
"editor.fontSize": 16,
"editor.links": false,
"editor.minimap.enabled": false,
"editor.occurrencesHighlight": false,
"editor.renderLineHighlight": "all",
"editor.renderWhitespace": "none",
"editor.roundedSelection": false,
"editor.scrollbar.horizontal": "visible",
"editor.scrollbar.vertical": "visible",
"editor.selectionHighlight": false,
"editor.showFoldingControls": "always",
"terminal.integrated.fontFamily": "'IBM Plex Mono', monospace",
"terminal.integrated.fontWeight": "300",
"workbench.editor.showIcons": false,
"workbench.editor.tabCloseButton": "off",
"workbench.iconTheme": null,
"workbench.tree.indent": 14,
"workbench.tree.renderIndentGuides": "none"
}
```
================================================
FILE: package.json
================================================
{
"name": "monochrome",
"displayName": "Monochrome",
"description": "Monochromatic theme collection, for those who seeks.",
"publisher": "anotherglitchinthematrix",
"version": "2.4.3",
"license": "MIT",
"icon": "icon.png",
"galleryBanner": {
"color": "#1a1a1a",
"theme": "dark"
},
"author": {
"name": "Ali Can YILDIZ",
"email": "anotherglitchinthematrix@gmail.com"
},
"repository": {
"type": "git",
"url": "https://github.com/anotherglitchinthematrix/monochrome.git"
},
"bugs": {
"url": "https://github.com/anotherglitchinthematrix/monochrome/issues"
},
"engines": {
"vscode": "^1.43.0"
},
"categories": [
"Themes"
],
"keywords": [
"theme",
"light",
"dark",
"monochrome",
"minimal",
"minimalist",
"subtle"
],
"contributes": {
"themes": [
{
"label": "Monochrome Dark",
"uiTheme": "vs-dark",
"path": "./theme/monochrome-dark.json"
},
{
"label": "Monochrome Light",
"uiTheme": "vs",
"path": "./theme/monochrome-light.json"
},
{
"label": "Monochrome Dark Subtle",
"uiTheme": "vs-dark",
"path": "./theme/monochrome-dark-subtle.json"
},
{
"label": "Monochrome Light Subtle",
"uiTheme": "vs",
"path": "./theme/monochrome-light-subtle.json"
},
{
"label": "Monochrome Dark Amplified",
"uiTheme": "vs-dark",
"path": "./theme/monochrome-dark-amplified.json"
},
{
"label": "Monochrome Light Amplified",
"uiTheme": "vs",
"path": "./theme/monochrome-light-amplified.json"
},
{
"label": "Monochrome Dark Cool Gray",
"uiTheme": "vs-dark",
"path": "./theme/monochrome-dark-cool-gray.json"
},
{
"label": "Monochrome Light Cool Gray",
"uiTheme": "vs",
"path": "./theme/monochrome-light-cool-gray.json"
}
]
},
"devDependencies": {
"chroma-js": "^2.1.0",
"lodash.merge": "^4.6.2",
"nodemon": "^2.0.9"
},
"scripts": {
"start": "nodemon --watch src src/index.js",
"build": "node src/index.js"
}
}
================================================
FILE: preview/.gitkeep
================================================
================================================
FILE: src/base.js
================================================
/**
* Defines the base color scheme.
*
* @return {*} Copy of the base color scheme.
*/
const base = () => {
return {
colors: {
'activityBar.activeBorder': 0,
'activityBar.background': 0,
'activityBar.border': 0.0392156862745098,
'activityBar.foreground': 0.7490196078431373,
'activityBar.inactiveForeground': 0.23921568627450981,
'activityBarBadge.background': 0.3764705882352941,
'badge.background': 0.10196078431372549,
'badge.foreground': 0.7490196078431373,
'button.background': 0.09411764705882353,
'button.hoverBackground': 0.12156862745098039,
'checkbox.border': 0.0392156862745098,
'dart.closingLabels': 0.0784313725490196,
'debugIcon.breakpointCurrentStackframeForeground': 0.5686274509803921,
'debugIcon.breakpointDisabledForeground': 0.5686274509803921,
'debugIcon.breakpointForeground': 0.5686274509803921,
'debugIcon.breakpointStackframeForeground': 0.5686274509803921,
'debugIcon.breakpointUnverifiedForeground': 0.5686274509803921,
'debugIcon.continueForeground': 0.5686274509803921,
'debugIcon.disconnectForeground': 0.5686274509803921,
'debugIcon.pauseForeground': 0.5686274509803921,
'debugIcon.restartForeground': 0.5686274509803921,
'debugIcon.startForeground': 0.5686274509803921,
'debugIcon.stepBackForeground': 0.5686274509803921,
'debugIcon.stepIntoForeground': 0.5686274509803921,
'debugIcon.stepOutForeground': 0.5686274509803921,
'debugIcon.stepOverForeground': 0.5686274509803921,
'debugIcon.stopForeground': 0.5686274509803921,
'debugToolBar.background': 0,
'dropdown.background': 0,
'dropdown.foreground': 0.5686274509803921,
'editor.background': 0,
'editor.findMatchBackground': 0,
'editor.findMatchBorder': 0.5019607843137255,
'editor.findMatchHighlightBackground': 0,
'editor.findMatchHighlightBorder': 0.23921568627450981,
'editor.foldBackground': 0,
'editor.foreground': 0.7019607843137254,
'editor.hoverHighlightBackground': 0.058823529411764705,
'editor.lineHighlightBackground': 0.025,
'editor.selectionBackground': 0.058823529411764705,
'editorBracketMatch.background': 0,
'editorBracketMatch.border': 0.23921568627450981,
'editorCursor.foreground': 0.7019607843137254,
'editorError.foreground': 0.3607843137254902,
'editorGroup.border': 0.0392156862745098,
'editorGroupHeader.tabsBackground': 0,
'editorGroupHeader.tabsBorder': 0.0392156862745098,
'editorIndentGuide.activeBackground': 0.24,
'editorIndentGuide.background': 0.08,
'editorInfo.foreground': 0.3607843137254902,
'editorLightBulb.foreground': 0.5686274509803921,
'editorLineNumber.activeForeground': 0.25882352941176473,
'editorLineNumber.foreground': 0.10196078431372549,
'editorLink.activeForeground': 0.7490196078431373,
'editorOverviewRuler.border': 0.0392156862745098,
'editorRuler.foreground': 0.08,
'editorSuggestWidget.foreground': 0.3764705882352941,
'editorSuggestWidget.highlightForeground': 0.7490196078431373,
'editorWarning.foreground': 0.3607843137254902,
'editorWhitespace.foreground': 0.10196078431372549,
'editorWidget.background': 0,
'editorHoverWidget.statusBarBackground': 0,
'focusBorder': 0,
'gitDecoration.ignoredResourceForeground': 0.154,
'gitDecoration.addedResourceForeground': 0.752,
'gitDecoration.modifiedResourceForeground': 0.752,
'gitDecoration.deletedResourceForeground': 0.3764705882352941,
'gitDecoration.untrackedResourceForeground': 0.752,
'gitDecoration.conflictingResourceForeground': 0.752,
'gitDecoration.submoduleResourceForeground': 0.3764705882352941,
'icon.foreground': 0.2196078431372549,
'input.background': 0,
'input.border': 0,
'input.foreground': 0.5686274509803921,
'list.activeSelectionBackground': 0.0392156862745098,
'list.activeSelectionForeground': 0.7490196078431373,
'list.filterMatchBackground': 0.10196078431372549,
'list.filterMatchBorder': 0,
'list.focusBackground': 0.0392156862745098,
'list.highlightForeground': 0.6,
'list.hoverBackground': 0,
'list.inactiveSelectionBackground': 0,
'list.inactiveSelectionForeground': 0.7490196078431373,
'listFilterWidget.background': 0,
'listFilterWidget.outline': 0.23921568627450981,
'menu.background': 0,
'menu.foreground': 0.5686274509803921,
'menubar.selectionBackground': 0.0392156862745098,
'panel.border': 0.0392156862745098,
'panelTitle.activeBorder': 0,
'panelTitle.activeForeground': 0.7490196078431373,
'panelTitle.inactiveForeground': 0.23921568627450981,
'peekView.border': 0.2196078431372549,
'peekViewEditor.background': 0,
'peekViewEditor.matchHighlightBackground': 0,
'peekViewEditor.matchHighlightBorder': 0.23921568627450981,
'peekViewEditorGutter.background': 0,
'peekViewResult.background': 0.023529411764705882,
'peekViewResult.fileForeground': 0.6,
'peekViewResult.lineForeground': 0.23921568627450981,
'peekViewResult.matchHighlightBackground': 0.058823529411764705,
'peekViewResult.selectionBackground': 0,
'peekViewResult.selectionForeground': 0.7490196078431373,
'pickerGroup.foreground': 0.615686274509804,
"sash.hoverBorder": 0.058823529411764705,
'scrollbar.shadow': 0,
'scrollbarSlider.activeBackground': 0.058823529411764705,
'scrollbarSlider.background': 0.058823529411764705,
'scrollbarSlider.hoverBackground': 0.058823529411764705,
'settings.checkboxBorder': 0.0392156862745098,
'settings.dropdownBorder': 0.0392156862745098,
'settings.modifiedItemIndicator': 0.2196078431372549,
'settings.textInputBorder': 0.0392156862745098,
'sideBar.background': 0,
'sideBar.border': 0.0392156862745098,
'sideBar.foreground': 0.3764705882352941,
'sideBarSectionHeader.background': 0,
'sideBarSectionHeader.border': 0.0392156862745098,
'statusBar.background': 0,
'statusBar.border': 0.0392156862745098,
'statusBar.debuggingBackground': 0,
'statusBar.debuggingBorder': 0.0392156862745098,
'statusBar.debuggingForeground': 0.5686274509803921,
'statusBar.foreground': 0.5686274509803921,
'statusBar.noFolderBackground': 0,
'statusBar.noFolderBorder': 0.0392156862745098,
'statusBar.noFolderForeground': 0.5686274509803921,
'statusBarItem.activeBackground': 0,
'statusBarItem.hoverBackground': 0,
'symbolIcon.arrayForeground': 0.5686274509803921,
'symbolIcon.booleanForeground': 0.5686274509803921,
'symbolIcon.classForeground': 0.5686274509803921,
'symbolIcon.colorForeground': 0.5686274509803921,
'symbolIcon.constantForeground': 0.5686274509803921,
'symbolIcon.constructorForeground': 0.5686274509803921,
'symbolIcon.enumeratorForeground': 0.5686274509803921,
'symbolIcon.enumeratorMemberForeground': 0.5686274509803921,
'symbolIcon.eventForeground': 0.5686274509803921,
'symbolIcon.fieldForeground': 0.5686274509803921,
'symbolIcon.fileForeground': 0.5686274509803921,
'symbolIcon.folderForeground': 0.5686274509803921,
'symbolIcon.functionForeground': 0.5686274509803921,
'symbolIcon.interfaceForeground': 0.5686274509803921,
'symbolIcon.keyForeground': 0.5686274509803921,
'symbolIcon.keywordForeground': 0.5686274509803921,
'symbolIcon.methodForeground': 0.5686274509803921,
'symbolIcon.moduleForeground': 0.5686274509803921,
'symbolIcon.namespaceForeground': 0.5686274509803921,
'symbolIcon.nullForeground': 0.5686274509803921,
'symbolIcon.numberForeground': 0.5686274509803921,
'symbolIcon.objectForeground': 0.5686274509803921,
'symbolIcon.operatorForeground': 0.5686274509803921,
'symbolIcon.packageForeground': 0.5686274509803921,
'symbolIcon.propertyForeground': 0.5686274509803921,
'symbolIcon.referenceForeground': 0.5686274509803921,
'symbolIcon.snippetForeground': 0.5686274509803921,
'symbolIcon.stringForeground': 0.5686274509803921,
'symbolIcon.structForeground': 0.5686274509803921,
'symbolIcon.textForeground': 0.5686274509803921,
'symbolIcon.typeParameterForeground': 0.5686274509803921,
'symbolIcon.unitForeground': 0.5686274509803921,
'symbolIcon.variableForeground': 0.5686274509803921,
'tab.activeForeground': 0.7490196078431373,
'tab.border': 0,
'tab.inactiveBackground': 0,
'tab.inactiveForeground': 0.23921568627450981,
'terminal.ansiBrightBlack': 0.1,
'terminal.ansiBrightBlue': 0.2,
'terminal.ansiBrightGreen': 0.3,
'terminal.ansiBrightCyan': 0.4,
'terminal.ansiBrightRed': 0.5,
'terminal.ansiBrightMagenta': 0.6,
'terminal.ansiBrightYellow': 0.7,
'terminal.ansiBrightWhite': 1,
'terminal.ansiBlack': 0,
'terminal.ansiBlue': 0.2,
'terminal.ansiGreen': 0.3,
'terminal.ansiCyan': 0.4,
'terminal.ansiRed': 0.5,
'terminal.ansiMagenta': 0.6,
'terminal.ansiYellow': 0.7,
'terminal.ansiWhite': 0.8,
'terminal.background': 0,
'terminal.foreground': 0.6,
'terminalCursor.background': 0,
'terminalCursor.foreground': 0.7019607843137254,
'textLink.activeForeground': 1,
'textLink.foreground': 1,
'textPreformat.foreground': 0.5686274509803921,
'titleBar.activeBackground': 0,
'titleBar.activeForeground': 0.5686274509803921,
'titleBar.border': 0.0392156862745098,
'titleBar.inactiveBackground': 0,
'tree.indentGuidesStroke': 0.0784313725490196,
'window.activeBorder': 0.0392156862745098,
},
tokenColors: [
{
scope: 'variable.parameter.function',
settings: {
foreground: 0.7019607843137254,
},
},
{
scope: 'comment, punctuation.definition.comment',
settings: {
foreground: 0.1803921568627451,
},
},
{
scope:
'punctuation.definition.string, punctuation.definition.variable, punctuation.definition.parameters, punctuation.definition.array',
settings: {
foreground: 0.7019607843137254,
},
},
{
scope: 'none',
settings: {
foreground: 0.7019607843137254,
},
},
{
scope: 'keyword.operator',
settings: {
foreground: 0.7019607843137254,
},
},
{
scope: 'keyword',
settings: {
foreground: 0.4196078431372549,
},
},
{
scope: 'variable',
settings: {
foreground: 0.4392156862745098,
},
},
{
scope:
'entity.name.function, meta.require, support.function.any-method',
settings: {
foreground: 0.3764705882352941,
},
},
{
scope: 'support.class, entity.name.class, entity.name.type.class',
settings: {
foreground: 0.6,
},
},
{
scope: 'meta.class',
settings: {
foreground: 0.9607843137254902,
},
},
{
scope: 'keyword.other.special-method',
settings: {
foreground: 0.3764705882352941,
},
},
{
scope: 'storage',
settings: {
foreground: 0.4196078431372549,
},
},
{
scope: 'support.function',
settings: {
foreground: 0.5019607843137255,
},
},
{
scope: 'string, constant.other.symbol, entity.other.inherited-class',
settings: {
foreground: 0.5411764705882353,
},
},
{
scope: 'constant.numeric',
settings: {
foreground: 0.5686274509803921,
},
},
{
scope: 'none',
settings: {
foreground: 0.5686274509803921,
},
},
{
scope: 'none',
settings: {
foreground: 0.5686274509803921,
},
},
{
scope: 'constant',
settings: {
foreground: 0.5686274509803921,
},
},
{
scope: 'entity.name.tag',
settings: {
foreground: 0.4392156862745098,
},
},
{
scope: 'entity.other.attribute-name',
settings: {
foreground: 0.5686274509803921,
},
},
{
scope: 'entity.other.attribute-name.id, punctuation.definition.entity',
settings: {
foreground: 0.3764705882352941,
},
},
{
scope: 'meta.selector',
settings: {
foreground: 0.4196078431372549,
},
},
{
scope: 'none',
settings: {
foreground: 0.5686274509803921,
},
},
{
scope:
'markup.heading punctuation.definition.heading, entity.name.section',
settings: {
foreground: 0.3764705882352941,
fontStyle: '',
},
},
{
scope: 'keyword.other.unit',
settings: {
foreground: 0.5686274509803921,
},
},
{
scope: 'markup.bold, punctuation.definition.bold',
settings: {
foreground: 0.6,
fontStyle: 'bold',
},
},
{
scope: 'markup.italic, punctuation.definition.italic',
settings: {
foreground: 0.4196078431372549,
fontStyle: 'italic',
},
},
{
scope: 'markup.raw.inline',
settings: {
foreground: 0.5411764705882353,
},
},
{
scope: 'string.other.link, punctuation.definition.string.end.markdown',
settings: {
foreground: 0.4392156862745098,
},
},
{
scope: 'meta.link',
settings: {
foreground: 0.5686274509803921,
},
},
{
scope: 'markup.list',
settings: {
foreground: 0.4392156862745098,
},
},
{
scope: 'markup.quote',
settings: {
foreground: 0.5686274509803921,
},
},
{
scope: 'meta.separator',
settings: {
foreground: 0.7019607843137254,
},
},
{
scope: 'markup.inserted',
settings: {
foreground: 0.5411764705882353,
},
},
{
scope: 'markup.deleted',
settings: {
foreground: 0.4392156862745098,
},
},
{
scope: 'markup.changed',
settings: {
foreground: 0.4196078431372549,
},
},
{
scope: 'constant.other.color',
settings: {
foreground: 0.5019607843137255,
},
},
{
scope: 'string.regexp',
settings: {
foreground: 0.5019607843137255,
},
},
{
scope: 'constant.character.escape',
settings: {
foreground: 0.5019607843137255,
},
},
{
scope: 'punctuation.section.embedded, variable.interpolation',
settings: {
foreground: 0.4196078431372549,
},
},
{
scope: 'invalid.illegal',
settings: {
foreground: 0.9607843137254902,
},
},
{
scope: 'invalid.broken',
settings: {
foreground: 0,
},
},
{
scope: 'invalid.deprecated',
settings: {
foreground: 0.9607843137254902,
},
},
{
scope: 'invalid.unimplemented',
settings: {
foreground: 0.9607843137254902,
},
},
],
};
};
module.exports = base;
================================================
FILE: src/exceptions.js
================================================
// Exception list to preserve transparency of the scheme properties.
const exceptions = [
'scrollbarSlider.activeBackground',
'scrollbarSlider.background',
'scrollbarSlider.hoverBackground',
];
module.exports = exceptions;
================================================
FILE: src/index.js
================================================
const fs = require('fs').promises;
const themes = require('./themes');
/**
* Theme builder.
*
* Generates the given theme and puts it's content into the theme file.
*
* @param {*} t Generated theme data.
*/
const builder = (t) => fs.writeFile(file(t.name), JSON.stringify(t));
/**
* Pipes the defined themes into builder.
*/
const build = () => Promise.all(themes.map(builder));
/**
* Error handler.
*/
const error = () => process.exit(1);
/**
* File name utility.
*
* @param {*} n File name.
*/
const file = (n) => `./theme/${n}.json`;
// Create the output folder and build the defined themes.
fs.mkdir('./theme', { recursive: true }).then(build).catch(error);
================================================
FILE: src/scheme.js
================================================
const merge = require('lodash.merge');
const chroma = require('chroma-js');
const transform = require('./transform');
const base = require('./base');
const exceptions = require('./exceptions');
/**
* Generates a monochrome color scheme.
*
* @param background Background color of the theme.
* @param foreground Foreground color of the theme.
* @param override Overrides for default scheme values.
* @param amplifier Overall transparency multiplier.
* @return {*} Created color scheme.
*/
const scheme = ({ background, foreground, override, amplifier }) => {
// Construct the base values.
const draft = Object.assign(
{
background: background,
foreground: foreground,
},
base()
);
// Merge with the generated warning scheme;
merge(draft, warningScheme(foreground));
// Apply overrides.
if (override != null) merge(draft, override);
// Amplify the transparency multipliers.
if (amplifier != 1) transform(draft, test, (_, v) => amplify(v, amplifier));
// Apply color transformation.
transform(draft, test, (k, v) => colorize(k, v, background, foreground));
// Return the generated scheme.
return draft;
};
/**
* Defines a test for the transform functions.
*
* Any value that satisfies the test will be processed.
*
* @param {*} _ Discarded key.
* @param {*} v Value.
*/
const test = (_, v) => typeof v === 'number';
/**
* Modifies the transparency value by the given factor.
*
* @param {*} t Transparency value.
* @param {*} a Amplifier value.
*/
const amplify = (t, a) => Math.min(Math.max(0, t * a), 1);
/**
* Colorization transformation.
*
* Determinates the color generation strategy and applies it.
*
* @param {*} k Key.
* @param {*} v Value.
* @param {*} b Background color.
* @param {*} f Foreground color.
* @returns RRGGBBAA | RRGGBB color in the hex format.
*/
const colorize = (k, v, b, f) => colorant(k).call(this, b, f, v).hex();
/**
* Determinates the color generation strategy by looking into exceptions list.
*
* @param {*} k Key of the property to be checked.
*/
const colorant = (k) => (exceptions.some((e) => e === k) ? RGBA : RGB);
/**
* RRGGBBAA Color generation strategy.
*
* @param {*} _ Discarded background color.
* @param {*} f Foreground color.
* @param {*} v Transparency value.
* @returns RRGGBBAA color.
*/
const RGBA = (_, f, v) => chroma(f).alpha(v);
/**
* RRGGBB Color generation strategy.
*
* @param {*} b Background color.
* @param {*} f Foreground color.
* @param {*} v Blend value.
* @returns RRGGBB color.
*/
const RGB = (b, f, v) => chroma.scale([b, f])(v);
/**
* Defines the warning colors.
*
* @param {*} color The primary color to calculate the warning colors.
* @return {*} Warning theme data.
*/
const warningScheme = (color) => {
// Calculate the error color.
const error = chroma.scale([color, 'red']).mode('lab')(0.75).hex();
// Calculate the warning color.
const warning = chroma.scale([color, 'orange']).mode('lab')(0.75).hex();
return {
colors: {
'listFilterWidget.noMatchesOutline': error,
'list.errorForeground': error,
'list.warningForeground': warning,
},
};
};
module.exports = scheme;
================================================
FILE: src/theme.js
================================================
const scheme = require('./scheme');
const chroma = require('chroma-js');
/**
* Generates a monochrome theme.
*
* @param background Background color of the theme.
* @param foreground Foreground color of the theme.
* @param override Overrides for default scheme values.
* @param amplifier Overall transparency multiplier.
* @return {*} Created theme.
*/
const theme = ({ name, background, foreground, override, amplifier }) => {
return Object.assign(
{ name: name, type: type(background) },
scheme({
background: background,
foreground: foreground,
override: override,
amplifier: amplifier,
})
);
};
/**
* Determinates the type of the theme according to background color.
*
* @param {*} color background color.
*/
const type = (color) => (chroma(color).luminance() > 0.5 ? 'light' : 'dark');
module.exports = theme;
================================================
FILE: src/themes.js
================================================
const theme = require('./theme');
// Pre-defined monochrome themes.
const themes = [
theme({
name: 'monochrome-dark',
background: '#101010',
foreground: '#EBEBEB',
}),
theme({
name: 'monochrome-light',
background: '#EBEBEB',
foreground: '#101010',
}),
theme({
name: 'monochrome-dark-subtle',
background: '#0A1219',
foreground: '#F1F5F9',
}),
theme({
name: 'monochrome-light-subtle',
background: '#F1F5F9',
foreground: '#0A1219',
}),
theme({
name: 'monochrome-dark-amplified',
background: '#000000',
foreground: '#FFFFFF',
}),
theme({
name: 'monochrome-light-amplified',
background: '#FFFFFF',
foreground: '#000000',
}),
theme({
name: 'monochrome-dark-cool-gray',
background: '#111827',
foreground: '#F9FAFB',
}),
theme({
name: 'monochrome-light-cool-gray',
background: '#F9FAFB',
foreground: '#111827',
}),
];
module.exports = themes;
================================================
FILE: src/transform.js
================================================
/**
* Deep object transformer.
*
* @param {*} o The object that the transformation function will be applied.
* @param {*} t The test function for the property, takes key and value.
* @param {*} f The transformation function to be applied.
* @return {*} Transform applied object.
*/
const transform = function (o, t, f) {
for (var k in o) {
if (o[k] !== null && typeof o[k] === 'object') {
o[k] = transform(o[k], t, f);
continue;
}
if (typeof t === 'function' && !t.call(this, k, o[k])) continue;
o[k] = f.apply(this, [k, o[k]]) || o[k];
}
return o;
};
module.exports = transform;