From 98706aa7d2100e40829583ed61de402cdb41242f Mon Sep 17 00:00:00 2001 From: Juan Campa Date: Tue, 8 Jan 2019 14:52:55 -0500 Subject: [PATCH] Use bg luminance to determine background color --- src/renderer/ColorManager.ts | 18 +++++++++++++++++- src/renderer/Types.ts | 1 + src/renderer/webgl/GlyphRenderer.ts | 8 +++++--- 3 files changed, 23 insertions(+), 4 deletions(-) diff --git a/src/renderer/ColorManager.ts b/src/renderer/ColorManager.ts index 8a463670..05727530 100644 --- a/src/renderer/ColorManager.ts +++ b/src/renderer/ColorManager.ts @@ -103,6 +103,14 @@ export class ColorManager implements IColorManager { }; } + // Coefficients taken from: https://www.w3.org/TR/AERT/#color-contrast + public getLuminance(color: IColor) : number { + const r = color.rgba >> 24 & 0xff; + const g = color.rgba >> 16 & 0xff; + const b = color.rgba >> 8 & 0xff; + return (0.299 * r + 0.587 * g + 0.114 * b) / 255; + } + /** * Sets the terminal's theme. * @param theme The theme to use. If a partial theme is provided then default @@ -113,7 +121,15 @@ export class ColorManager implements IColorManager { this.colors.background = this._parseColor(theme.background, DEFAULT_BACKGROUND); this.colors.cursor = this._parseColor(theme.cursor, DEFAULT_CURSOR, true); this.colors.cursorAccent = this._parseColor(theme.cursorAccent, DEFAULT_CURSOR_ACCENT, true); - this.colors.selection = this._parseColor(theme.selection, DEFAULT_SELECTION, true); + + // HACK: while webgl renderer adds support for selection colors + // this.colors.selection = this._parseColor(theme.selection, DEFAULT_SELECTION, true); + if (this.getLuminance(this.colors.background) > 0.5) { + this.colors.selection = this._parseColor('#000', DEFAULT_SELECTION, true); + } else { + this.colors.selection = this._parseColor('#fff', DEFAULT_SELECTION, true); + } + this.colors.ansi[0] = this._parseColor(theme.black, DEFAULT_ANSI_COLORS[0]); this.colors.ansi[1] = this._parseColor(theme.red, DEFAULT_ANSI_COLORS[1]); this.colors.ansi[2] = this._parseColor(theme.green, DEFAULT_ANSI_COLORS[2]); diff --git a/src/renderer/Types.ts b/src/renderer/Types.ts index f2271f95..c02211f1 100644 --- a/src/renderer/Types.ts +++ b/src/renderer/Types.ts @@ -45,6 +45,7 @@ export interface IRenderer extends IEventEmitter, IDisposable { export interface IColorManager { colors: IColorSet; + getLuminance(color: IColor): number; } export interface IRenderDimensions { diff --git a/src/renderer/webgl/GlyphRenderer.ts b/src/renderer/webgl/GlyphRenderer.ts index bd231eb7..a149dd86 100644 --- a/src/renderer/webgl/GlyphRenderer.ts +++ b/src/renderer/webgl/GlyphRenderer.ts @@ -4,7 +4,7 @@ */ import { createProgram, PROJECTION_MATRIX } from './WebglUtils'; -import { IRenderDimensions } from '../Types'; +import { IColorManager, IRenderDimensions } from '../Types'; import { ITerminal, IBufferLine } from '../../Types'; import { NULL_CELL_CODE, CHAR_DATA_CHAR_INDEX, WHITESPACE_CELL_CODE } from '../../Buffer'; import WebglCharAtlas from './WebglCharAtlas'; @@ -95,6 +95,7 @@ export class GlyphRenderer { constructor( private _terminal: ITerminal, + private _colorManager: IColorManager, private _gl: IWebGL2RenderingContext, private _dimensions: IRenderDimensions ) { @@ -214,8 +215,9 @@ export class GlyphRenderer { // TODO: Make fg and bg configurable, currently since the buffer doesn't // support truecolor the char atlas cannot store it. - const fg = 0; - const bg = 7; + const lumi = this._colorManager.getLuminance(this._colorManager.colors.background) + const fg = lumi > 0.5 ? 7 : 0; + const bg = lumi > 0.5 ? 0 : 7; if (columnSelectMode) { const startCol = model.selection.startCol;