GithubMirror/continue
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Theme colors rule and contributing guide section

Browse Source
This commit is contained in:
Dallin Romney
2025-05-22 15:21:52 -07:00
parent 45cb4c44a4
commit 954ba3fbd1
2 changed files with 122 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
.continue/rules/colors.yaml Normal file
View File

@@ -0,0 +1,27 @@
name: GUI
version: 0.0.1
schema: v1
rules:
- name: Extension Color Themes
rule: |
When adding colors to components, use tailwind color classes.
Do NOT use explicit colors like text-gray-400. Instead, use theme colors.
The common available theme colors are:
- For normal text: foreground, description, description-muted
- For other text, icons, etc: success, warning, error, accent, link
- For general components background, border, border-focus
- For specific components:
- Button: primary, primary-foreground, primary-hover, secondary, secondary-foreground, secondary-hover
- Input: input, input-foreground, input-border, input-placeholder
- Badge: badge, badge-foreground
- List/Dropdown items: list-hover, list-active, list-active-foreground
- Code Editor: editor, editor-foreground
Any of these colors can be used in tailwind e.g. bg-primary, text-success, border-error, hover:bg-list-hover, etc.
globs: "gui/**/*.ts"
# Excluding the following less-used colors:
# Command (only used by tip-tap): command, command-foreground, command-border, command-border-focus
# Find widget colors: find-match, find-match-selected
# table-oddRow

137
CONTRIBUTING.md
View File

@@ -3,35 +3,36 @@
## Table of Contents
- [Contributing to Continue](#contributing-to-continue)
- [Table of Contents](#table-of-contents)
- [Table of Contents](#table-of-contents)
- [❤️ Ways to Contribute](#️-ways-to-contribute)
- [👋 Continue Contribution Ideas](#-continue-contribution-ideas)
- [🐛 Report Bugs](#-report-bugs)
- [✨ Suggest Enhancements](#-suggest-enhancements)
- [📖 Updating / Improving Documentation](#-updating--improving-documentation)
- [Running the Documentation Server Locally](#running-the-documentation-server-locally)
- [Method 1: NPM Script](#method-1-npm-script)
- [Method 2: VS Code Task](#method-2-vs-code-task)
- [🧑‍💻 Contributing Code](#-contributing-code)
- [Environment Setup](#environment-setup)
- [Pre-requisites](#pre-requisites)
- [Fork the Continue Repository](#fork-the-continue-repository)
- [VS Code](#vs-code)
- [Debugging](#debugging)
- [JetBrains](#jetbrains)
- [Our Git Workflow](#our-git-workflow)
- [Development workflow](#development-workflow)
- [Formatting](#formatting)
- [Testing](#testing)
- [Review Process](#review-process)
- [Getting help](#getting-help)
- [Contribtuing new LLM Providers/Models](#contribtuing-new-llm-providersmodels)
- [Adding an LLM Provider](#adding-an-llm-provider)
- [Adding Models](#adding-models)
- [📐 Continue Architecture](#-continue-architecture)
- [Continue VS Code Extension](#continue-vs-code-extension)
- [Continue JetBrains Extension](#continue-jetbrains-extension)
- [Contibutor License Agreement](#contributor-license-agreement-cla)
- [👋 Continue Contribution Ideas](#-continue-contribution-ideas)
- [🐛 Report Bugs](#-report-bugs)
- [✨ Suggest Enhancements](#-suggest-enhancements)
- [📖 Updating / Improving Documentation](#-updating--improving-documentation)
- [Running the Documentation Server Locally](#running-the-documentation-server-locally)
- [Method 1: NPM Script](#method-1-npm-script)
- [Method 2: VS Code Task](#method-2-vs-code-task)
- [🧑‍💻 Contributing Code](#-contributing-code)
- [Environment Setup](#environment-setup)
- [Pre-requisites](#pre-requisites)
- [Fork the Continue Repository](#fork-the-continue-repository)
- [VS Code](#vs-code)
- [Debugging](#debugging)
- [JetBrains](#jetbrains)
- [Our Git Workflow](#our-git-workflow)
- [Development workflow](#development-workflow)
- [Formatting](#formatting)
- [Theme Colors](#theme-colors)
- [Testing](#testing)
- [Review Process](#review-process)
- [Getting help](#getting-help)
- [Contribtuing new LLM Providers/Models](#contribtuing-new-llm-providersmodels)
- [Adding an LLM Provider](#adding-an-llm-provider)
- [Adding Models](#adding-models)
- [📐 Continue Architecture](#-continue-architecture)
- [Continue VS Code Extension](#continue-vs-code-extension)
- [Continue JetBrains Extension](#continue-jetbrains-extension)
- [Contibutor License Agreement](#contributor-license-agreement-cla)
# ❤️ Ways to Contribute
@@ -60,9 +61,9 @@ an enhancement are:
- Create an issue
- First, check whether a similar proposal has already been made
- If not, [create an issue](https://github.com/continuedev/continue/issues)
- Please describe the enhancement in as much detail as you can, and why it would be useful
- First, check whether a similar proposal has already been made
- If not, [create an issue](https://github.com/continuedev/continue/issues)
- Please describe the enhancement in as much detail as you can, and why it would be useful
- Join the [Continue Discord](https://discord.gg/NWtdYexhMs) and tell us about your idea in the `#feedback` channel
@@ -140,12 +141,12 @@ nvm use
2. Start debugging:
1. Switch to Run and Debug view
2. Select `Launch extension` from drop down
3. Hit play button
4. This will start the extension in debug mode and open a new VS Code window with it installed
1. The new VS Code window with the extension is referred to as the _Host VS Code_
2. The window you started debugging from is referred to as the _Main VS Code_
1. Switch to Run and Debug view
2. Select `Launch extension` from drop down
3. Hit play button
4. This will start the extension in debug mode and open a new VS Code window with it installed
1. The new VS Code window with the extension is referred to as the _Host VS Code_
2. The window you started debugging from is referred to as the _Main VS Code_
3. To package the extension, run `npm run package` in the `extensions/vscode` directory, select `Tasks: Run Task` and
then select `vscode-extension:package`. This will generate `extensions/vscode/build/continue-{VERSION}.vsix`, which
@@ -192,6 +193,58 @@ To keep the Continue codebase clean and maintainable, we expect the following fr
Continue uses [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) to format
JavaScript/TypeScript. Please install the Prettier extension in VS Code and enable "Format on Save" in your settings.
### Theme Colors
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)
When developing the extension GUI:
- 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
- Avoid using any explicit classes and CSS variables outside the theme (e.g. `text-yellow-400`)
#### How Extension colors work
Continue maps color values from VSCode/Jetbrains to its theme colors, and uses sensible defaults for a dark theme with blue accents.
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.
Jetbrains has two main groups of colors that we can choose from and then inject manually into the webview:
- `EditorColorsManager` has colors mostly used in the actual code editor
- `JBColor` has named colors that most themes have for panels and components outside the main editor
- Docs for both of these aren’t great but models are pretty good at suggesting named/editor color options
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.
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.
As an example, take the `error` Continue theme color:
- can be used with the tailwind class e.g. `bg-error`
- uses the expression `var(--vscode-editorError-foreground, var(--vscode-list-errorForeground, #f44336))` under the hood, which works out of the box in VS Code
- 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`
#### Updating Extension Colors
You can improve the extension colors in a variety of ways
- Moving current explicit colors and CSS variables to use the theme colors
- Updating the theme `vars` property to improve VS Code CSS variable fallbacks
- Updating the `GetTheme.kt` values for Jetbrains
- Tweaking the default theme values
To add a new color:
- 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`)
- Go to `GetTheme.kt` and find a sensible Jetbrains color derivation for the new color, and include it in the `getTheme` output.
- Add the corresponding tailwind class in `tailwind.config.js` using the provided `varWithFallback(colorName)` util
**Using the Theme Test Page**
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`.
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.
### Testing
We have a mix of unit, functional, and e2e test suites, with a primary focus on functional testing. These tests run on
@@ -239,10 +292,10 @@ model:
- [AddNewModel page](./gui/src/pages/AddNewModel/configs/) - This directory defines which model options are shown in the
side bar model selection UI. To add a new model:
1. Add a `ModelPackage` entry for the model into [configs/models.ts](./gui/src/pages/AddNewModel/configs/models.ts),
following the lead of the many examples near the top of the file
2. Add the model within its provider's array
to [configs/providers.ts](./gui/src/pages/AddNewModel/configs/providers.ts) (add provider if needed)
1. Add a `ModelPackage` entry for the model into [configs/models.ts](./gui/src/pages/AddNewModel/configs/models.ts),
following the lead of the many examples near the top of the file
2. Add the model within its provider's array
to [configs/providers.ts](./gui/src/pages/AddNewModel/configs/providers.ts) (add provider if needed)
- LLM Providers: Since many providers use their own custom strings to identify models, you'll have to add the
translation from Continue's model name (the one you added to `index.d.ts`) and the model string for each of these
providers: [Ollama](./core/llm/llms/Ollama.ts), [Together](./core/llm/llms/Together.ts),
@@ -264,4 +317,4 @@ We require all contributors to accept the CLA and have made it as easy as commen
I have read the CLA Document and I hereby sign the CLA
```
3. The CLA‑Assistant bot records your signature in the repo and marks the status check as passed.
3. The CLA‑Assistant bot records your signature in the repo and marks the status check as passed.