vscode#ThemeColor TypeScript Examples

colorizedBackgroundDecoration = (
  selections: Range[],
  editor: TextEditor,
  color: string,
): TextEditorDecorationType => {
  const backgroundColorDefaultID = 'codereview.code.selection.background';
  const backgroundColorDefault = new ThemeColor(backgroundColorDefaultID);
  let backgroundColor: string | ThemeColor;
  if (color === backgroundColorDefaultID) {
    backgroundColor = backgroundColorDefault;
  } else if (isValidColorDefinition(color)) {
    backgroundColor = color;
  } else {
    console.log(`Invalid background color definition: ${color}`);
    backgroundColor = backgroundColorDefault;
  }

  const decoration = window.createTextEditorDecorationType({
    backgroundColor: backgroundColor,
  });
  editor.setDecorations(decoration, selections);

  return decoration;
}

themeColorForPriority = (priority: number): ThemeColor | undefined => {
  switch (priority) {
    case 3:
      return new ThemeColor('codereview.priority.red');
    case 2:
      return new ThemeColor('codereview.priority.yellow');
    case 1:
      return new ThemeColor('codereview.priority.green');
    default:
      return undefined; // private comments
  }
}

EDITOR_DECORATION_TYPES: {
  [key in keyof typeof DECORATION_TYPES]: TextEditorDecorationType;
} = {
  timestamp: window.createTextEditorDecorationType({}),
  blockAnchor: window.createTextEditorDecorationType({
    opacity: "40%",
    rangeBehavior: DecorationRangeBehavior.ClosedOpen,
  }),
  /** Decoration for wikilinks that point to valid notes. */
  wikiLink: window.createTextEditorDecorationType({
    color: new ThemeColor("editorLink.activeForeground"),
    rangeBehavior: DecorationRangeBehavior.ClosedClosed,
  }),
  /** Decoration for wikilinks that do *not* point to valid notes (e.g. broken). */
  brokenWikilink: window.createTextEditorDecorationType({
    color: new ThemeColor("editorWarning.foreground"),
    backgroundColor: new ThemeColor("editorWarning.background"),
    rangeBehavior: DecorationRangeBehavior.ClosedClosed,
  }),
  /** Decoration for the alias part of wikilinks. */
  alias: window.createTextEditorDecorationType({
    fontStyle: "italic",
  }),
  taskNote: window.createTextEditorDecorationType({
    rangeBehavior: DecorationRangeBehavior.ClosedClosed,
  }),
}

private async revealSelection(
		pos: DeserializedCodePosition
	): Promise<void> {
		if (pos.range) {
			const d = await workspace.openTextDocument(pos.uri);
			const e = await window.showTextDocument(d, {
				viewColumn: ViewColumn.One,
				preserveFocus: true,
			});
			e.revealRange(pos.range, TextEditorRevealType.Default);

			const highlightDecorationType =
				window.createTextEditorDecorationType({
					backgroundColor: new ThemeColor(
						"editor.stackFrameHighlightBackground"
					),
				});

			if (this.lastDecorationType) {
				e.setDecorations(this.lastDecorationType, []);
			}
			this.lastDecorationType = highlightDecorationType;

			e.setDecorations(highlightDecorationType, [pos.range]);
			wait(1000).then(() => {
				e.setDecorations(highlightDecorationType, []);
			});
		} else {
			await commands.executeCommand("vscode.open", pos.uri, {
				viewColumn: ViewColumn.One,
				preserveFocus: true,
			});
		}
	}

public static parameterAnnotation(
        message: string,
        range: Range
    ): DecorationOptions {
        return {
            range,
            renderOptions: {
                before: {
                    contentText: message,
                    color: new ThemeColor("inlineparameters.annotationForeground"),
                    backgroundColor: new ThemeColor("inlineparameters.annotationBackground"),
                    fontStyle: workspace.getConfiguration("inline-parameters").get("fontStyle"),
                    fontWeight: workspace.getConfiguration("inline-parameters").get("fontWeight"),
                    textDecoration: `;
                        font-size: ${workspace.getConfiguration("inline-parameters").get("fontSize")};
                        margin: ${workspace.getConfiguration("inline-parameters").get("margin")};
                        padding: ${workspace.getConfiguration("inline-parameters").get("padding")};
                        border-radius: ${workspace.getConfiguration("inline-parameters").get("borderRadius")};
                        border: ${workspace.getConfiguration("inline-parameters").get("border")};
                        vertical-align: middle;
                    `,
                },
            } as DecorationInstanceRenderOptions,
        } as DecorationOptions
    }

constructor(
		readonly label: string,
		readonly task: TheTask,
		readonly command: Command,
	) {
		super(label);
		if (task.links.length) {
			this.contextValue = 'link';
		}
		if (task.subtasks.length) {
			if (task.isCollapsed) {
				this.collapsibleState = TreeItemCollapsibleState.Collapsed;
			} else {
				this.collapsibleState = TreeItemCollapsibleState.Expanded;
			}
		}

		if (task.done) {
			this.iconPath = new ThemeIcon('pass', new ThemeColor('todomd.treeViewCompletedTaskIcon'));
		} else {
			// this.iconPath = new ThemeIcon('circle-large-outline');// TODO: maybe
		}
	}

provideFileDecoration(uri: Uri): ProviderResult<FileDecoration> {
        if (uri.scheme !== "ninja") {
            return;
        }

        const map = this._decorations[uri.authority];
        if (!map) {
            return;
        }

        const decoration = map[uri.path];
        if (!decoration) {
            return;
        }

        return {
            ...decoration,
            propagate: false,
            color: new ThemeColor(SeverityColors[`${decoration.severity}`]),
        };
    }

readonly RED: TextEditorDecorationType = window.createTextEditorDecorationType({
        isWholeLine: true,
        rangeBehavior: DecorationRangeBehavior.ClosedClosed,
        outline: 'none',
        backgroundColor: 'rgba(255, 20, 20, 0.2)',
        overviewRulerColor: new ThemeColor('editorOverviewRuler.errorForeground'),
        overviewRulerLane: OverviewRulerLane.Center
    });

suite('Editor Utils', () => {
  let editorStub: TextEditor;
  let lastSetDecorationConf: TextEditorDecorationType | undefined;
  let lastSetDecorationSelection: Selection[] | undefined;
  beforeEach(() => {
    editorStub = ({
      selections: [new Selection(new Position(0, 1), new Position(2, 6))],
      setDecorations: (conf: TextEditorDecorationType, selection: Selection[]) => {
        lastSetDecorationConf = conf;
        lastSetDecorationSelection = selection;
      },
    } as unknown) as TextEditor;
  });

  afterEach(() => {
    lastSetDecorationConf = undefined;
    lastSetDecorationSelection = undefined;
  });

  suite('clearSelection', () => {
    test('should mutate selection and reset everything to 0', () => {
      clearSelection(editorStub);
      assert.deepStrictEqual(editorStub.selections, [new Selection(new Position(0, 0), new Position(0, 0))]);
    });
  });

  suite('hasSelection', () => {
    test('should detect an active selection', () => {
      const result = hasSelection(editorStub);
      assert.ok(result);
    });
    test('should detect no active selection when no positions are set', () => {
      editorStub.selections = [];
      const result = hasSelection(editorStub);
      assert.strictEqual(result, false);
    });
    test('should detect no active selection when selection positions (start, end) are equal', () => {
      editorStub.selections = [new Selection(new Position(2, 5), new Position(2, 5))];
      const result = hasSelection(editorStub);
      assert.strictEqual(result, false);
    });
  });

  suite('getSelectionStringDefinition', () => {
    test('should return a string representing the current selection', () => {
      assert.strictEqual(getSelectionStringDefinition(editorStub), '1:1-3:6');
    });
    test('should return an empty string representing when no selection is active', () => {
      editorStub.selections = [];
      assert.strictEqual(getSelectionStringDefinition(editorStub), '');
    });
  });

  suite('getSelectionRanges', () => {
    test('should return a range for the current selection', () => {
      const ranges = getSelectionRanges(editorStub);
      assert.strictEqual(ranges.length, 1);
      assert.strictEqual(ranges[0].start.line, 0);
      assert.strictEqual(ranges[0].start.character, 1);
      assert.strictEqual(ranges[0].end.line, 2);
      assert.strictEqual(ranges[0].end.character, 6);
    });
  });

  suite('isValidColorDefinition', () => {
    test('should determine if a color value is RGBA or HEX', () => {
      // empty and invalid
      assert.strictEqual(isValidColorDefinition(''), false);
      assert.strictEqual(isValidColorDefinition('ffffff'), false);
      assert.strictEqual(isValidColorDefinition('#11'), false);
      assert.strictEqual(isValidColorDefinition('#22222'), false);
      assert.strictEqual(isValidColorDefinition('#3333333'), false);
      assert.strictEqual(isValidColorDefinition('some-other'), false);
      assert.strictEqual(isValidColorDefinition('rgb(10,20,44)'), false);
      assert.strictEqual(isValidColorDefinition('rgba(,20,44)'), false);
      assert.strictEqual(isValidColorDefinition('rgba(23)'), false);
      assert.strictEqual(isValidColorDefinition('rgba(23,34)'), false);
      assert.strictEqual(isValidColorDefinition('rgba(23,34)'), false);
      assert.strictEqual(isValidColorDefinition('rgba(10,20,44)'), false);
      assert.strictEqual(isValidColorDefinition('rgba(100,200,300,1.1)'), false);

      // hex
      assert.strictEqual(isValidColorDefinition('#fff'), true);
      assert.strictEqual(isValidColorDefinition('#FFF'), true);
      assert.strictEqual(isValidColorDefinition('#dddd'), true);
      assert.strictEqual(isValidColorDefinition('#DDDD'), true);
      assert.strictEqual(isValidColorDefinition('#ababab'), true);
      assert.strictEqual(isValidColorDefinition('#ABABAB'), true);
      assert.strictEqual(isValidColorDefinition('#ababab33'), true);
      assert.strictEqual(isValidColorDefinition('#ABABAB33'), true);

      // rgba
      assert.strictEqual(isValidColorDefinition('rgba(100,200,300,0.8)'), true);
    });
  });

  suite('themeColorForPriority', () => {
    test('should colorize the given selection with decoration', () => {
      assert.deepStrictEqual(themeColorForPriority(3), new ThemeColor('codereview.priority.red'));
      assert.deepStrictEqual(themeColorForPriority(2), new ThemeColor('codereview.priority.yellow'));
      assert.deepStrictEqual(themeColorForPriority(1), new ThemeColor('codereview.priority.green'));
      assert.strictEqual(themeColorForPriority(0), undefined);
    });
  });

  suite('symbolForPriority', () => {
    test('should colorize the given selection with decoration', () => {
      assert.strictEqual(symbolForPriority(3), '⇡');
      assert.strictEqual(symbolForPriority(2), '⇢');
      assert.strictEqual(symbolForPriority(1), '⇣');
      assert.strictEqual(symbolForPriority(0), undefined);
    });
  });
});

TASK_NOTE_DECORATION_COLOR = new ThemeColor(
  "editorLink.activeForeground"
)

HASHTAG_BORDER_COLOR = new ThemeColor("foreground")

/**
 * Generate WebView HTML for quark report.
 * @param report The data of quark report.
 * @returns WebView HTML
 */
export function quarkSummaryReportHTML(report: { [key: string]: any }): string {
    let allCrimesHTML = "";

    for (const key in report) {
        const crimeObj = report[key];
        allCrimesHTML += `
        <tr class="row100 body" onclick="a(this.id)" id="${key}">
            <td class="cell100 column1">${crimeObj["crime"]}</td>
            <td class="cell100 column2">${crimeObj["confidence"]}</td>
        </tr>`;

        for (const pkey in report[key]["api_call"]) {
            const parentFunc = report[key]["api_call"];
            allCrimesHTML += `
            <tr onclick="navigate(this.id, '${key}')" id="${pkey}" style="display: none;">
                <td class="sub">
                <p>Class : ${parentFunc[pkey]["function"]["class"]}</p>
                <p>Method : ${parentFunc[pkey]["function"]["method"]}</p>

                <div class="api">
                    <p>API 1: <a>${parentFunc[pkey]["apis"][0]}</a></p>
                    <p>API 2: <a>${parentFunc[pkey]["apis"][1]}</a></p>
                </div>

                </td>
            </tr>`;
        }
    }
    const backgroundColor = new ThemeColor("badge.background");
    const style = `

        .vscode-light body{
            background: ${backgroundColor};
            color: #e2e2e2;
        }
        .vscode-dark body{
            background: ${backgroundColor};
            color: #000;
        }

        .js-pscroll {
            position: relative;
            overflow: hidden;
        }

        .table100 .ps__rail-y {
            width: 9px;
            background-color: transparent;
            opacity: 1 !important;
            right: 5px;
        }

        .table100 .ps__rail-y::before {
            content: "";
            display: block;
            position: absolute;
            background-color: #ebebeb;
            border-radius: 5px;
            width: 100%;
            height: calc(100% - 30px);
            left: 0;
            top: 15px;
        }

        .table100 .ps__rail-y .ps__thumb-y {
            width: 100%;
            right: 0;
            background-color: transparent;
            opacity: 1 !important;
        }

        .table100 .ps__rail-y .ps__thumb-y::before {
            content: "";
            display: block;
            position: absolute;
            background-color: #cccccc;
            border-radius: 5px;
            width: 100%;
            height: calc(100% - 30px);
            left: 0;
            top: 15px;
        }

        .container-table100 {
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            padding: 33px 30px;
        }

        .wrap-table100 {
            width: 100%;
        }

        table {
            width: 100%;
        }

        th, td {
            font-weight: unset;
            padding-right: 10px;
        }

        .column1 {
            width: 90%;
            padding-left: 40px;
        }

        .column2 {
            width: 10%;
        }

        .table100-body td {
            padding-top: 16px;
            padding-bottom: 16px;
        }

        .table100 {
            position: relative;
            padding-top: 60px;
        }

        .table100-head {
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
        }

        .table100-body {
            max-height: 100%;
            overflow: auto;
        }

        .table100.ver5 .table100-head {
            padding-right: 30px;
        }

        .table100.ver5 th {
            text-align: left;
            font-family: Lato-Bold;
            font-size: 16px;
            line-height: 1.4;

            background-color: transparent;
        }

        .vscode-light .table100.ver5 td {
            font-family: Lato-Regular;
            font-size: 15px;
            line-height: 1.4;
            background-color: #d4d4d4;
        }

        .vscode-dark .table100.ver5 td {
            font-family: Lato-Regular;
            font-size: 15px;
            line-height: 1.4;
            background-color: #565656;
        }

        .vscode-light .table100.ver5 td.sub {
            font-family: Lato-Regular;
            font-size: 15px;
            line-height: 1.4;
            padding-left: 40px;
            background-color: #dcfddc;
        }

        .vscode-dark .table100.ver5 td.sub {
            font-family: Lato-Regular;
            font-size: 15px;
            line-height: 1.4;
            padding-left: 40px;
            background-color: #2f5658;
        }

        .table100.ver5 .table100-body tr {
            overflow: hidden;
            border-radius: 10px;
        }

        .table100.ver5 .table100-body table {
            border-collapse: separate;
            border-spacing: 0 10px;
        }

        .table100.ver5 .table100-body td {
            border: solid 1px transparent;
            border-style: solid none;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .table100.ver5 .table100-body td:first-child {
            border-left-style: solid;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }

        .table100.ver5 .table100-body td:last-child {
            border-right-style: solid;
            border-bottom-right-radius: 10px;
            border-top-right-radius: 10px;
        }

        .vscode-light .table100.ver5 tr:hover td {
            background-color: #6b6b6b;
            cursor: pointer;
        }

        .vscode-dark .table100.ver5 tr:hover td {
            background-color: #000;
            cursor: pointer;
        }

        .vscode-light .table100.ver5 tr:hover td.sub {
            background-color: #90a790;
            cursor: pointer;
        }

        .vscode-dark .table100.ver5 tr:hover td.sub {
            background-color: #193435;
            cursor: pointer;
        }

        .table100.ver5 .table100-head th {
            padding-top: 25px;
            padding-bottom: 25px;
        }

        .api {
            padding-left: 50px;
        }

        .vscode-light .api a{
            color: #d05345;
        }

        .vscode-dark .api a{
            color: #ff9696;
        }
    `;

    const reportHTML = `
<!DOCTYPE html>
    <html lang="en">
    <head>
    <title>CSS Template</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
${style}
</style>
</head>
<body>
<div class="container-table100">
			<div class="wrap-table100">
					<div class="table100 ver5 m-b-110">
					<div class="table100-head">
						<table>
							<thead>
								<tr class="row100 head">
									<th class="column1">Potential Malicious Activities</th>
									<th class="column2">Confidence</th>
								</tr>
							</thead>
						</table>
					</div>

					<div class="table100-body">
						<table>
                            <tbody>
                            ${allCrimesHTML}
                            </tbody>
						</table>
					</div>
				</div>
			</div>
        </div>
    </body>
    </html>
    <script>
    const vscode = acquireVsCodeApi();
    function apicall(crimeId) {
        vscode.postMessage({
            command: 'apicall',
            crimeId: crimeId
        });
    }

    function navigate(fid, cid) {
        vscode.postMessage({
            command: 'navigate',
            functionId: fid,
            cid: cid
        });
    }
    function a(id){
        const matcher = "[id^='" + id + "-']"
        var elements = document.querySelectorAll(matcher);
        var names = '';
        for(var i=0; i<elements.length; i++) {

          if (elements[i].style.display === "none") {
            elements[i].style.display = "block";
          } else {
            elements[i].style.display = "none";
          }
        }
      }
    </script>
`;
    return reportHTML;
}

/**
 * Update editor decoration style
 */
export function updateEditorDecorationStyle() {
	Global.userSpecifiedAdvancedTagDecorations = !isEmptyObject($config.decorations.tag);
	Global.completedTaskDecorationType = window.createTextEditorDecorationType({
		isWholeLine: true,
		textDecoration: $config.completedStrikeThrough ? 'line-through rgba(255, 255, 255, 0.35)' : undefined,
		light: {
			textDecoration: $config.completedStrikeThrough ? 'line-through rgba(0, 0, 0, 0.25)' : undefined,
		},
		...$config.decorations.completedTask,
	});
	Global.commentDecorationType = window.createTextEditorDecorationType({
		color: new ThemeColor('todomd.commentForeground'),
		isWholeLine: true,
		fontWeight: 'normal',
		...$config.decorations.comment,
	});
	Global.priorityADecorationType = window.createTextEditorDecorationType({
		color: new ThemeColor('todomd.priorityAForeground'),
		fontWeight: 'bold',
		...$config.decorations.priorityAForeground,
	});
	Global.priorityBDecorationType = window.createTextEditorDecorationType({
		color: new ThemeColor('todomd.priorityBForeground'),
		fontWeight: 'bold',
		...$config.decorations.priorityBForeground,
	});
	Global.priorityCDecorationType = window.createTextEditorDecorationType({
		color: new ThemeColor('todomd.priorityCForeground'),
		fontWeight: 'bold',
		...$config.decorations.priorityCForeground,
	});
	Global.priorityDDecorationType = window.createTextEditorDecorationType({
		color: new ThemeColor('todomd.priorityDForeground'),
		fontWeight: 'bold',
		...$config.decorations.priorityDForeground,
	});
	Global.priorityEDecorationType = window.createTextEditorDecorationType({
		color: new ThemeColor('todomd.priorityEForeground'),
		fontWeight: 'bold',
		...$config.decorations.priorityEForeground,
	});
	Global.priorityFDecorationType = window.createTextEditorDecorationType({
		color: new ThemeColor('todomd.priorityFForeground'),
		fontWeight: 'bold',
		...$config.decorations.priorityFForeground,
	});
	const tagCounterBadgeDecoration = ';position:absolute;display:inline-flex;align-items:center;padding:0px 1px;border-radius:2px;font-size:9px;top:-10%;height:50%;';
	const tagCounterBadgeDecorationLight = 'background-color:rgba(0,0,0,0.06);color:#111;';
	const tagCounterBadgeDecorationDark = 'background-color:rgba(255,255,255,0.12);color:#eee;';
	Global.tagsDecorationType = window.createTextEditorDecorationType({
		color: new ThemeColor('todomd.tagForeground'),
		light: {
			after: {
				textDecoration: $config.tagCounterBadgeEnabled ? `${tagCounterBadgeDecoration}${tagCounterBadgeDecorationLight}` : undefined,
			},
		},
		dark: {
			after: {
				textDecoration: $config.tagCounterBadgeEnabled ? `${tagCounterBadgeDecoration}${tagCounterBadgeDecorationDark}` : undefined,
			},
		},
		...$config.decorations.tag,
	});
	Global.tagWithDelimiterDecorationType = window.createTextEditorDecorationType({
		color: new ThemeColor('todomd.tagForeground'),
		...$config.decorations.tag,
	});
	Global.tagsDelimiterDecorationType = window.createTextEditorDecorationType({
		color: new ThemeColor('todomd.tagDelimiterForeground'),
	});
	Global.specialTagDecorationType = window.createTextEditorDecorationType({
		color: new ThemeColor('todomd.specialTagForeground'),
	});
	Global.projectDecorationType = window.createTextEditorDecorationType({
		color: new ThemeColor('todomd.projectForeground'),
		...$config.decorations.project,
	});
	Global.contextDecorationType = window.createTextEditorDecorationType({
		color: new ThemeColor('todomd.contextForeground'),
		...$config.decorations.context,
	});
	Global.notDueDecorationType = window.createTextEditorDecorationType({
		color: new ThemeColor('todomd.notDueForeground'),
		...$config.decorations.notDue,
	});
	Global.dueDecorationType = window.createTextEditorDecorationType({
		color: new ThemeColor('todomd.dueForeground'),
		...$config.decorations.due,
	});
	const enum DueDecorations {
		Padding = '0 0.5ch',
		Margin = '0.5ch',
		Border = '1px dashed',
	}
	Global.overdueDecorationType = window.createTextEditorDecorationType({
		color: new ThemeColor('todomd.overdueForeground'),
		after: {
			color: new ThemeColor('todomd.overdueForeground'),
			border: DueDecorations.Border,
			textDecoration: `;margin-left:${DueDecorations.Margin};text-align:center;padding:${DueDecorations.Padding};`,
		},
		...$config.decorations.overdue,
	});
	Global.invalidDueDateDecorationType = window.createTextEditorDecorationType({
		color: new ThemeColor('todomd.invalidDueDateForeground'),
		backgroundColor: new ThemeColor('todomd.invalidDueDateBackground'),
		...$config.decorations.invalidDue,
	});
	Global.closestDueDateDecorationType = window.createTextEditorDecorationType({
		after: {
			border: DueDecorations.Border,
			color: new ThemeColor('todomd.specialTagForeground'),
			textDecoration: `;margin-left:${DueDecorations.Margin};text-align:center;padding:${DueDecorations.Padding};`,
		},
	});
	Global.nestedTasksCountDecorationType = window.createTextEditorDecorationType({
		isWholeLine: true,
		after: {
			backgroundColor: new ThemeColor('todomd.nestedTasksCountBackground'),
			color: new ThemeColor('todomd.nestedTasksCountForeground'),
			border: '1px solid',
			borderColor: new ThemeColor('todomd.nestedTasksCountBorder'),
			margin: `0 0 0 ${DueDecorations.Margin}`,
			textDecoration: `;text-align:center;padding:${DueDecorations.Padding};position:relative;`,
		},
	});
	Global.nestedTasksPieDecorationType = window.createTextEditorDecorationType({
		isWholeLine: true,
		after: {
			width: `${$state.editorLineHeight}px`,
			height: `${$state.editorLineHeight}px`,
			margin: `0 0 0 ${DueDecorations.Margin}`,
			textDecoration: `;vertical-align:middle;position:relative;top:-1px;`,
		},
	});
}