How do you customize themes?

[ghistrash]

Hi! Address and question of the Flow user and not only..

How do you customize themes? Are there any tools for this?

It looks like the VSCode themes are taken as the template, but.. When I see this:

   {
      "id": 133,
      "style": {
        "fg": {
          "color": "#96A1FF",
          "alpha": 255
        },
        "bg": null,
        "fs": null
      }
    },
    {
      "id": 67,
      "style": {
        "fg": {
          "color": "#FF16B0",
          "alpha": 255
        },
        "bg": null,
        "fs": "bold"
      }
    },

That's horrible. What is id 67? A keyword or a parenthesis? And what is this color, FF16B0? You can't think of a worse interface.. I'm not surprised it's VSCode.

A cursory internet search did not yield results regarding the tools for editing theme files. GUI must be needed here..

Do rare sages live in the world that will help to cope with this beast?

[ghistrash]

Looks like I found something that might be useful:

• https://rodrigoluglio.github.io/vscode-theme-generator/

[neurocyte]

As you kind of noticed, the themes are really more like compiler output than something designed for users to edit. Now that we have user customization support, we really need to add a more user friendly format. At very least a format that uses scope strings instead of ids. Ideally something that is not json too.

[ghistrash]

I would have thought that changing themes wasn't the editor's job. That's why I asked about external tools.

The complexity lies in the VSCode theme template itself. It's clearly not designed for manual editing. The bare IDs simply astounded me.

I wrote an ad-hoc Python script to at least slightly simplify the setup:

• https://github.com/ghistrash/vscode-theme-editor

The script creates a HTML file with grid of all unique colors of a given theme.
Open it in the browser. For each unique color, there are two versions: the current one and the new one. We change the new one. Save with overwriting. The script then uses these values ​​to easily replace all instances of the corresponding color of a given theme.

Maybe someone will find this useful!

[ghistrash]

What was discovered through experimentation about the tokens property of the theme configuration and the corresponding id. For Zig and Rust langs. There may be mistakes. But it might still be useful for targeted changes.

tokens": [
    {
      "id": 127,
      "style": {
        "fg": {
          "color": "#037DFF",
          "alpha": 255
        },
        "bg": null,
        "fs": "normal"
      }
    },
    ...
]

1 - comments

50 - Zig: "fn" keyword in a function definition

58 - string literal

63 - set of characters: * = & < == <= >= << >> ? orelse
arithemetic operators?

67 - Zig: digit literal

100 - type, enum, struct, const, var definitions;
fucntion parameter name, struct fields names;
module members

102 - more granular than 100: types, Self, modules names

111 - function/method definition/invoking

123 -
Rust: static keyworld for a lifetime
Zig: trace keyword

125 - Zig: fn keyword

146 -
Zig: pub, const, var, return, struct, void, if, else, defer,
catch, break, inline, for, type keywords
primitive types (u8, void, etc)

Rust: fn
macros, pub, struct, impl, use,
mut, let, match, loop, else, return, break, if keyworlds
primitive types (u8, bool, etc)

173 -
Rust: variables, types name, function/method invoking
Zig: function name, types name, method/function invoking

189 - Rust/Zig: function parameter name

196 - Rust/Zig: string literal

209 -
Rust: function/method invoking/definition, type names, macros,
variables, consts, digit literal, modules
Zig: funciton/method invoking/definition, type names, enum variants,

258 -
Rust: all parentheses, pipe?
Zig: all parentheses, pipe

308 - Rust: struct fields

328 -
Zig/Rust: string literals

356 -
Rust: struct fields

500 -
Rust/Zig: primitive types

666..

Some notes:

• If there is no id, it means it does not affect syntax highlighting (or I didn't notice)
• Zig has a property that specifies the color of numeric literals only; I couldn't find a separate property for Rust. This is sad..
• There are duplicates for the same properties, for example, for string literals.

Overall, I just wanted to be more intentional about setting up the theme (after reading Tonsky). A helpful note in the sense that I found on the site:

• https://tonsky.me/blog/syntax-highlighting/
  (Unfortunately, the images are not loading for me)

In line with Tonsky's observation, in my opinion, the most successful (dark) theme is Turbo Colors. Can use it as is, but it's better to try simplifying it.

And the actual (light) theme is Alabaster, developed by the author himself. It is really great for Zig, but.. numeric literals/constants in Rust..

[ghistrash]

I think this is a very valuable observation, which can be boiled down to a more general concept: the categories of functionality and usefulness.

The syntax tree, I believe, contains quite a few elements. Many theme templates seem to use it as a basis for setting colors, and this is quite natural: they seem to be related.

At this point, something like this is created:

{
	"scope": [
		"keyword",
		"keyword.operator.new",
		"keyword.operator.logical.python",
		"source.js keyword.operator.expression",
		"source.ts keyword.operator.expression",
		"storage.modifier",
		"storage.type.class",
		"storage.type.function",
		"entity.name.tag.yaml",
		"source.js storage.type",
		"source.ts storage.type",
		"source.tsx storage.type",
		"source.rust storage.type"
	],
	"settings": {
		"foreground": "#C64600",
		"fontStyle": "bold"
		}
	}
...
}

Functional, complete, but probably useless for someone looking at the screen or trying to customize the theme.

Obviously, we need Something like this, a connection to the syntax tree for coloring the corresponding tokens.

But from the perspective of a theme developer/user, such a functional model is useless (or very complex). But, for example, what is:

{
	"scope": [
		"just_all_keywords",
	],
	"settings": {
		"foreground": "#C64600", // maybe even a json with comments and other colors formats
		"fontStyle": "bold"
		}
	}
...
}

And the intermediate one, as a technical implementation detail:

{
	"scope_settings": {
		"just_all_keywords": [
				"keyword",
				"keyword.operator.new",
				"keyword.operator.logical.python",
				"source.js keyword.operator.expression",
				"source.ts keyword.operator.expression",
				"storage.modifier",
				"storage.type.class",
				"storage.type.function",
				"entity.name.tag.yaml",
				"source.js storage.type",
				"source.ts storage.type",
				"source.tsx storage.type",
				"source.rust storage.type"
		]
	}
...
}

Just some thoughts...

[ghistrash]

Great news! Flow theme configuration files (at least since the master version: v0.7.2-593-g130bb713) now have a scope property (instead of obscure id) that points to the corresponding syntax element like this:

  {
      "scope": "comment",
      "style": {
        "fg": {
          "color": "#ACB6BF",
          "alpha": 140
        },
        "bg": null,
        "fs": "italic"
      }
    }

[neurocyte]

Ah, sorry, I should have mentioned that change here when it got merged.