SourceCodeVisualizer
SourceCodeVisualizer copied to clipboard
DarkTrick
Support dark mode
Do something about dark mode. Currently it looks like this:
Fully supporting dark mode with a dark theme looks like a lot of work. Therefore, for now: Overwrite text color to always be black
Hi @DarkTrick,
I really like your tool concept and wasn't able to find any similar VS Code extensions. The problem is that without dark mode support it's really hurts to use this tool, for me it's almost unusable.
I would be happy to add this feature to the tool to be able to use it. The problem is that I have kinda different stack from what is used in the tool (no experience with VS code extensions at all and pretty small experience with frontend/js/ts).
It's not a big problem, but I feel like it would take too much efforts if I will try to jump into the code by myself
Would you be interested in helping me there a little bit with some advice? (like a brief description of which parts of code is responsible for this kind of stuff would be helpful and maybe you have suggestions of how it might be implemented)
I would love to get help, but I currently have absolutely no time to put time into this (although it pains me every day at work, as well).
The quick fix is to set the font colors fixed to black. That would not add a dark theme, but at least make it usable.
If you get stuck at concrete problems, feel free to post questions here. I'll try as much as I can to make some time
Sorry, I don’t understand. Where is the setting for text colour in the extension? Are you talking about setting something in vscode itself - if so, wouldn’t that be related to the vscode theme?
Sounds like I’d need to fork the extension, figure out the line to change, re-build the extension, install this custom version of this extension into vscode over the top of the official release of this extension.
Perhaps someone has already done this and can make their build available.
I love this extension and also love dark mode. I hacked into it and solved my issues. Maybe this helps others. (Not sure if this was the right/best way to do it, but it solved things for me.
Steps to make this work:
NOTE: I am on a Mac in OSX.15 (your exact locations could differ.)
Step #1
Find the folder named: visualprogrammingx.sourcecodevisualizer-0.1.6 (or similar depending on version) inside the following folder.
MacintoshHD/Users/<username>/.vscode/extensions
Step #2
In the media folder find the web_visualizer.css file.
Step #3
Inside the web_visualizer.css file find the lines,
pre code.hljs { display: block; overflow-x: auto; padding: 1em; }
code.hljs { padding: 3px 5px; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }
.hljs { background: #f0f0f0; }
.hljs-section, .hljs-title { font-weight: 700; }
Step #4
Do not mess with the few lines above (ending with .hljs-section, .hljs-title...) below the author's comment if all you want to do is change font colors.
This is where the fun happens...
Navigate just below those lines that you left in place as instructured above, and you will see a handful of custom css classes.
Replace all of what is left in this file with the following code.
/*
Original Author's css lines commented out.
.hljs { color: #444; }
.hljs-comment { color: #078007; }
.hljs-punctuation, .hljs-tag { color: #444a; }
.hljs-tag .hljs-attr, .hljs-tag .hljs-name { color: #444; }
.hljs-attribute, .hljs-doctag, .hljs-keyword, .hljs-meta .hljs-keyword, .hljs-name, .hljs-selector-tag { color: #800; }
.hljs-deletion, .hljs-quote, .hljs-selector-class, .hljs-selector-id, .hljs-string, .hljs-template-tag, .hljs-type { color: #1f7199; }
.hljs-number { color: #098658; }
.hljs-section, .hljs-title { color: #800; }
.hljs-link, .hljs-operator, .hljs-regexp, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-symbol, .hljs-template-variable, .hljs-variable { color: #bc6060; }
.hljs-literal { color: #78a960; }
.hljs-addition, .hljs-bullet, .hljs-code { color: #397300; }
.hljs-built_in { color: rgb(59, 55, 0); }
.hljs-meta { color: #1f7199; }
.hljs-meta .hljs-string { color: #4d99bf; }
*/
:root {
/* --default values are what comes with it out of the box */
/* All default values are grouped according to the original extension settings. */
/* If you want more precise control, you may override the default variable values below on a class by class basis. */
/* Important NOTE: You must re-click "Visualize This" in the source code file and generate a new codeveiw tab to see any changes made here. */
/* Changes will not update on an open Code Diagram tab. */
/* Easy example: Change --hljs-comment-color from var(--default-comment-color); to 'purple' !!without quotes!! (!imporant/not tested but I always put the !imporant) and open a new Visualize This tab and see your green comments are now dark red. */
/* Update the --default values to change the entire groups as originally designed or update the lines one by one below the defaults to change the colors on a class by class basis. */
/* default values */
--default-hljs-color : #444;
--default-comment-color : #078007;
--default-punctuation-tag-color : #444a;
--default-attr-tag-name-color : #444;
--default-attr-doc-key-meta-name-selector-color: #800;
--default-del-quot-select-str-temp-type-color : #1f7199;
--default-number-color : #098658;
--default-section-title-color : #800;
--default-link-etc-variable-color : #bc6060;
--default-literal-color : #78a960;
--default-code-bullet-addition-color : #397300;
--default-built-in-color : #003b37;
--default-meta-color : #1f7199;
--default-meta-string-color : #4d99bf;
/* group 1 */
--hljs-color : var(--default-hljs-color);
/* group 2 */
--hljs-comment-color : purple !important;
/* group 3 */
--hljs-punctuation-color : var(--default-punctuation-tag-color);
--hljs-tag-color : var(--default-punctuation-tag-color);
/* group 4 */
--hljs-tag-attr-color : var(--default-attr-tag-name-color);
--hljs-tag-name-color : var(--default-attr-tag-name-color);
/* group 5 */
--hljs-attribute-color : var(--default-attr-doc-key-meta-name-selector-color);
--hljs-doctag-color : var(--default-attr-doc-key-meta-name-selector-color);
--hljs-keyword-color : var(--default-attr-doc-key-meta-name-selector-color);
--hljs-meta-keyword-color : var(--default-attr-doc-key-meta-name-selector-color);
--hljs-name-color : var(--default-attr-doc-key-meta-name-selector-color);
--hljs-selector-color : var(--default-attr-doc-key-meta-name-selector-color);
/* group 6 */
--hljs-deletion-color : var(--default-del-quot-select-str-temp-type-color);
--hljs-quote-color : var(--default-del-quot-select-str-temp-type-color);
--hljs-selector-class-color : var(--default-del-quot-select-str-temp-type-color);
--hljs-selector-id-color : var(--default-del-quot-select-str-temp-type-color);
--hljs-string-color : var(--default-del-quot-select-str-temp-type-color);
--hljs-template-tag-color : var(--default-del-quot-select-str-temp-type-color);
--hljs-type-color : var(--default-del-quot-select-str-temp-type-color);
/* group 7 */
--hljs-number-color : var(--default-number-color);
/* group 8 */
--hljs-section-color : var(--default-section-title-color);
--hljs-title-color : var(--default-section-title-color);
/* group 9 */
--hljs-link-color : var(--default-link-etc-variable-color);
--hljs-operator-color : var(--default-link-etc-variable-color);
--hljs-regexp-color : var(--default-link-etc-variable-color);
--hljs-selector-attr-color : var(--default-link-etc-variable-color);
--hljs-selector-pseudo-color : var(--default-link-etc-variable-color);
--hljs-symbol-color : var(--default-link-etc-variable-color);
--hljs-template-variable-color: var(--default-link-etc-variable-color);
--hljs-variable-color : var(--default-link-etc-variable-color);
/* group 10 */
--hljs-literal-color : var(--default-literal-color);
/* group 11 */
--hljs-code-color : var(--default-code-bullet-addition-color);
--hljs-bullet-color : var(--default-code-bullet-addition-color);
--hljs-addition-color : var(--default-code-bullet-addition-color);
/* group 12 */
--hljs-built-in-color : var(--default-built-in-color);
/* group 13 */
--hljs-meta-color : var(--default-meta-color);
/* group 14 */
--hljs-meta-string-color : var(--default-meta-string-color);
}
/* class by class basis */
/* group 1 */
.hljs { color: var(--hljs-color); }
/* group 2 */
.hljs-comment { color: var(--hljs-comment-color); }
/* group 3 */
.hljs-punctuation { color: var(--hljs-punctuation-color); }
.hljs-tag { color: var(--hljs-tag-color); }
/* group 4 */
.hljs-tag .hljs-attr { color: var(--hljs-attr-name-color); }
.hljs-tag .hljs-name { color: var(--hljs-tag-name-color); }
/* group 5 */
.hljs-attribute { color: var(--hljs-attribute-color); }
.hljs-doctag { color: var(--hljs-doctag-color); }
.hljs-keyword { color: var(--hljs-keyword-color); }
.hljs-meta .hljs-keyword { color: var(--hljs-meta-keyword-color); }
.hljs-name { color: var(--hljs-name-color); }
.hljs-selector-tag { color: var(--hljs-selector-tag-color); }
/* group 6 */
.hljs-deletion { color: var(--hljs-deletion-color); }
.hljs-quote { color: var(--hljs-quote-color); }
.hljs-selector-class { color: var(--hljs-selector-class-color); }
.hljs-selector-id { color: var(--hljs-selector-id-color); }
.hljs-string { color: var(--hljs-string-color); }
.hljs-template-tag { color: var(--hljs-template-tag-color); }
.hljs-type { color: var(--hljs-type-color); }
/* group 7 */
.hljs-number { color: var(--hljs-number-color); }
/* group 8 */
.hljs-section { color: var(--hljs-section-color); }
.hljs-title { color: var(--hljs-title-color); }
/* group 9 */
.hljs-link { color: var(--hljs-link-color); }
.hljs-operator { color: var(--hljs-operator-color); }
.hljs-regexp { color: var(--hljs-regexp-color); }
.hljs-selector-attr { color: var(--hljs-selector-attr-color); }
.hljs-selector-pseudo { color: var(--hljs-selector-pseudo-color); }
.hljs-symbol { color: var(--hljs-symbol-color); }
.hljs-template-variable { color: var(--hljs-template-variable-color); }
.hljs-variable { color: var(--hljs-variable-color); }
/* group 10 */
.hljs-literal { color: var(--hljs-literal-color); }
/* group 11 */
.hljs-addition { color: var(--hljs-addition-color); }
.hljs-bullet { color: var(--hljs-bullet-color); }
.hljs-code { color: var(--hljs-code-color); }
/* group 12 */
.hljs-built_in { color: var(--hljs-built-in-color); }
/* group 13 */
.hljs-meta { color: var(--hljs-meta-color); }
/* group 14 */
.hljs-meta .hljs-string { color: var(--hljs-meta-string-color); }
Step #5
Now, all you have to do is alter a few of the --default variables at the top to most likely fix the one or two things you need to fix in your vscode template view of things.
IMPORTANT NOTE
You will not see the updates you make in the .css file take effect until you close the current web view Code Diagram tab and then do a new Right-Click-Visual-This from VsCode. You won't have to close and re-open VsCode, but you will have to do a new Vistual This to see each change.
Additional instructions are included in the pasted code above, so read those initial comments and you should be good to go!
THANKS for the great extension!
I made some other customizations to finalize to work with my custom theme which required a few more variables and a few more altered CSS properties. I have pasted them all below for you to use if it helps anyone.
This is my full contents of the web_visualizer.css file currently which works really well with my custom theme which is a 'dark' them in general.
#connectionCanvas {
display: none !important;
z-index: 2;
position: absolute;
top: 0;
left: 0;
border: 0px;
pointer-events: none;
}
.VpwCodeEditor {
font-family: monospace;
line-height: 130%;
margin-left: 5px;
margin-bottom: 5px;
width: calc(100% - 10px);
white-space: pre;
padding-right: 3px;
padding-top: 7px;
padding-bottom: 7px;
border: 0px solid black;
overflow: auto; /* <=> scroll + hidden*/
counter-reset: vpwcodeeditorline;
}
.VpwCodeEditor div:before {
/* Line Numbers */
content: counter(vpwcodeeditorline);
font-size: 80%;
vertical-align: middle;
}
.VpwCodeEditor div {
counter-increment: vpwcodeeditorline;
}
.btnOpenDefinition {
/*float: right;*/
vertical-align: middle;
border-radius: 2px;
font-family: "Arial";
border: none;
background: none;
color: black;
width: 13px;
height: 13px;
cursor: pointer;
padding: 0px;
padding-bottom: 1px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.btnOpenDefinition:active {
border-top-color: #000;
border-left-color: #000;
border-bottom-color: #ccc;
border-right-color: #ccc;
}
.btnOpenDefinition:focus {
border: 1px rgb(0, 133, 185) dotted;
border-radius: 2px;
outline: none;
}
.VpwBtnOpenDefinition_ON,
.VpwBtnOpenDefinition_ON:focus,
.VpwBtnOpenDefinition_ON:hover {
background-color: #aaa;
border: 0px;
border-radius: 10px;
}
.Window_Clientarea_BlocksArea {
background-color: rgba(187, 187, 187, 0.082);
padding: 2px;
}
.Window_Clientarea_OpenDeclarationBlock {
/*border-style: solid;
border-width: 1px;
border-color: grey white white grey;*/
font-family: monospace;
white-space: nowrap;
padding-top: 7px;
padding-bottom: 7px;
padding-left: 10px;
padding-right: 10px;
margin: 3px;
background: linear-gradient(180deg, #e5e5e5 0%, #dadada 100%);
border-radius: 3px;
user-select: none;
}
.Window_Clientarea_OpenDeclarationBlock:hover {
background: linear-gradient(180deg, #eaeaea 0%, #dfdfdf 100%);
}
.Window_Clientarea_OpenDeclarationBlock:active {
background: #cfcfcf;
}
.viewEntityRepr_OutlineKindIndicator {
color: blue;
font-size: 80%;
position: relative;
top: -1px;
left: -1.5px;
display: inline-block;
border-right: 1px solid black;
padding-right: 2px;
margin-right: 1px;
/*border-radius: 10px;
min-width: 5px;
margin-right: 2px;
padding-left:4px;
box-shadow: 0px 0px 1px black;*/
}
.VpwButtonMovableBtn,
.VpwButtonMovable {
padding-left: 1px;
padding-right: 1px;
margin: 0px;
/*border: 1px solid grey;*/
border-width: 1px;
border-radius: 2px;
width: 13px;
height: 13px;
border-color: #00000040;
/* remove focus shadow*/
box-shadow: none;
}
.VpwButtonMovableBtn span {
position: relative;
top: -4px;
}
.VpwButtonMovableBtn:hover {
background-color: Window;
}
.VpwButtonMovableBtn button::-moz-focus-inner {
padding: 0px;
border: 0px;
margin: 0px;
}
.VpwMessageWindow .Window_Titlearea {
padding-right: 12px;
white-space: nowrap;
font-weight: bold;
min-width: 200px;
}
.VpwMessageWindow.Error {
background-color: rgb(251, 223, 223);
color: rgb(107, 0, 0);
}
.VpwMessageWindow.Error .Window_Titlearea::before {
content: "🧐 ";
}
.VpwMessageWindow.Warning {
background-color: rgb(252, 255, 226);
color: rgb(32, 33, 98);
}
.VpwMessageWindow.Warning .Window_Titlearea::before {
content: "🤔 ";
}
.VpwMessageWindow.Info {
background-color: rgb(226, 242, 255);
color: rgb(32, 33, 98);
}
.VpwMessageWindow.Info .Window_Titlearea::before {
content: "🤫 ";
}
.VpwMessageWindow .Window_Clientarea {
padding-top: 7px;
padding-bottom: 7px;
padding-left: 12px;
padding-right: 12px;
}
.VpwViewEntityWindow {
animation-name: VpwViewEntityWindowOpen;
animation-duration: 0.3s;
}
@keyframes VpwViewEntityWindowOpen {
from {
opacity: 0;
transform: scaleY(0.9) scaleX(1.1) translate(-20%, 0px);
}
to {
opacity: 1;
transform: scaleY(1) scaleX(1) translate(0px, 0px);
}
}
body {
font-size: 80%;
font-family: Arial, Helvetica, sans-serif;
}
textarea {
font-size: 85%;
}
.button_flat {
padding: 0px;
min-width: 20px;
vertical-align: top;
text-align: center;
user-select: none;
background-color: unset;
display: inline-block;
margin: 0px;
border: 0px;
}
.button_flat:hover {
background-color: rgba(255, 255, 255, 0.438);
}
.button_flat:active {
background-color: rgba(214, 214, 214, 0.438);
}
.VgfPopupWindow {
animation-name: VgfPopupWindowOpen;
animation-duration: 0.05s;
animation-timing-function: linear;
}
@keyframes VgfPopupWindowOpen {
from {
opacity: 0;
transform: scaleY(0.7) scaleX(0.9) translate(-00px, -20px);
}
to {
opacity: 1;
transform: scaleY(1) scaleX(1) translate(0px, 0px);
}
}
.VgfWorld {
/* Debugging: see where world is */
border: 1px solid red;
}
.VgfNavigationArea {
overflow: hidden;
}
.VgfNavigationArea,
.VgfInteractionArea {
width: 100%;
height: 100%;
/* needed to allow height=100% */
position: absolute;
left: 0px;
top: 0px;
}
.VgfWidget_dragging {
box-shadow: 10px 10px 7px rgba(0, 0, 0, 0.205);
}
/**
CSS-File for general CSS
**/
.resizable {
resize: both;
overflow: auto;
}
.VgfMenu {
border: 1px solid #a2a2a2;
background: #fcfcfc;
/*display: inline-block;
position: absolute;*/
padding: 0px;
margin: 0px;
}
.VgfMenuSeparator {
border-top: 1px solid rgba(0, 0, 0, 0.213);
margin-top: 3px;
width: 100%;
max-height: 0px;
}
.VgfMenuEntry {
/* Have invisible border to prevent entry-wiggle on hover*/
border-top: 1px solid #0000;
border-bottom: 1px solid #0000;
margin-top: 2px;
margin-bottom: 2px;
padding: 5px;
padding-left: 17px;
padding-right: 17px;
white-space: nowrap;
user-select: none;
}
.VgfMenuEntry:hover {
border-top: 1px solid #2b71bc;
border-bottom: 1px solid #2b71bc;
background: linear-gradient(#5ca9f9, #3b8fe8);
color: whitesmoke;
}
.td_expanderButton {
width: 1px;
vertical-align: top;
}
.td_expanderButton .button_flat {
padding-bottom: 7px;
} /* ****************************************************
*******************************************************
************* Window Mgr Windows **********************
*******************************************************
******************************************************/
.Window_OuterFrame {
border: 1px solid rgb(200, 200, 200);
border-radius: 3px;
}
.Window_InnerFrame {
padding-bottom: 1px;
border-radius: 3px;
}
.Window_InnerFrame hr {
color: rgb(192, 192, 192);
margin-top: 0px;
}
.Window_Titlebar {
user-select: none;
display: table;
width: 100%;
}
.Window_Titlearea {
padding-bottom: 7px;
padding-top: 7px;
width: 100%;
user-select: none;
}
/*.expandable_title_extended .Window_Titlearea {
}*/
.expandable_title_collapsed .Window_Titlearea {
white-space: nowrap;
max-width: 24em;
overflow: hidden;
/* fading text */
/* Also blurrs text to an illegible degree, so deactivated
mask-image: linear-gradient(to right, black 80%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
*/
}
.VgfWindowTiled_WindowButtonsDiv {
vertical-align: top;
float: right;
}
.Window_Titlebar_MetatypeDiv {
font-size: 65%;
position: absolute;
top: 4px;
left: 22px;
/* color: blue; */
}
.Window_Titlebar_Title {
padding: 5px;
padding-left: 3px;
padding-bottom: 0px;
position: relative;
top: 6px;
left: -3px;
font-family: monospace;
}
.Window_btn {
padding: 2px;
vertical-align: middle;
text-align: center;
user-select: none;
}
.Window_btn:hover {
background-color: rgba(255, 255, 255, 0.438);
}
.Window_btn:active {
background-color: rgba(214, 214, 214, 0.438);
}
.Window_btnClose {
min-width: 15px;
height: 15px;
position: absolute;
right: 0px;
top: 1px;
}
.Window_btnClose:hover {
background-color: red;
color: white;
border-radius: 3px;
}
.Window_btnClose:active {
background-color: rgb(255, 100, 100);
color: white;
}
.Window_Clientarea {
/* Border like for class diagrams */
/* border-top: 1px solid rgba(200, 200, 200); */
padding: 2px;
}
.VgfWindow_focussed {
/*box-shadow: inset 0px 0px 7px #00FF5555;*/
box-shadow: 0px 0px 7px #00000055;
}
.VgfWindow {
display: inline-block;
position: absolute;
}
.VgfLine {
pointer-events: none;
position: relative;
width: 0px;
height: 0px;
}
/*
Theme: Default
Description: Original highlight.js style
Author: (c) Ivan Sagalaev <[email protected]>
Maintainer: @highlightjs/core-team
Website: https://highlightjs.org/
License: see project LICENSE
Touched: 2021
*/
pre code.hljs { display: block; overflow-x: auto; padding: 1em; }
code.hljs { padding: 3px 5px; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }
.hljs-section, .hljs-title { font-weight: 700; }
/*
Original Author's css lines commented out.
.hljs { color: #444; }
.hljs-comment { color: #078007; }
.hljs-punctuation, .hljs-tag { color: #444a; }
.hljs-tag .hljs-attr, .hljs-tag .hljs-name { color: #444; }
.hljs-attribute, .hljs-doctag, .hljs-keyword, .hljs-meta .hljs-keyword, .hljs-name, .hljs-selector-tag { color: #800; }
.hljs-deletion, .hljs-quote, .hljs-selector-class, .hljs-selector-id, .hljs-string, .hljs-template-tag, .hljs-type { color: #1f7199; }
.hljs-number { color: #098658; }
.hljs-section, .hljs-title { color: #800; }
.hljs-link, .hljs-operator, .hljs-regexp, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-symbol, .hljs-template-variable, .hljs-variable { color: #bc6060; }
.hljs-literal { color: #78a960; }
.hljs-addition, .hljs-bullet, .hljs-code { color: #397300; }
.hljs-built_in { color: rgb(59, 55, 0); }
.hljs-meta { color: #1f7199; }
.hljs-meta .hljs-string { color: #4d99bf; }
*/
/* good light function colors : 9CDCFE */
:root {
/* --default values are what comes with it out of the box */
/* All default values are grouped according to the original extension settings. */
/* If you want more precise control, you may override the default variable values below on a class by class basis. */
/* Important NOTE: You must re-click "Visualize This" in the source code file and generate a new codeveiw tab to see any changes made here. */
/* Changes will not update on an open Code Diagram tab. */
/* Easy example: Change --hljs-comment-color from var(--default-comment-color); to 'purple' !!without quotes!! (!imporant/not tested but I always put the !imporant) and open a new Visualize This tab and see your green comments are now dark red. */
/* Update the --default values to change the entire groups as originally designed or update the lines one by one below the defaults to change the colors on a class by class basis. */
/* default values */
--default-hljs-main-app-background-color : #d0d0e0aa;
--default-hljs-background-color : #f0f0f0;
--default-hljs-editor-background-color : rgba(255,255,255,0.404);
--default-hljs-line-number-color : rgba(0, 0, 0, 0.404);
--default-hljs-window-outer-frame-background-color: rgb(231, 231, 231);
--default-hljs-window-title-bar-color : blue;
--default-hljs-window-outer-frame-color : #CCCCCC;
--default-hljs-color : #444;
--default-comment-color : #078007;
--default-punctuation-tag-color : #444a;
--default-attr-tag-name-color : #444;
--default-attr-doc-key-meta-name-selector-color : #800;
--default-del-quot-select-str-temp-type-color : #1f7199;
--default-number-color : #098658;
--default-section-title-color : #800;
--default-link-etc-variable-color : #9CDCFE;
--default-literal-color : #78a960;
--default-code-bullet-addition-color : #397300;
--default-built-in-color : #003b37;
--default-meta-color : #1f7199;
--default-meta-string-color : #4d99bf;
/* hljs NON-theme alterations Custom */
--hljs-background-color : var(--default-hljs-color);
--hljs-editor-background-color : #353b3a; /* #1f2625;*/
--hljs-line-number-color : #CCCCCC;
--hljs-main-app-background-color : var(--default-hljs-main-app-background-color);
--hljs-window-outer-frame-background-color: #555555;
--hljs-window-outer-frame-color : #FFFF00;
--hljs-window-title-bar-color : #CCCCCC;
/* group 1 */
--hljs-color : var(--default-hljs-color);
/* group 2 */
--hljs-comment-color : var(--default-comment-color);
/* group 3 */
--hljs-punctuation-color : var(--default-punctuation-tag-color);
--hljs-tag-color : var(--default-punctuation-tag-color);
/* group 4 */
--hljs-tag-attr-color : var(--default-attr-tag-name-color);
--hljs-tag-name-color : var(--default-attr-tag-name-color);
/* group 5 */
--hljs-attribute-color : var(--default-attr-doc-key-meta-name-selector-color);
--hljs-doctag-color : var(--default-attr-doc-key-meta-name-selector-color);
--hljs-keyword-color : #4682B4;
--hljs-meta-keyword-color : var(--default-attr-doc-key-meta-name-selector-color);
--hljs-name-color : var(--default-attr-doc-key-meta-name-selector-color);
--hljs-selector-color : var(--default-attr-doc-key-meta-name-selector-color);
/* group 6 */
--hljs-deletion-color : #CE9178; /*var(--default-del-quot-select-str-temp-type-color);*/
--hljs-quote-color : #CE9178; /*var(--default-del-quot-select-str-temp-type-color);*/
--hljs-selector-class-color : #CE9178; /*var(--default-del-quot-select-str-temp-type-color);*/
--hljs-selector-id-color : #CE9178; /*var(--default-del-quot-select-str-temp-type-color);*/
--hljs-string-color : #CE9178; /*var(--default-del-quot-select-str-temp-type-color);*/
--hljs-template-tag-color : #CE9178; /*var(--default-del-quot-select-str-temp-type-color);*/
--hljs-type-color : #CE9178; /*var(--default-del-quot-select-str-temp-type-color);*/
/* group 7 */
--hljs-number-color : var(--default-number-color);
/* group 8 */
--hljs-section-color : var(--default-section-title-color);
--hljs-title-color : var(--default-section-title-color);
/* group 9 */
--hljs-link-color : var(--default-link-etc-variable-color);
--hljs-operator-color : var(--default-link-etc-variable-color);
--hljs-regexp-color : var(--default-link-etc-variable-color);
--hljs-selector-attr-color : var(--default-link-etc-variable-color);
--hljs-selector-pseudo-color : var(--default-link-etc-variable-color);
--hljs-symbol-color : var(--default-link-etc-variable-color);
--hljs-template-variable-color: var(--default-link-etc-variable-color);
--hljs-variable-color : #9CDCFE;
/* group 10 */
--hljs-literal-color : var(--default-literal-color);
/* group 11 */
--hljs-code-color : var(--default-code-bullet-addition-color);
--hljs-bullet-color : var(--default-code-bullet-addition-color);
--hljs-addition-color : var(--default-code-bullet-addition-color);
/* group 12 */
--hljs-built-in-color : var(--default-built-in-color);
/* group 13 */
--hljs-meta-color : #4682B4;
/* group 14 */
--hljs-meta-string-color : var(--default-meta-string-color);
}
.VpwCodeEditor {
/* background-color: rgba(255, 255, 255, 0.9); */
background-color: var(--hljs-editor-background-color);
}
.VpwCodeEditor div:before {
/* Line Numbers */
margin-left: 3px !important;
color: var(--hljs-line-number-color);
}
.VgfNavigationArea {
background-color: var(--hljs-main-app-background-color);
}
.Window_OuterFrame {
background-color: var(--hljs-window-outer-frame-background-color);
color: var(--hljs-window-outer-frame-color);
}
.Window_Titlebar_MetatypeDiv {
font-size: 70%;
position: absolute;
top: 4px;
left: 22px;
font-style: italic;
letter-spacing: 1px;
color: var(--hljs-window-title-bar-color);
}
.hljs { background: var(--hljs-background-color); }
/* class by class basis */
/* group 1 */
.hljs { color: var(--hljs-color); }
/* group 2 */
.hljs-comment { color: var(--hljs-comment-color); }
/* group 3 */
.hljs-punctuation { color: var(--hljs-punctuation-color); }
.hljs-tag { color: var(--hljs-tag-color); }
/* group 4 */
.hljs-tag .hljs-attr { color: var(--hljs-attr-name-color); }
.hljs-tag .hljs-name { color: var(--hljs-tag-name-color); }
/* group 5 */
.hljs-attribute { color: var(--hljs-attribute-color); }
.hljs-doctag { color: var(--hljs-doctag-color); }
.hljs-keyword { color: var(--hljs-keyword-color); }
.hljs-meta .hljs-keyword { color: var(--hljs-meta-keyword-color); }
.hljs-name { color: var(--hljs-name-color); }
.hljs-selector-tag { color: var(--hljs-selector-tag-color); }
/* group 6 */
.hljs-deletion { color: var(--hljs-deletion-color); }
.hljs-quote { color: var(--hljs-quote-color); }
.hljs-selector-class { color: var(--hljs-selector-class-color); }
.hljs-selector-id { color: var(--hljs-selector-id-color); }
.hljs-string { color: var(--hljs-string-color); }
.hljs-template-tag { color: var(--hljs-template-tag-color); }
.hljs-type { color: var(--hljs-type-color); }
/* group 7 */
.hljs-number { color: var(--hljs-number-color); }
/* group 8 */
.hljs-section { color: var(--hljs-section-color); }
.hljs-title { color: var(--hljs-title-color); }
/* group 9 */
.hljs-link { color: var(--hljs-link-color); }
.hljs-operator { color: var(--hljs-operator-color); }
.hljs-regexp { color: var(--hljs-regexp-color); }
.hljs-selector-attr { color: var(--hljs-selector-attr-color); }
.hljs-selector-pseudo { color: var(--hljs-selector-pseudo-color); }
.hljs-symbol { color: var(--hljs-symbol-color); }
.hljs-template-variable { color: var(--hljs-template-variable-color); }
.hljs-variable { color: var(--hljs-variable-color); }
/* group 10 */
.hljs-literal { color: var(--hljs-literal-color); }
/* group 11 */
.hljs-addition { color: var(--hljs-addition-color); }
.hljs-bullet { color: var(--hljs-bullet-color); }
.hljs-code { color: var(--hljs-code-color); }
/* group 12 */
.hljs-built_in { color: var(--hljs-built-in-color); }
/* group 13 */
.hljs-meta { color: var(--hljs-meta-color); }
/* group 14 */
.hljs-meta .hljs-string { color: var(--hljs-meta-string-color); }
/* styles/not colors */
.hljs-comment { font-style: italic; }