I'm creating a VScode theme.
My project structure is very simple:
mytheme
|_ .vscode
|_ launch.json
|_ assets
|_ ...some png files
|_ themes
|_ mytheme.json
.vscodeignore
package.json
README.md
The mytheme.json is something like this:
{
"name": "mytheme",
"type": "dark",
"colors": {
//////////////////////////////
// CONTRAST COLOR
// The contrast colors are typically only set for high contrast themes.
// If set, they add an additional border around items across the UI to increase the contrast.
//////////////////////////////
// An extra border around active elements to separate them from others for greater contrast.
"contrastActiveBorder": "#fa0000",
// "contrastActiveBorder": "#FFFFFF00",
// An extra border around elements to separate them from others for greater contrast.
//"contrastBorder": "#fa0000",
//////////////////////////////
// BASE COLORS
//////////////////////////////
// Overall border color for focused elements. This color is only used if not overridden by a component.
"focusBorder": "#9B6DFF66",
// Overall foreground color. This color is only used if not overridden by a component.
"foreground": "#D9E0E8",
// Shadow color of widgets such as Find/Replace inside the editor.
"widget.shadow": "#1F2330",
// Background color of text selections in the workbench (for input fields or text areas, does not apply to selections within the editor and the terminal).
"selection.background": "#9B6DFF99",
// Foreground color for description text providing additional information, for example for a label.
"descriptionForeground": "#808182",
// Overall foreground color for error messages (this color is only used if not overridden by a component).
"errorForeground": "#9B6DFF",
// The default color for icons in the workbench.
"icon.foreground": "#D9E0E8",
...
}
}
and my package.json:
{
"name": "mytheme",
"version": "1.0.0",
"publisher": "...",
"icon": "assets/logo_square.png",
"galleryBanner": {
"color": "#1F2330",
"theme": "dark"
},
"engines": {
"vscode": "^1.42.0"
},
"displayName": "Mytheme",
"description": "...",
"categories": [
"Themes"
],
"contributes": {
"themes": [
{
"label": "Mytheme",
"uiTheme": "vs-dark",
"path": "./themes/mytheme.json"
}
]
},
"repository": {
"type": "git",
"URL": "....git"
},
"bugs": {
"URL": "..."
},
"author": {
"name": "...",
"email": "...",
},
"license": "MIT",
"keywords": [
"vscode",
"theme",
"color-theme",
"dark"
],
"private": false
}
Very simple. It works like a charm. But there is a big problem: it's very difficult to maintain because mytheme.json is a very very long file and it's a simple .json and If I want to modify for example the accent color, I need to do a find and replace.
I would like to develop my theme in a smarter way, I would like to use variables, save my N colors in variables and use them.
json format doesn't support variables so I ask you how can I do that?
I don't know if there is a standard way to do that, I imagine developing in js and then running a script that transforms my work into a valid json but how?
For example:
const PURPLE = "#9B6DFF"
const baseColors = {
...
errorForeground: PURPLE,
...
}
return ...
I didn't find a guide to follow.
Following the suggestion of #rioV8, I created these files:
.vscode/launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "extensionHost",
"request": "launch",
"name": "Launch Extension",
"runtimeExecutable": "${execPath}",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}"
],
"outFiles": [
"${workspaceFolder}/out/**/*.js"
],
"preLaunchTask": "parseToJson",
},
],
}
.vscode/tasks.json:
{
"version": "2.0.0",
"tasks": [
{
"label": "parseToJson",
"command": "tsc",
"type": "shell",
"presentation": {
"reveal": "silent",
"panel": "new"
},
"args": [
"--target",
"ES5",
"--outDir",
"js",
"--sourceMap",
"--watch",
"parse.ts"
],
"problemMatcher": "$tsc"
}
]
}
.vscode/parse.ts:
const PURPLE = "#9B6DFF"
const baseColors = {
errorForeground: PURPLE,
}
// create json
const mytheme = {
"name": "mytheme",
"type": "dark",
"colors": {...baseColors}
}
function createJsonTheme() {
// save to json
const file = new File(mytheme, "../themes/mytheme.json", {
type: "text/plain",
});
}
createJsonTheme()
When I run it, I get:
error TS6053: File 'parse.ts' not found. The file is in the program
because:
Root file specified for compilation
The path seems ok to me, where is The problem?
The createJsonTheme function goal is to create an object to save then in a json file inside themes folder.
Variables won't help. The theme file is a mapping of token values to color values. A theme editor tool could help you to be more productive, but I don't know any.
I solved doing like this:
launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "Run Extension",
"type": "extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}"
],
"preLaunchTask": "npm: build"
},
{
"name": "Run Extension Without Build",
"type": "extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}"
]
}
]
}
tasks.json:
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "start",
"group": {
"kind": "build",
"isDefault": true
},
"problemMatcher": [],
"label": "npm: start",
"detail": "nodemon --watch src src/index.js"
},
{
"type": "npm",
"script": "build",
"group": "build",
"problemMatcher": [],
"label": "npm: build",
"detail": "node src/index.js"
}
]
}
package.json:
...
"scripts": {
"start": "nodemon --watch src src/index.js",
"build": "node src/index.js && mkdir -p build",
"prepublishOnly": "npm run build && vsce publish"
}
...
src/index.js:
const fs = require('fs').promises
const getTheme = require('./theme')
const ohlalaTheme = getTheme({
theme: 'dark',
name: 'Mytheme',
})
// write theme
fs.mkdir('./themes', { recursive: true })
.then(() =>
Promise.all([
fs.writeFile('./themes/mytheme.json', JSON.stringify(ohlalaTheme, null, 2)),
])
)
.catch(() => process.exit(1))
src/theme.js
const { colors } = require('./colors')
function getTheme({ theme, name }) {
const themes = (options) => options[theme]
return {
name: name,
colors: {
focusBorder: colors.green,
},
semanticHighlighting: true,
...
}
}
module.exports = getTheme
src/colors.js:
const colors = {
green: '#......',
}
module.exports = { colors }
I'm using serilog with this configuration:
{
"Serilog": {
"Using": [ "Serilog.Sinks.Console", "Serilog.Sinks.File" ],
"MinimumLevel": "Debug",
"Enrich": [ "FromLogContext", "WithMachineName", "WithThreadId" ],
"WriteTo": [
{ "Name": "Console" },
{
"Name": "File",
"Args": {
"path": "./logs/performance-{Date}.log",
"rollingInterval": "Day",
"fileSizeLimitBytes": 1000,
"rollOnFileSizeLimit": true,
"retainedFileCountLimit": null,
"shared": true
}
}
]
}
}
Output file should look like 20210613-performance.log But output file looks like {Date}-performance20210613.log.
What i'm doing wrong?
The {Date} placeholder is not a feature of the Serilog.Sinks.File sink that you're using. You're probably confusing with the (deprecated) Serilog.Sinks.RollingFile sink which has this feature.
With Serilog.Sinks.File, at this time, you cannot define where the date will appear. It's always appended to the end of the file name you choose (and before the sequence number if you also are rolling by file size).
There have been attempts to implement this feature, but as of this writing it's not yet there.
Here's how my settings.json file looks like:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "entity.name.tag",
"settings": {
"foreground": "#7ea4df"
}
}
]
},
{
"workbench.colorTheme": "Visual Studio Light",
"window.zoomLevel": 0,
"editor.minimap.enabled": false,
"breadcrumbs.enabled": true
}
The problem is that when I save this file, my theme changes to dark "black" color. How can I preserve my theme and still edit the HTML tags colors?
I'm trying to create a new language for syntax highighting in Visual Studio Code for the CPU12 assembly language. When I use the new language in a new .asm file, the editor knows that the comment character is (it adds a semicolon to a line when I type ctrl-k ctrl-c), but the text is white instead of the default comment color green. Do I need to specify to use the default vscode theme? If so, where?
package.json
{
"name": "cpu12",
"displayName": "cpu12",
"description": "cpu12",
"version": "0.0.1",
"publisher": "https://github.com/me",
"engines": {
"vscode": "^1.15.0"
},
"categories": [
"Languages"
],
"contributes": {
"languages": [{
"id": "cpu12",
"aliases": ["CPU12", "cpu12"],
"extensions": [".asm",".inc"],
"configuration": "./language-configuration.json"
}],
"grammars": [{
"language": "cpu12",
"scopeName": "source.cpu12",
"path": "./syntaxes/cpu12.tmLanguage.json"
}]
}
}
language-configuration.json
{
"comments": {
// symbol used for single line comment. Remove this entry if your language does not support line comments
"lineComment": ";"
},
// symbols used as brackets
"brackets": [
["{", "}"],
["[", "]"],
["(", ")"]
],
// symbols that are auto closed when typing
"autoClosingPairs": [
["{", "}"],
["[", "]"],
["(", ")"],
["\"", "\""],
["'", "'"]
],
// symbols that that can be used to surround a selection
"surroundingPairs": [
["{", "}"],
["[", "]"],
["(", ")"],
["\"", "\""],
["'", "'"]
]
}
(My ./syntaxes/cpu12.tmLanguage.json is empty.)
The problem was actually because ./syntaxes/cpu12.tmLanguage.json was empty. You need to specify in the .json file how to color line comments:
./syntaxes/cpu12.tmLanguage.json
{
"$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
"name": "cpu12",
"scopeName": "source.cpu12",
"patterns": [
{
"comment": "Line Comments -- Asterisk only works at beginning of line",
"match": "((;|^\\*).*$)",
"captures": {
"1" :{
"name": "comment.line.cpu12"
}
}
}
]
}
My sublime project looks like this:
{
"folders":
[
{
"folder_exclude_patterns":
[
".bzr",
"build",
"webapps",
"work",
".settings"
],
"path": "/home/charles/project/Editor/trunk"
}
],
"settings":
{
"build_on_save": true,
"filename_filter": "\\.(java)$",
"tab_size": 4,
"translate_tabs_to_spaces": false
},
"build_systems":
[
{
"name": "compile",
"cmd": ["ant", "-f", "dev.xml", "compile"]
}
]
}
When I save a file the console says:
Buildfile: dev.xml does not exist!
Build failed
[Finished in 0.2s with exit code 1]
I know that I need to put something before dev.xml but I don't know what.
I found some possibilities here: http://sublimetext.info/docs/en/reference/build_systems.html#variables
But What I need is the folder path "/home/charles/project/Editor/trunk" in my case...
Any idea how I can achieve this?
You are missing "working_dir" in your "build_systems" setup. The example below will use the directory that holds the sublime project file as the build starting directory.
"build_systems":
[
{
"name": "compile",
"working_dir": "${project_path}",
"cmd": ["ant", "-f", "dev.xml", "compile"]
}
]
More information can be found at: http://www.sublimetext.com/docs/2/projects.html