- Added a number of common themes to our support matrix: - AtomOneDark - Dracula - VS - GitHub - GoogleCode - XCode - ... Admittedly these all were randomly picked, we could probably curate these better... - Added a new `ThemeDialog` UI that can be accessed via `/theme`. It shows your currentlyt available themes and allows you to change them freely. It does **not**: - Save the theme between sessions - Allow you to hit escape - Show a preview prior to selection. - These themes are from reacts highlight js library. Fixes https://b.corp.google.com/issues/412797985
101 lines
1.6 KiB
TypeScript
101 lines
1.6 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright 2025 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
import { Theme } from './theme.js';
|
|
|
|
export const VS: Theme = new Theme('VS', {
|
|
hljs: {
|
|
display: 'block',
|
|
overflowX: 'auto',
|
|
padding: '0.5em',
|
|
background: 'white',
|
|
color: 'black',
|
|
},
|
|
'hljs-comment': {
|
|
color: '#008000',
|
|
},
|
|
'hljs-quote': {
|
|
color: '#008000',
|
|
},
|
|
'hljs-variable': {
|
|
color: '#008000',
|
|
},
|
|
'hljs-keyword': {
|
|
color: '#00f',
|
|
},
|
|
'hljs-selector-tag': {
|
|
color: '#00f',
|
|
},
|
|
'hljs-built_in': {
|
|
color: '#00f',
|
|
},
|
|
'hljs-name': {
|
|
color: '#00f',
|
|
},
|
|
'hljs-tag': {
|
|
color: '#00f',
|
|
},
|
|
'hljs-string': {
|
|
color: '#a31515',
|
|
},
|
|
'hljs-title': {
|
|
color: '#a31515',
|
|
},
|
|
'hljs-section': {
|
|
color: '#a31515',
|
|
},
|
|
'hljs-attribute': {
|
|
color: '#a31515',
|
|
},
|
|
'hljs-literal': {
|
|
color: '#a31515',
|
|
},
|
|
'hljs-template-tag': {
|
|
color: '#a31515',
|
|
},
|
|
'hljs-template-variable': {
|
|
color: '#a31515',
|
|
},
|
|
'hljs-type': {
|
|
color: '#a31515',
|
|
},
|
|
'hljs-addition': {
|
|
color: '#a31515',
|
|
},
|
|
'hljs-deletion': {
|
|
color: '#2b91af',
|
|
},
|
|
'hljs-selector-attr': {
|
|
color: '#2b91af',
|
|
},
|
|
'hljs-selector-pseudo': {
|
|
color: '#2b91af',
|
|
},
|
|
'hljs-meta': {
|
|
color: '#2b91af',
|
|
},
|
|
'hljs-doctag': {
|
|
color: '#808080',
|
|
},
|
|
'hljs-attr': {
|
|
color: '#f00',
|
|
},
|
|
'hljs-symbol': {
|
|
color: '#00b0e8',
|
|
},
|
|
'hljs-bullet': {
|
|
color: '#00b0e8',
|
|
},
|
|
'hljs-link': {
|
|
color: '#00b0e8',
|
|
},
|
|
'hljs-emphasis': {
|
|
fontStyle: 'italic',
|
|
},
|
|
'hljs-strong': {
|
|
fontWeight: 'bold',
|
|
},
|
|
});
|