mirror of
https://github.com/compiler-explorer/compiler-explorer.git
synced 2025-12-27 09:23:52 -05:00
71bb4446a0
Resolves #2837 This is a small change to slightly alter the foreground color of `variable.predefined` tokens in dark themes to improve legibility. These tokens look fine in the light theme, but for some reason monaco defines them as exactly the same color in vs-dark, which causes serious contrast issues. This PR's change to increase contrast is particularly relevant in diff views where the diff highlights could previously make tokens nearly invisible, but the new color also makes these tokens easier to read all-around. My goal for selecting the color was to try to match the same sort of "feel" that the these tokens have in the light theme. Images (the assembly is different because I have a different compiler on my local machine, and I took the before screenshots from the main website): | Theme | Before | After | |--------|--------|--------| | Light (unchanged) | <img width="450" height="259" alt="image" src="https://github.com/user-attachments/assets/67a9d986-0e9a-4be5-bee2-1bb967e9aed6" /> | <img width="449" height="258" alt="image" src="https://github.com/user-attachments/assets/17ed3978-bfd3-4bbf-9266-ccafb63a6e95" /> | | Dark/Dark+ | <img width="448" height="263" alt="image" src="https://github.com/user-attachments/assets/189d96b7-9e74-4dda-90ac-9ef6a403d46e" /> | <img width="443" height="260" alt="image" src="https://github.com/user-attachments/assets/f2fd46dc-ffa0-4092-b080-d448ee627110" /> | | One Dark | <img width="450" height="259" alt="image" src="https://github.com/user-attachments/assets/470b95b3-fc97-47c8-9fd9-76466de6b3f7" /> | <img width="446" height="258" alt="image" src="https://github.com/user-attachments/assets/e4244da5-ee39-46ea-a8f2-a924a121ff7d" /> | I also experimented with lowering the insert diff highlight opacity slightly on top of the token color change. That does further help with contrast, but it also makes the vibrance of insertion highlights different than deletion highlights and so rather than change those too I just figured I would leave them alone and try to make the minimal possible change.
597 lines
23 KiB
TypeScript
597 lines
23 KiB
TypeScript
// Copyright (c) 2022, Compiler Explorer Authors
|
|
// All rights reserved.
|
|
//
|
|
// Redistribution and use in source and binary forms, with or without
|
|
// modification, are permitted provided that the following conditions are met:
|
|
//
|
|
// * Redistributions of source code must retain the above copyright notice,
|
|
// this list of conditions and the following disclaimer.
|
|
// * Redistributions in binary form must reproduce the above copyright
|
|
// notice, this list of conditions and the following disclaimer in the
|
|
// documentation and/or other materials provided with the distribution.
|
|
//
|
|
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
|
|
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
|
|
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
|
|
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
|
|
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
|
|
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
|
|
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
|
|
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
|
|
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
|
|
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
|
|
// POSSIBILITY OF SUCH DAMAGE.
|
|
|
|
import GoldenLayout from 'golden-layout';
|
|
import $ from 'jquery';
|
|
import {editor} from 'monaco-editor';
|
|
import {isString} from '../shared/common-utils.js';
|
|
import {options} from './options.js';
|
|
import {SiteSettings} from './settings.js';
|
|
|
|
export type Themes = 'default' | 'dark' | 'darkplus' | 'pink' | 'onedark' | 'real-dark' | 'system';
|
|
|
|
export type Theme = {
|
|
path: string;
|
|
id: Themes;
|
|
name: string;
|
|
mainColor: string;
|
|
monaco: string;
|
|
};
|
|
|
|
export const themes: Record<Themes, Theme> = {
|
|
default: {
|
|
path: 'default',
|
|
id: 'default',
|
|
name: 'Light',
|
|
mainColor: '#f2f2f2',
|
|
monaco: 'ce',
|
|
},
|
|
dark: {
|
|
path: 'dark',
|
|
id: 'dark',
|
|
name: 'Dark',
|
|
mainColor: '#333333',
|
|
monaco: 'ce-dark',
|
|
},
|
|
darkplus: {
|
|
path: 'dark',
|
|
id: 'darkplus',
|
|
name: 'Dark+',
|
|
mainColor: '#333333',
|
|
monaco: 'ce-dark-plus',
|
|
},
|
|
pink: {
|
|
path: 'pink',
|
|
id: 'pink',
|
|
name: 'Pink',
|
|
mainColor: '#333333',
|
|
monaco: 'ce-pink',
|
|
},
|
|
'real-dark': {
|
|
path: 'dark',
|
|
id: 'real-dark',
|
|
name: 'Real dark',
|
|
mainColor: '#333333',
|
|
monaco: 'ce-dark',
|
|
},
|
|
onedark: {
|
|
path: 'one-dark',
|
|
id: 'onedark',
|
|
name: 'One Dark',
|
|
mainColor: '#282c34',
|
|
monaco: 'ce-one-dark',
|
|
},
|
|
system: {
|
|
id: 'system',
|
|
name: 'Same as system',
|
|
path: 'default',
|
|
mainColor: '#f2f2f2',
|
|
monaco: 'ce',
|
|
},
|
|
};
|
|
|
|
editor.defineTheme('ce', {
|
|
base: 'vs',
|
|
inherit: true,
|
|
rules: [
|
|
{
|
|
token: 'identifier.definition.herb',
|
|
foreground: '008a00',
|
|
fontStyle: 'bold',
|
|
},
|
|
{token: 'keyword.identifier.definition.herb', fontStyle: 'bold'},
|
|
],
|
|
colors: {
|
|
// There seems to be a monaco bug when switching between themes with the minimap's background not updating
|
|
'editor.background': '#FFFFFE',
|
|
},
|
|
});
|
|
|
|
editor.defineTheme('ce-dark', {
|
|
base: 'vs-dark',
|
|
inherit: true,
|
|
rules: [
|
|
{
|
|
token: 'identifier.definition.herb',
|
|
foreground: '7c9c7c',
|
|
fontStyle: 'bold',
|
|
},
|
|
{token: 'keyword.identifier.definition.herb', fontStyle: 'bold'},
|
|
{token: 'variable.predefined', foreground: '949eb0'},
|
|
],
|
|
colors: {},
|
|
});
|
|
|
|
editor.defineTheme('ce-dark-plus', {
|
|
base: 'vs-dark',
|
|
inherit: true,
|
|
rules: [
|
|
{
|
|
token: 'identifier.definition.herb',
|
|
foreground: '7c9c7c',
|
|
fontStyle: 'bold',
|
|
},
|
|
{token: 'keyword.identifier.definition.herb', fontStyle: 'bold'},
|
|
{token: 'variable.predefined', foreground: '949eb0'},
|
|
{token: 'keyword.if.cpp', foreground: 'b66bb0'},
|
|
{token: 'keyword.else.cpp', foreground: 'b66bb0'},
|
|
{token: 'keyword.while.cpp', foreground: 'b66bb0'},
|
|
{token: 'keyword.for.cpp', foreground: 'b66bb0'},
|
|
{token: 'keyword.return.cpp', foreground: 'b66bb0'},
|
|
{token: 'keyword.break.cpp', foreground: 'b66bb0'},
|
|
{token: 'keyword.continue.cpp', foreground: 'b66bb0'},
|
|
{token: 'keyword.goto.cpp', foreground: 'b66bb0'},
|
|
{token: 'keyword.directive.cpp', foreground: 'b66bb0'},
|
|
{token: 'keyword.directive.include.cpp', foreground: 'b66bb0'},
|
|
{token: 'keyword.directive.include.begin.cpp', foreground: 'ce9178'},
|
|
{token: 'keyword.directive.include.end.cpp', foreground: 'ce9178'},
|
|
{token: 'keyword.new.cpp', foreground: 'b66bb0'},
|
|
{token: 'keyword.using.cpp', foreground: 'b66bb0'},
|
|
{token: 'string.escape.cpp', foreground: 'd7ba7d'},
|
|
],
|
|
colors: {},
|
|
});
|
|
|
|
editor.defineTheme('ce-pink', {
|
|
base: 'vs',
|
|
inherit: true,
|
|
rules: [
|
|
...(() => {
|
|
// based on https://github.com/huacat1017/huacat.pink-theme/blob/master/themes/pink-theme-color-theme.json
|
|
const base: {
|
|
name?: string;
|
|
scope: string | string[];
|
|
settings: {foreground?: string; fontStyle?: string};
|
|
}[] = [
|
|
{
|
|
name: 'Punctuation',
|
|
scope: ['punctuation.separator', 'punctuation.terminator'],
|
|
settings: {
|
|
foreground: '#dd71b9',
|
|
},
|
|
},
|
|
{
|
|
name: 'Comment',
|
|
scope: ['comment.line', 'comment.block', 'comment', 'punctuation.definition.comment'],
|
|
settings: {
|
|
foreground: '#978c94',
|
|
fontStyle: 'italic',
|
|
},
|
|
},
|
|
{
|
|
name: 'Class',
|
|
scope: ['entity.name.type', 'entity.other.inherited-class', 'support.class'],
|
|
settings: {
|
|
foreground: '#e2b213',
|
|
},
|
|
},
|
|
{
|
|
name: 'Function',
|
|
scope: ['entity.name.function', 'support.function', 'meta.function-call.generic'],
|
|
settings: {
|
|
foreground: '#a770db',
|
|
},
|
|
},
|
|
{
|
|
name: 'Parameter',
|
|
scope: 'variable.parameter',
|
|
settings: {
|
|
foreground: '#e45d1e',
|
|
},
|
|
},
|
|
{
|
|
name: 'Keyword',
|
|
scope: ['keyword', 'storage'],
|
|
settings: {
|
|
foreground: '#5782df',
|
|
fontStyle: 'italic',
|
|
},
|
|
},
|
|
{
|
|
name: 'Type',
|
|
scope: ['storage.type', 'support.type'],
|
|
settings: {
|
|
foreground: '#62ad44',
|
|
fontStyle: '',
|
|
},
|
|
},
|
|
{
|
|
name: 'Number',
|
|
scope: [
|
|
'constant.numeric',
|
|
'constant.language',
|
|
'constant.character',
|
|
'constant',
|
|
'number',
|
|
'keyword.other',
|
|
],
|
|
settings: {
|
|
foreground: '#db6363',
|
|
fontStyle: '',
|
|
},
|
|
},
|
|
{
|
|
name: 'Operator',
|
|
scope: 'keyword.operator',
|
|
settings: {
|
|
foreground: '#dba15e',
|
|
fontStyle: '',
|
|
},
|
|
},
|
|
{
|
|
name: 'Delimiter',
|
|
scope: ['delimiter'],
|
|
settings: {
|
|
foreground: '#72696F',
|
|
fontStyle: '',
|
|
},
|
|
},
|
|
{
|
|
name: 'String, Symbols',
|
|
scope: ['string'],
|
|
settings: {
|
|
foreground: '#64afa9',
|
|
},
|
|
},
|
|
{
|
|
name: 'Variable',
|
|
scope: ['support.variable', 'variable'],
|
|
settings: {
|
|
foreground: '#72696f',
|
|
},
|
|
},
|
|
{
|
|
name: 'Strings: Escape Sequences',
|
|
scope: 'constant.character.escape',
|
|
settings: {
|
|
foreground: '#559fe4',
|
|
},
|
|
},
|
|
{
|
|
name: 'HTML CSS XML name',
|
|
scope: ['entity.other.attribute-name'],
|
|
settings: {
|
|
foreground: '#db6363',
|
|
},
|
|
},
|
|
{
|
|
name: 'HTML XML tag outer',
|
|
scope: ['meta.tag'],
|
|
settings: {
|
|
foreground: '#559fe4',
|
|
},
|
|
},
|
|
{
|
|
name: 'HTML XML tag inner',
|
|
scope: ['entity.name.tag'],
|
|
settings: {
|
|
foreground: '#5782df',
|
|
},
|
|
},
|
|
{
|
|
name: 'CSS class',
|
|
scope: ['entity.other.attribute-name.class'],
|
|
settings: {
|
|
foreground: '#dba15e',
|
|
},
|
|
},
|
|
{
|
|
name: 'CSS id',
|
|
scope: ['entity.other.attribute-name.id'],
|
|
settings: {
|
|
foreground: '#9045d6',
|
|
},
|
|
},
|
|
{
|
|
name: 'CSS Selector',
|
|
scope: ['support.constant.property-value'],
|
|
settings: {
|
|
foreground: '#62ad44',
|
|
},
|
|
},
|
|
{
|
|
name: 'Markdown heading',
|
|
scope: ['markup.heading', 'markup.heading entity.name'],
|
|
settings: {
|
|
foreground: '#5782df',
|
|
},
|
|
},
|
|
{
|
|
name: 'Markdown list',
|
|
scope: ['markup.list punctuation.definition.list.begin'],
|
|
settings: {
|
|
foreground: '#dd71b9',
|
|
},
|
|
},
|
|
{
|
|
name: 'Markdown link',
|
|
scope: ['markup.underline.link'],
|
|
settings: {
|
|
foreground: '#a770db',
|
|
},
|
|
},
|
|
{
|
|
name: 'Markdown bold',
|
|
scope: ['markup.bold'],
|
|
settings: {
|
|
foreground: '#db6363',
|
|
fontStyle: 'bold',
|
|
},
|
|
},
|
|
{
|
|
name: 'Markdown italic',
|
|
scope: ['markup.italic'],
|
|
settings: {
|
|
foreground: '#db6363',
|
|
fontStyle: 'italic',
|
|
},
|
|
},
|
|
{
|
|
name: 'Markdown italic bold',
|
|
scope: ['markup.italic markup.bold', 'markup.bold markup.italic'],
|
|
settings: {
|
|
fontStyle: 'italic bold',
|
|
},
|
|
},
|
|
{
|
|
name: 'Markdown code',
|
|
scope: ['text.html.markdown markup.inline.raw'],
|
|
settings: {
|
|
foreground: '#62ad44',
|
|
},
|
|
},
|
|
{
|
|
name: 'Markdown quote',
|
|
scope: ['markup.quote'],
|
|
settings: {
|
|
foreground: '#3d8b1c',
|
|
fontStyle: 'italic',
|
|
},
|
|
},
|
|
];
|
|
const monacoRules: editor.ITokenThemeRule[] = [];
|
|
for (const rule of base) {
|
|
if (isString(rule.scope)) {
|
|
monacoRules.push({
|
|
token: rule.scope,
|
|
...rule.settings,
|
|
});
|
|
} else {
|
|
for (const scope of rule.scope) {
|
|
monacoRules.push({
|
|
token: scope,
|
|
...rule.settings,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
return monacoRules;
|
|
})(),
|
|
{token: 'keyword.if.cpp', foreground: 'b66bb0'},
|
|
{token: 'keyword.else.cpp', foreground: 'b66bb0'},
|
|
{token: 'keyword.while.cpp', foreground: 'b66bb0'},
|
|
{token: 'keyword.for.cpp', foreground: 'b66bb0'},
|
|
{token: 'keyword.return.cpp', foreground: 'b66bb0'},
|
|
{token: 'keyword.break.cpp', foreground: 'b66bb0'},
|
|
{token: 'keyword.continue.cpp', foreground: 'b66bb0'},
|
|
{token: 'keyword.goto.cpp', foreground: 'b66bb0'},
|
|
{token: 'keyword.directive.cpp', foreground: 'b66bb0'},
|
|
{token: 'keyword.directive.include.cpp', foreground: 'b66bb0'},
|
|
{token: 'keyword.new.cpp', foreground: 'b66bb0'},
|
|
{token: 'keyword.using.cpp', foreground: 'b66bb0'},
|
|
{token: 'keyword.directive.include.begin.cpp', foreground: 'ce9178'},
|
|
{token: 'keyword.directive.include.end.cpp', foreground: 'ce9178'},
|
|
{token: 'string.escape.cpp', foreground: 'df945a'},
|
|
],
|
|
colors: {
|
|
'editor.background': '#fae1fa',
|
|
'editor.foreground': '#72696f',
|
|
'editor.lineHighlightBorder': '#e3a5e3',
|
|
'editor.wordHighlightTextBackground': '#e3a5e3',
|
|
'editorHoverWidget.background': '#fae1fa',
|
|
'editorLineNumber.foreground': '#e787e7',
|
|
'editorLineNumber.activeForeground': '#d12cd1',
|
|
'editor.selectionBackground': '#e3a5e3',
|
|
'editor.inactiveSelectionBackground': '#f0bcf0',
|
|
'minimap.selectionHighlight': '#e3a5e3',
|
|
},
|
|
});
|
|
|
|
editor.defineTheme('ce-one-dark', {
|
|
base: 'vs-dark',
|
|
inherit: true,
|
|
rules: [
|
|
{
|
|
token: 'identifier.definition.herb',
|
|
foreground: '61afef',
|
|
fontStyle: 'bold',
|
|
},
|
|
{token: 'variable.predefined', foreground: '949eb0'},
|
|
// General Identifiers
|
|
{token: 'identifier.cpp', foreground: 'abb2bf'},
|
|
// Annotations (includes items in attribute list)
|
|
{token: 'annotation.cpp', foreground: 'abb2bf'},
|
|
// Keywords
|
|
{token: 'keyword.auto.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.break.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.case.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.catch.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.class.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.constexpr.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.const.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.continue.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.default.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.delete.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.do.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.else.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.enum.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.explicit.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.export.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.extern.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.final.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.for.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.friend.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.goto.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.if.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.inline.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.mutable.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.namespace.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.new.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.noexcept.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.operator.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.override.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.private.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.protected.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.public.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.return.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.static.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.struct.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.switch.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.template.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.thread-local.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.throw.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.try.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.typedef.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.typename.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.union.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.unsigned.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.using.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.virtual.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.while.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.-asm.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.and.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.and-eq.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.bitand.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.bitor.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.compl.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.concept.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.co-await.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.co-return.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.co-yield.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.export.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.import.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.module.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.not.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.not-eq.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.or.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.or-eq.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.requires.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.xor.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.xor-eq.cpp', foreground: 'c678dd'},
|
|
// Function-like keywords
|
|
{token: 'keyword.static-assert.cpp', foreground: '61afef'},
|
|
{token: 'keyword.alignof.cpp', foreground: '61afef'},
|
|
{token: 'keyword.typeid.cpp', foreground: '61afef'},
|
|
{token: 'keyword.static-cast.cpp', foreground: '61afef'},
|
|
{token: 'keyword.sizeof.cpp', foreground: '61afef'},
|
|
{token: 'keyword.reinterpret-cast.cpp', foreground: '61afef'},
|
|
{token: 'keyword.dynamic-cast.cpp', foreground: '61afef'},
|
|
{token: 'keyword.decltype.cpp', foreground: '61afef'},
|
|
{token: 'keyword.asm.cpp', foreground: '61afef'},
|
|
// Constants and Literals
|
|
{token: 'keyword.true.cpp', foreground: 'e5c07b'},
|
|
{token: 'keyword.false.cpp', foreground: 'e5c07b'},
|
|
{token: 'keyword.nullptr.cpp', foreground: 'e5c07b'},
|
|
{token: 'number.cpp', foreground: 'e5c07b'},
|
|
{token: 'number.hex.cpp', foreground: 'e5c07b'},
|
|
{token: 'number.float.cpp', foreground: 'e5c07b'},
|
|
{token: 'number.octal.cpp', foreground: 'e5c07b'},
|
|
{token: 'number.binary.cpp', foreground: 'e5c07b'},
|
|
{token: 'string.cpp', foreground: '98c379'},
|
|
// Other
|
|
{token: 'keyword.this.cpp', foreground: 'e06c75'},
|
|
{token: 'keyword.directive.include.cpp', foreground: 'c678dd'},
|
|
{token: 'keyword.directive.include.begin.cpp', foreground: '98c379'},
|
|
{token: 'keyword.directive.include.end.cpp', foreground: '98c379'},
|
|
{token: 'entity.name.type.cpp', foreground: 'e5c07b'},
|
|
{token: 'string.escape.cpp', foreground: '56b6c2'},
|
|
{token: 'string.include.identifier.cpp', foreground: '98c379'},
|
|
],
|
|
colors: {
|
|
'editor.background': '#282c34',
|
|
'editor.foreground': '#abb2bf',
|
|
// 'editor.lineHighlightBorder': '#e3a5e3',
|
|
'editor.lineHighlightBackground': '#2c313c',
|
|
'editor.wordHighlightBackground': '#484e5b',
|
|
'editor.wordHighlightBorder': '#7f848e',
|
|
'editor.wordHighlightStrongBackground': '#abb2bf26',
|
|
'editor.wordHighlightStrongBorder': '#7f848e',
|
|
'editorHoverWidget.background': '#21252b',
|
|
'editorLineNumber.foreground': '#495162',
|
|
'editor.selectionBackground': '#67769660',
|
|
'editor.inactiveSelectionBackground': '#3a3f4b',
|
|
'minimap.selectionHighlight': '#abb2bf',
|
|
},
|
|
});
|
|
|
|
export class Themer {
|
|
private currentTheme: Theme | null = null;
|
|
|
|
constructor(
|
|
private eventHub: GoldenLayout.EventEmitter,
|
|
initialSettings: SiteSettings,
|
|
) {
|
|
this.onSettingsChange(initialSettings);
|
|
|
|
this.eventHub.on('settingsChange', this.onSettingsChange, this);
|
|
|
|
this.eventHub.on(
|
|
'requestTheme',
|
|
() => {
|
|
this.eventHub.emit('themeChange', this.currentTheme);
|
|
},
|
|
this,
|
|
);
|
|
}
|
|
|
|
public setTheme(theme: Theme) {
|
|
if (this.currentTheme === theme) return;
|
|
if (theme.id === 'system') {
|
|
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
theme = themes.dark;
|
|
} else {
|
|
theme = themes.default;
|
|
}
|
|
}
|
|
$('html').attr('data-theme', theme.path);
|
|
$('#meta-theme').prop('content', theme.mainColor);
|
|
editor.setTheme(theme.monaco);
|
|
this.eventHub.emit('resize');
|
|
this.currentTheme = theme;
|
|
}
|
|
|
|
public getCurrentTheme() {
|
|
return this.currentTheme;
|
|
}
|
|
|
|
private onSettingsChange(newSettings: SiteSettings) {
|
|
if (options.mobileViewer && newSettings.theme === 'real-dark') {
|
|
newSettings.theme = 'darkplus';
|
|
}
|
|
const newTheme = newSettings.theme && newSettings.theme in themes ? themes[newSettings.theme] : themes.default;
|
|
if (!newTheme.monaco) newTheme.monaco = 'vs';
|
|
this.setTheme(newTheme);
|
|
}
|
|
}
|