In documentation of VS Code Extensions, it is mentioned that you can define your own color: https://code.visualstudio.com/api/references/contribution-points#contributes.colors
How can I use this color in the Color Theme I create?
For example, I have the following in package.json
"contributes": {
"themes": [
{
"label": "My Color Theme",
"uiTheme": "vs-dark",
"path": "./themes/my-color-theme.json"
}
],
"colors": [
{
"id": "color.gold",
"description": "Gold",
"defaults": {
"dark": "#FFB71B",
"light": "#FFB71B",
"highContrast": "#FFB71B"
}
}
]
}
And the following in my-color-theme.json (I would like to use "gold" for one of the item but it does not work):
{
"name": "My Color Theme",
"type": "dark",
"colors": {
"editor.background": "#000000",
"editor.foreground": "#FFFFFF",
"sideBarTitle.foreground": "color.gold",
},
...
}
Thanks
Color entries can only contain color values of the form #RGB, #RGBA, #RRGGBB or #RRGGBBAA, nothing else. No other color format (hsl etc.) or named color is supported. Hence "sideBarTitle.foreground": "color.gold" is an invalid entry.
Related
I am trying to develope a simple messagaging extension app for Microsoft Teams. With the use of Task Modules I can load a simple Adative Card. Works as designed. The only problem I have with it, is that my Adaptive Card has a color issue withing Microsoft Teams in Dark Mode.
Take a look at the image below. 1 shows a very simple Adaptive Card designed via https://adaptivecards.io/designer/ (preview mode). 2 the very same Adaptive Card but now an actual snippet from Microsoft Teams. As you can see the card below has some color issues which makes the input hard to see.
Here is the code I've used:
public async handleTeamsMessagingExtensionFetchTask(
context: TurnContext,
action: any
): Promise<any> {
const adaptiveCard = CardFactory.adaptiveCard({
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "${title}"
},
{
"type": "Input.Text",
"placeholder": "Placeholder text"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3"
});
return {
task: {
type: 'continue',
value: {
card: adaptiveCard,
height: 535,
title: '${title}',
url: null,
width: 500
}
}
};
}
There's not much that can be done about the input box itself in this case, but maybe try changing the colour of the label above it, something like this (I've changed some of your property names as well, as they were invalid case - things like "medium" instead of "Medium":
"size": "medium",
"weight": "bolder",
"text": "${title}",
"color": "good"
Color allows the following values:
"default"
"dark"
"light"
"accent"
"good"
"warning"
"attention"
If you nest your Text input into a Container, you are able change the Container's style to provide a coloured background upon which the Text input sits.
It's not necessarily right for your use case, but it could be a workaround of interest
Container Style colour options
{
"type": "Container",
"style": "emphasis",
"bleed": true,
"items": [
{
"type": "TextBlock",
"text": "Request New Ticket",
"wrap": true,
"fontType": "Default",
"style": "heading",
"size": "Large",
"color": "Good",
"weight": "Bolder",
"horizontalAlignment": "Center"
}
]
}
I use the same font(Consolas) in VScode and sublime. But it looks different in the same place:
Here are my sublime settings:
{
"auto_complete_selector": "source,text",
"color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme",
"font_face": "Consolas",
"font_size": 12,
"ignored_packages":
[
],
"theme": "Default.sublime-theme"
}
Here are my vscode settings:
"materialTheme.accent": "Blue",
"editor.fontFamily": "Consolas, 'Courier New', monospace",
"editor.fontWeight": 520,
"editor.codeLensFontSize": 11,
"editor.fontSize": 15,
"editor.formatOnType": true,
"debug.console.fontFamily": "Cascadia Mono",
"python.showStartPage": false,
"workbench.editorAssociations": [
{
"viewType": "jupyter.notebook.ipynb",
"filenamePattern": "*.ipynb"
}
],
"explorer.confirmDelete": false,
"todo-tree.tree.showScanModeButton": true,
"editor.fontLigatures": true,
"editor.tokenColorCustomizations": {
"comments": "#7ea9eb"
My question is: How to make my vscode font slant like sublime?
According to the VS Code documentation, you can customize your theme color by using the editor.tokenColorCustomizations rule in your user settings:
Open your settings.json and add the following rule first (replace YOUR THEME NAME HERE with the name of your color theme):
"editor.tokenColorCustomizations": {
"[YOUR THEME NAME HERE]": {
"textMateRules": []
}
}
Open a Python file of your choice. Then, open Command Palette with Ctrl+Shift+P and run "Developer: Inspect Editor Tokens and Scopes"
Click on the keyword you wish make it italic. For example, we click on the class keyword to view its TextMate scopes. Copy the first TextMate scope ID as highlighted:
Go back to your settings.json. Inside the textMateRules array, insert a new object with the scope property being the TextMate scope ID you just copied.
"editor.tokenColorCustomizations": {
"[YOUR THEME NAME HERE]": {
"textMateRules": [
{
"scope": "storage.type.class.python",
"settings": {
"fontStyle": "italic"
}
}
]
}
}
Save your settings.json and you should see the class keyboard in italics
Note
You can append more objects in the textMateRules array to make the font italic for more keywords. For example:
"editor.tokenColorCustomizations": {
"[YOUR THEME NAME HERE]": {
"textMateRules": [
{
"scope": "variable.parameter.function.language.special.self.python",
"settings": {
"fontStyle": "italic"
}
},
{
"scope": "storage.type.class.python",
"settings": {
"fontStyle": "italic"
}
}
]
}
},
For the below data
[
{
"name": "iPhone XR Black 64GB",
"color": "red"
},
{
"name": "iPhone XS Gold 64GB",
"color": "blue"
},
{
"name": "Galaxy Note9 Ocean Blue 128GB",
},
{
"name": "G7 ThinQ™ Platinum Gray 64GB",
},
{
"name": "Moto E5 Play 16GB",
}
]
If I filter color:red it should return the records matching the following criterias.
If the color attribute exists it should be red.
If the color attribute doesn't exist.
Output would be
[
{
"name": "iPhone XR Black 64GB",
"color": "red"
},
{
"name": "Galaxy Note9 Ocean Blue 128GB",
},
{
"name": "G7 ThinQ™ Platinum Gray 64GB",
},
{
"name": "Moto E5 Play 16GB",
}
]
Click here for flow chart
Algolia is a search engine, meaning that it returns matching records as is. It doesn't perform any transformations, and you can't inject logic into the engine's behavior.
With your above dataset, if you run an empty search ('') with a filter "color:red", Algolia will only return the following record:
{
"name": "iPhone XR Black 64GB",
"color": "red"
}
If you want all records (in the limit of 1,000 records), you need to perform an empty query with no filters.
I'm trying to set other styles for slack buttons besides the default 3:
- primary (green)
- danger (red)
- default (grey)
I would like to set other colors for the buttons for example orange.
I'm aware that it's possible to set custom colors for attachments by specifying hexcodes.
Is there a way to specify custom colors for slack buttons?
Here's what I tried:
{
"text": "Please rate this trip.",
"attachments": [
{
"callback_id": "rate_trip",
"color": "#3AA3E3",
"attachment_type": "default",
"actions": [
{
"name": "yes",
"text": "yes :thumbsup:",
"type": "button",
"value": "yes",
"style": "primary"
},
{
"name": "no",
"text": "no :thumbsdown:",
"type": "button",
"value": "no",
"style": "danger"
},
// I'd like to make the style for this to be orange but it defaults to grey.
{
"name": "maybe",
"text": "maybe :neutral_face:",
"type": "button",
"value": "maybe",
"style": "#FFA500",
}
}
]
}
]
}
Here's a screenshot of the outcome of this code.
No. Slack does not allow you do use custom colors for buttons. As you mentioned you can only use "styles" (in the style field) to color a button and are limited to default, primary and danger.
See here for the official documentation on this very topic.
While running Sublime Text 3 and VS Code (or Atom) with the Monokai color theme, the Sublime Text syntax highlighting uses blue for function calls, such as in the example below
However, when I open the same code in VS Code using the monokai theme, functions are not painted blue
I would really like to change that, the code looks much better with function calls highlighted. However, I looked around the web and couldn't find how to change this behavior. Does anyone have any tips for that?
Thanks!
SEE UPDATE BELOW!
Seems like I've found a temporary solution. Go to this folder (if you are on Mac) /Applications/Visual Studio Code.app/Contents/Resources/app/extensions/theme-monokai/themes and put this code in monokai-color-theme.json file:
{
"name": "Function call",
"scope": "meta.function-call.generic",
"settings": {
"foreground": "#66d9efff"
}
},
Here is an example how it can look like:
screenshot
But keep in mind, that after theme update this changes may disappear!
UPDATE:
After having a couple more troubles with highlighting, I decided to upload the file with theme to GitHub and keep it up to date. So, if you don't want to dive into the code, just look in my repository: https://github.com/spyker77/monokai-theme-extended
UPDATE (April 2021)
It turns out that the previous solution is not sustainable. Therefore at the moment a better one could be:
In you Visual Studio Code go to "Code" => "Preferences" => "Color Theme" and pick Monokai;
Open settings.json file (how-to);
There will probably already be a bunch of settings in there, so all you need to do is just add the following customisations at the end and before the closing brace (don't forget a trailing comma after the last setting you continue):
"editor.tokenColorCustomizations": {
"[Monokai]": {
"textMateRules": [
{
"name": "Decorator definition decorator",
"scope": "punctuation.definition.decorator.python",
"settings": {
"foreground": "#F92672"
}
},
{
"name": "Meta function-call",
"scope": "meta.function-call.generic.python",
"settings": {
"foreground": "#66D9EF"
}
},
{
"name": "Storage type function async",
"scope": "storage.type.function.async.python",
"settings": {
"foreground": "#F92672",
}
},
{
"name": "Punctuation separator period",
"scope": "punctuation.separator.period.python",
"settings": {
"foreground": "#F8F8F2",
}
},
{
"name": "Entity name function decorator",
"scope": "entity.name.function.decorator.python",
"settings": {
"foreground": "#66D9EF",
}
},
{
"name": "Entity name type class",
"scope": "entity.name.type.class.python",
"settings": {
"fontStyle": ""
}
},
{
"name": "Entity other inherited-class",
"scope": "entity.other.inherited-class.python",
"settings": {
"fontStyle": "italic"
}
},
{
"name": "Support type python",
"scope": "support.type.python",
"settings": {
"fontStyle": ""
}
},
{
"name": "String quoted docstring multi python",
"scope": "string.quoted.docstring.multi.python",
"settings": {
"foreground": "#88846F",
}
}
]
}
}
after trying for server hours finally found a solution and I came back to you to share the solution since I tried the answer above and couldn't make it work.
it turns out that the problem I with VScode extensions (python for Vscode), so disable that first,extension
then go to your setting.json file like that how to open setting
add this to the top of your file
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "meta.function-call.generic",
"settings": {
"foreground":"#19D1E5"
}
}
]
},
and restart VScode and this should work, btw I am using monokai vibrent, and I am sure it will work in any theme you like.
setting.json
like this here
In settings.json:
"editor.tokenColorCustomizations": {
"[Monokai]": {
{
"scope": "entity.name.function",
"settings": {
"foreground": "#fdc306d0", // use your desired color
"fontStyle": "underline" // I like this, foreground color has some reduced opacity
}
}
}
}
might do the trick.