Add prebuilt VSCode themes

[geisi]

Hi!

As discussed on X/Twitter https://twitter.com/djgeisi/status/1774771077173985694 this PR introduces 43 popular VSCode like themes for tempest/highlight.

Background Infos

I wrote a script to extract the tempest/highlight relevant CSS properties from VsCode themes. This script is using a simple Mapping which looks like this:

$tempestMapping = [
   'backgroundColor' => 'colors.editor.background',
   'commentColor' => 'tokenColors.comment.foreground',
   'textColor' => 'colors.editor.foreground',
   'keywordColor' => 'tokenColors.keyword.foreground',
   'propertyColor' => 'tokenColors.entity.name.function.foreground',
   'typeColor' => 'tokenColors.entity.name.class.foreground',
   'genericColor' => 'tokenColors.constant.language.foreground',
   'valueColor' => 'tokenColors.string.foreground',
   'variableColor' => 'tokenColors.variable.foreground',
];

I extracted the VSCode theme JSON files from here:

https://github.com/shikijs/textmate-grammars-themes/tree/main/packages/tm-themes

Considerations

I placed the themes in the already existing themes folder. This folder gets a bit messy now, but I could not change the folder structure; it would have been a breaking change.

If you have a better idea, you're welcome.

Btw, it should be possible to extract the terminal themes from VsCode as well. This is not part of this PR, but when you are interested, I can give it a try.

[coveralls]

Pull Request Test Coverage Report for Build 8519898558

Details

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 94.575%

---

Totals
Change from base Build 8519783467:	0.0%
Covered Lines:	1290
Relevant Lines:	1364

---

💛 - Coveralls

[brendt]

This is absolutely amazing! Thanks!

The folder is indeed a bit messy, but let's not worry about it too much 😁

Btw, it should be possible to extract the terminal themes from VsCode as well. This is not part of this PR, but when you are interested, I can give it a try.

If you're up for it, then yes! Terminal themes are different in that you only have a limited about of colors available (as far as I know). But let me know what you come up with :)

[brendt]

@geisi We recently added two new classes: .hl-number and .hl-boolean; I was wondering if you were perhaps able to regenerate the themes?

[geisi]

@brendt Yes, I will have a look at it.

Anyways I can provide the Generation code as well It is nothing special:

Service Class:

<?php

namespace App\Services;

use Exception;
use Illuminate\Support\Arr;
use Throwable;

class Vscode2TempestService
{
    /**
     * @throws Throwable
     */
    public function handle(string $theme): string
    {
        // Path to the VS Code theme JSON file
        $vsCodeThemePath = resource_path('themes/'.$theme.'.json');

        // Read and decode the JSON file
        $themeJson = file_get_contents($vsCodeThemePath);

        throw_unless(filled($themeJson), new Exception('Theme not found'));

        $theme = json_decode($themeJson, true);

        $tempestMapping = [
            'backgroundColor' => 'colors.editor.background',
            'commentColor' => 'tokenColors.comment.foreground',
            'textColor' => 'colors.editor.foreground',
            'keywordColor' => 'tokenColors.keyword.foreground',
            'propertyColor' => 'tokenColors.entity.name.function.foreground',
            'typeColor' => 'tokenColors.entity.name.class.foreground',
            'genericColor' => 'tokenColors.constant.language.foreground',
            'valueColor' => 'tokenColors.string.foreground',
            'variableColor' => 'tokenColors.variable.foreground',
        ];

        $tokenColors = [];

        //restructure tokenColors array
        foreach (Arr::get($theme, 'tokenColors', []) as $token) {
            $scopes = $token['scope'] ?? [];
            $scopes = is_string($scopes) ? [$scopes] : $scopes;

            foreach ($scopes as $scope) {
                if (isset($tokenColors[$scope])) {
                    $tokenColors[$scope] = array_merge($tokenColors[$scope], $token['settings']);
                } else {
                    $tokenColors[$scope] = $token['settings'] ?? [];
                }
            }
        }

        $theme['tokenColors'] = $tokenColors;

        // Convert dot notation to assoc array
        $theme['tokenColors'] = Arr::undot($theme['tokenColors']);
        $theme['colors'] = Arr::undot($theme['colors']);

        $data = [];

        foreach ($tempestMapping as $tempestKey => $vsCodeKey) {
            $data[$tempestKey] = Arr::get($theme, $vsCodeKey);
        }

        return view('tempest-css', $data)->render();
    }
}

Template File

pre, code {
color: {{$textColor ?? '#000'}};
background-color: {{$backgroundColor ?? '#f3f3f3'}};
}

.hl-keyword {
color: {{$keywordColor ?? '#4285F4'}};
}

.hl-property {
color: {{$propertyColor ?? '#34A853'}};
}

.hl-attribute {
font-style: italic;
}

.hl-type {
color: {{$typeColor ?? '#EA4334'}};
}

.hl-generic {
color: {{$genericColor ?? '#9d3af6'}};
}

.hl-value {
color: {{$valueColor ?? '#000'}};
}

.hl-variable {
color: {{$variableColor ?? '#000'}};
}

.hl-comment {
color: {{$commentColor ?? '#888888'}};
}

.hl-blur {
filter: blur(2px);
}

.hl-strong {
font-weight: bold;
}

.hl-em {
font-style: italic;
}

.hl-addition {
display: inline-block;
min-width: 100%;
background-color: #00FF0022;
}

.hl-deletion {
display: inline-block;
min-width: 100%;
background-color: #FF000011;
}

.hl-gutter {
display: inline-block;
font-size: 0.9em;
color: #555;
padding: 0 1ch;
}

.hl-gutter-addition {
background-color: #34A853;
color: #fff;
}

.hl-gutter-deletion {
background-color: #EA4334;
color: #fff;
}

[brendt]

Ah, nice! Is that code available somewhere (including the themes)? I don't want to bother you every time with an update, so maybe we can include it in this repository?

[geisi]

@brendt
Jep, I think it is easily possible to add this to the Tempest repository. The current code will introduce some (dev) dependencies to the Laravel core. But it could be migrated to native php code.

[brendt]

Do you have a repo somewhere? I can probably port it myself :)