Someone asked me:
I’m red-green colour-blind and I find it hard to find colour themes for text editors which work for me. The colour theme in VizHub however is perfect. Is it based on another theme which might be available for VS Code, or do you have it in any format which could be ported to VS Code?
Yes this is a cool idea! I would absolutely love to see a version of the VizHub color scheme available for use in VSCode. I don’t know what it takes to create a VSCode theme/scheme, but many people have done it so it can’t be impossible right!?
Here’s a representation of all the colors that can be converted into whatever format is needed for a VSCode theme:
{
"container": {
"color": "#e2e2e2",
"backgroundColor": "#202e46"
},
"headerBackgroundColor": "#2e3c55",
"selectionBackground": "#000",
"lineNumbers": {
"color": "rgba(255,255,255,0.2)",
"cursor": "pointer"
},
"comment": {
"color": "#b9c7e6"
},
"meta": {
"color": "#b9c7e6"
},
"fatCursor": {
"backgroundColor": "rgba(228, 232, 255, 0.3)"
},
"default": {
"color": "#e2e2e2"
},
"link": {
"cursor": "pointer",
"color": "#ffdb56",
"textDecoration": "none"
},
"searching": {
"backgroundColor": "rgba(228, 232, 255, 0.3)"
},
"keyword": {
"color": "#77fd8c"
},
"tag": {
"color": "#00ffff"
},
"variable": {
"color": "#00ffff"
},
"variable2": {
"color": "#00ffff"
},
"variable3": {
"color": "#00ffff"
},
"definition": {
"color": "#00ffff"
},
"qualifier": {
"color": "#66ecff"
},
"builtin": {
"color": "#66ecff"
},
"header": {
"color": "#66ecff",
"fontWeight": "normal"
},
"string": {
"color": "#ffb9ff"
},
"string2": {
"color": "#ffb9ff"
},
"atom": {
"color": "#ffabb3"
},
"number": {
"color": "#ffabb3"
},
"attribute": {
"color": "#ffdb56"
},
"property": {
"color": "#ffdb56"
},
"colors": [
"#77fd8c",
"#00ffff",
"#66ecff",
"#ffb9ff",
"#ffabb3",
"#ffdb56",
"#77fd8c",
"#e2e2e2"
],
"operator": {
"color": "#e2e2e2"
},
"caretColor": "white",
"gutter": {
"color": "#e2e2e2",
"backgroundColor": "#202e46",
"border": "none"
},
"gutters": {
"color": "#e2e2e2",
"backgroundColor": "#202e46",
"border": "none"
},
"matchingBracket": {
"color": "#e2e2e2",
"borderBottom": "1px solid rgba(255,255,255,0.4)"
}
}
This comes from src/pages/VizPage/Body/Editor/themes/vizHub.js.
If anyone has experience making a VSCode color theme, feel free to take a stab at it, or post here to let me know there’s interest. Thanks!
Also here’s a fun easter egg: open the console and execute this JavaScript when the VizHub editor is open:
vizhub.enableColorRotation()
Now move your mouse and see the colors rotate! They are defined programmatically using a perceptual color space.
