Comments (5)
Yeah they don't look great 😬 It's probably best to make it manually and match tokens: https://github.com/will-stone/plastic/blob/main/themes/vscode/src/theme.ts#L271
from plastic.
Yeah, agreed.
Btw, I noticed this line in the code:
plastic/themes/vscode/src/theme.ts
Lines 32 to 33 in 0e46eba
I took the contents of the JSON file produced by Developer: Generate Color Theme From Current Settings
and put it into Quicktype:
Here you go 🙂
(Probably not entirely correct, but should be close and better than nothing)
https://gist.github.com/GavinRay97/241fd0797f223a2db0dc1114c2122a37
from plastic.
Thanks @GavinRay97 However, it'd be great to have an official type so we know the ThemeColors
keys are always up-to-date and it can be used to find missing keys.
from plastic.
For sure -- if we can find the location of the JSON schema being referenced with vscode://schemas/color-theme
, then we can generate TypeScript definitions from that.
EDIT: Wow, it looks like MS is doing this pretty weird actually.
Have a look here:
- https://github.com/microsoft/vscode/blob/94c9ea46838a9a619aeafb7e8afd1170c967bb55/src/vs/workbench/services/themes/common/colorThemeSchema.ts#L204-L245
- https://github.com/microsoft/vscode/blob/94c9ea46838a9a619aeafb7e8afd1170c967bb55/src/vs/platform/theme/common/colorRegistry.ts#L163-L186
I think you might be able to get the JSON schema output by writing an extension with this content. May give it a shot later just to see:
let schemaRegistry = Registry.as<IJSONContributionRegistry>(JSONExtensions.JSONContribution);
console.log(schemaRegistry.schemasById)
const workbenchSchema = schemaRegistry.schemasById["vscode://schemas/workbench-colors"]
const colorThemeSchema = schemaRegistry.schemasById["vscode://schemas/color-theme"]
colorThemeSchema.ts
export const colorThemeSchemaId = 'vscode://schemas/color-theme';
const colorThemeSchema: IJSONSchema = {
type: 'object',
allowComments: true,
allowTrailingCommas: true,
properties: {
colors: {
description: nls.localize('schema.workbenchColors', 'Colors in the workbench'),
$ref: workbenchColorsSchemaId,
additionalProperties: false
},
// <SNIPPED>
}
};
export function registerColorThemeSchemas() {
let schemaRegistry = Registry.as<IJSONContributionRegistry>(JSONExtensions.JSONContribution);
schemaRegistry.registerSchema(colorThemeSchemaId, colorThemeSchema);
schemaRegistry.registerSchema(textmateColorsSchemaId, textmateColorSchema);
}
colorRegistry.ts
const colorRegistry = new ColorRegistry();
platform.Registry.add(Extensions.ColorContribution, colorRegistry);
export function registerColor(id: string, defaults: ColorDefaults | null, description: string, needsTransparency?: boolean, deprecationMessage?: string): ColorIdentifier {
return colorRegistry.registerColor(id, defaults, description, needsTransparency, deprecationMessage);
}
export function getColorRegistry(): IColorRegistry {
return colorRegistry;
}
// ----- base colors
export const foreground = registerColor('foreground', { dark: '#CCCCCC', light: '#616161', hc: '#FFFFFF' }, nls.localize('foreground', "Overall foreground color. This color is only used if not overridden by a component."));
export const errorForeground = registerColor('errorForeground', { dark: '#F48771', light: '#A1260D', hc: '#F48771' }, nls.localize('errorForeground', "Overall foreground color for error messages. This color is only used if not overridden by a component."));
export const descriptionForeground = registerColor('descriptionForeground', { light: '#717171', dark: transparent(foreground, 0.7), hc: transparent(foreground, 0.7) }, nls.localize('descriptionForeground', "Foreground color for description text providing additional information, for example for a label."));
export const iconForeground = registerColor('icon.foreground', { dark: '#C5C5C5', light: '#424242', hc: '#FFFFFF' }, nls.localize('iconForeground', "The default color for icons in the workbench."));
export const workbenchColorsSchemaId = 'vscode://schemas/workbench-colors';
let schemaRegistry = platform.Registry.as<IJSONContributionRegistry>(JSONExtensions.JSONContribution);
schemaRegistry.registerSchema(workbenchColorsSchemaId, colorRegistry.getColorSchema());
It looks like at least the Developer: Generate Color Theme From Current Settings
exports every setting:
from plastic.
That certainly is complex. Thanks for doing the research. I'm going to close this as it looks like a Visual Studio theme would require manual building.
from plastic.
Related Issues (20)
- Add sash.hoverBorder
- Enhancement: Alternate color for debugging HOT 8
- Style `tab.lastPinnedBorder`
- A suggestion on the background color HOT 1
- Consider a Slack theme HOT 6
- Add credits to website
- VSCode Plastic Legacy v2 theme is now DEPRECATED, looking for maintainer HOT 9
- Thank you for making this HOT 4
- Shared bounty for community-contributed ports to other IDE's? HOT 7
- Updated terminal colours HOT 3
- Bracket pair colorization ideas HOT 3
- Sticky scroll header support HOT 1
- New update appears to have broken class color. HOT 4
- How to change the class color? HOT 2
- Some syntax elements have turned pink lately HOT 1
- Possibly reconsider the pink (or add a theme option/README guide to customizing) HOT 6
- Remove JetBrains theme from community themes HOT 3
- Theme VSCode `editor.linkedEditingBackground` HOT 2
- Plastic is currently unavailable to users of the open source vscode HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from plastic.