You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: CONTRIBUTING.md
+6-42Lines changed: 6 additions & 42 deletions
Original file line number
Diff line number
Diff line change
@@ -197,53 +197,17 @@ JavaScript/TypeScript. Please install the Prettier extension in VS Code and enab
197
197
198
198
Continue has a set of named theme colors that we map to extension colors and tailwind classes, which can be found in [gui/src/styles/theme.ts](gui/src/styles/theme.ts)
199
199
200
-
When developing the extension GUI:
200
+
Guidelines for using theme colors:
201
201
202
202
- Use Tailwind colors whenever possible. If developing in VS Code, download the [Tailwind CSS Intellisense extension](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) for great suggestions
203
203
- Avoid using any explicit classes and CSS variables outside the theme (e.g. `text-yellow-400`)
204
204
205
-
#### How Extension colors work
205
+
Guidelines for adding/updating theme colors:
206
206
207
-
Continue maps color values from VSCode/Jetbrains to its theme colors, and uses sensible defaults for a dark theme with blue accents.
208
-
209
-
VS Code injects CSS variables into the webview based on the current theme. [Docs](https://code.visualstudio.com/api/extension-guides/webview#theming-webview-content). [Colors](https://code.visualstudio.com/api/references/theme-color). [Example actual CSS variables list](https://www.notion.so/Extension-Theme-Colors-1fa1d55165f78097b551e3bc296fcf76?pvs=21). These colors are also automatically updated on theme changes.
210
-
211
-
Jetbrains has two main groups of colors that we can choose from and then inject manually into the webview:
212
-
213
-
-`EditorColorsManager` has colors mostly used in the actual code editor
214
-
-`JBColor` has named colors that most themes have for panels and components outside the main editor
215
-
- Docs for both of these aren’t great but models are pretty good at suggesting named/editor color options
216
-
217
-
On startup, a messaging handshake occurs with the IDE using the `jetbrains/getColors` and `jetbrains/setColors` messages, which send/receive a record of continue theme color name to hex (see `GetTheme.kt`), and update the extension colors.
218
-
219
-
Jetbrains colors are also cached in local storage and retrieved on startup to reduce flashing, since the CSS variables aren’t automatically injected. For now, under the hood, Jetbrains theme colors are simply written to every associated vs code CSS variable.
220
-
221
-
As an example, take the `error` Continue theme color:
222
-
223
-
- can be used with the tailwind class e.g. `bg-error`
224
-
- uses the expression `var(--vscode-editorError-foreground, var(--vscode-list-errorForeground, #f44336))` under the hood, which works out of the box in VS Code
225
-
- Is retrieved in Jetbrains using named colors with fallbacks like `namedColor("ValidationError.errorColor") ?: namedColor("Component.errorForeground") ?: namedColor("Label.errorForeground")` , and the outcome (or default `#f44336` if not found in theme) is written to the document style variables `--vscode-editorError-foreground` and `var(--vscode-list-errorForeground`
226
-
227
-
#### Updating Extension Colors
228
-
229
-
You can improve the extension colors in a variety of ways
230
-
231
-
- Moving current explicit colors and CSS variables to use the theme colors
232
-
- Updating the theme `vars` property to improve VS Code CSS variable fallbacks
233
-
- Updating the `GetTheme.kt` values for Jetbrains
234
-
- Tweaking the default theme values
235
-
236
-
To add a new color:
237
-
238
-
- Add an entry to `THEME_COLORS` in `gui/src/styles/theme.ts` that contains a sensible color name, the best VS CSS variables (`vars`), and a sensible default color for the default theme (`default`)
239
-
- Go to `GetTheme.kt` and find a sensible Jetbrains color derivation for the new color, and include it in the `getTheme` output.
240
-
- Add the corresponding tailwind class in `tailwind.config.js` using the provided `varWithFallback(colorName)` util
241
-
242
-
**Using the Theme Test Page**
243
-
244
-
When updating/adding colors, check the colors on several popular/varied themes to make sure it looks good, in both Jetbrains and VS Code. To help, you can use the Theme Test Page, which can be found in development mode by going to the `Help` section of the extension settings page and clicking `Theme Test Page`.
245
-
246
-
This page shows examples of several components using the current theme colors, and shows which colors (jetbrains) or classes (vs code) are missing for the current theme. It also shows the full theme colors and defaults for comparison.
207
+
- Choose sensible VS Code variables to add/update in [gui/src/styles/theme.ts](gui/src/styles/theme.ts) (see [here](https://code.visualstudio.com/api/references/theme-color) and [here](https://www.notion.so/1fa1d55165f78097b551e3bc296fcf76?pvs=25) for inspiration)
208
+
- Choose sensible Jetbrains named colors to add/update in `GetTheme.kt` (flagship LLMs can give you good suggestions to try)
209
+
- Update `tailwind.config.js` if needed
210
+
- Use the Theme Test Page to check colors. This can be accessed by going to `Settings` -> `Help` -> `Theme Test Page` in dev/debug mode.
0 commit comments