Skip to content

Commit e8bd071

Browse files
silentoplayzsilentoplayz
committed
add CodeMirror Themes section
1 parent 244e5d9 commit e8bd071

File tree

1 file changed

+88
-7
lines changed

1 file changed

+88
-7
lines changed

‎docs/tutorials/theming.mdx‎

Lines changed: 88 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -70,17 +70,17 @@ A theme is a single JSON object with the following properties. Only `id`, `name`
7070
| `emoji` | `string` | An emoji to represent your theme in the UI. |
7171
| `metaThemeColor` | `string` | A hex color (`#RRGGBB`) for the browser's UI elements. |
7272
| `variables` | `object` | An object where keys are CSS variable names and values are the new colors. |
73-
| `gradient` | `object` | Defines a background gradient. See details below. |
73+
| `gradient` | `object` | Defines a background gradient. See the "Backgrounds" section for details. |
7474
| `tsparticlesConfig` | `object` | A configuration object for [tsParticles](https://particles.js.org/). |
7575
| `animationScript` | `string` | A string of JavaScript code to be run in a web worker for custom canvas animations. |
7676
| `css` | `string` | A string of custom CSS rules to be injected. |
7777
| `sourceUrl` | `string` | A URL pointing to the raw `theme.json` file, allowing for automatic update checks. |
7878
| `systemBackgroundImageUrl` | `string` | URL for an image to be used as the main background for the entire UI. |
79-
| `systemBackgroundImageDarken`| `number` | A value from 0 to 1 to control the darkness of the system background image. |
79+
| `systemBackgroundImageDarken`| `number` | A value from 0 to 100 to control the darkness of the system background image. |
8080
| `chatBackgroundImageUrl` | `string` | URL for an image to be used as the background for the chat message area. |
81-
| `chatBackgroundImageDarken` | `number` | A value from 0 to 1 to control the darkness of the chat background image. |
81+
| `chatBackgroundImageDarken` | `number` | A value from 0 to 100 to control the darkness of the chat background image. |
8282
| `toggles` | `object` | An object to selectively enable or disable theme features. See the "Advanced Theming" section for details. |
83-
| `codeMirrorTheme` | `string` | The name of a [CodeMirror theme](https://codemirror.net/5/demo/theme.html) for the text editor. |
83+
| `codeMirrorTheme` | `string` | The name of a [CodeMirror theme](https://codemirror.net/5/demo/theme.html) for the text editor. See the "CodeMirror Themes" section for a full list of options. |
8484

8585
### Creating a Theme
8686

@@ -123,6 +123,59 @@ Here are the available toggles:
123123
- `systemBackgroundImage`
124124
- `chatBackgroundImage`
125125

126+
### CodeMirror Themes
127+
128+
You can customize the appearance of the code editor in Open WebUI by specifying a CodeMirror theme in the `codeMirrorTheme` property of your `theme.json`. A wide variety of themes are available to choose from.
129+
130+
Here is a list of the available CodeMirror themes:
131+
132+
- `one-dark` (Default)
133+
- `abcdef`
134+
- `abyss`
135+
- `androidstudio`
136+
- `andromeda`
137+
- `atomone`
138+
- `aura`
139+
- `bbedit`
140+
- `basicLight`
141+
- `basicDark`
142+
- `bespin`
143+
- `copilot`
144+
- `consoleLight`
145+
- `consoleDark`
146+
- `dracula`
147+
- `darcula`
148+
- `duotoneLight`
149+
- `duotoneDark`
150+
- `eclipse`
151+
- `githubLight`
152+
- `githubDark`
153+
- `gruvboxDark`
154+
- `gruvboxLight`
155+
- `materialLight`
156+
- `materialDark`
157+
- `monokai`
158+
- `monokaiDimmed`
159+
- `kimbie`
160+
- `noctisLilac`
161+
- `nord`
162+
- `okaidia`
163+
- `quietlight`
164+
- `red`
165+
- `solarizedLight`
166+
- `solarizedDark`
167+
- `sublime`
168+
- `tokyoNight`
169+
- `tokyoNightStorm`
170+
- `tokyoNightDay`
171+
- `tomorrowNightBlue`
172+
- `whiteLight`
173+
- `whiteDark`
174+
- `vscodeDark`
175+
- `vscodeLight`
176+
- `xcodeLight`
177+
- `xcodeDark`
178+
126179
### The Documentation Tab
127180
The Theme Editor includes a "Documentation" tab, which is a valuable resource when creating themes. It contains a table of all available CSS variables with their default values and descriptions, as well as the full theme schema.
128181

@@ -147,7 +200,34 @@ This theme creates a "Forest" look by overriding the default CSS color variables
147200
}
148201
```
149202

150-
### Example 2: Gradient Background Theme
203+
### Backgrounds
204+
205+
You can customize the background of the application in two ways: with a gradient or with an image.
206+
207+
#### Gradient Background
208+
209+
The `gradient` property allows you to create a smooth, and optionally animated, color gradient for the main UI background.
210+
211+
| Property | Type | Description |
212+
| ----------- | --------- | ----------------------------------------- |
213+
| `enabled` | `boolean` | Whether the gradient is enabled. |
214+
| `animated` | `boolean` | Whether the gradient should be animated. |
215+
| `colors` | `string[]`| An array of hex color strings. |
216+
| `direction` | `number` | The direction of the gradient in degrees. |
217+
| `intensity` | `number` | The opacity of the gradient (0-100). |
218+
219+
#### Background Images
220+
221+
You can set separate background images for the main UI and the chat area.
222+
223+
| Property | Type | Description |
224+
| ----------------------------- | -------- | -------------------------------------------------------------------- |
225+
| `systemBackgroundImageUrl` | `string` | URL for an image to be used as the main background for the entire UI. |
226+
| `systemBackgroundImageDarken` | `number` | A value from 0 to 100 to control the darkness of the system background image. |
227+
| `chatBackgroundImageUrl` | `string` | URL for an image to be used as the background for the chat message area. |
228+
| `chatBackgroundImageDarken` | `number` | A value from 0 to 100 to control the darkness of the chat background image. |
229+
230+
### Example 2: Animated Gradient Background
151231

152232
This theme adds a subtle, animated gradient to the background.
153233

@@ -159,6 +239,7 @@ This theme adds a subtle, animated gradient to the background.
159239
"emoji": "🌊",
160240
"gradient": {
161241
"enabled": true,
242+
"animated": true,
162243
"colors": ["#a8c0ff", "#3f2b96"],
163244
"direction": 120,
164245
"intensity": 80
@@ -271,9 +352,9 @@ This theme adds a background image to the chat and the overall system.
271352
"base": "oled-dark",
272353
"emoji": "🚀",
273354
"systemBackgroundImageUrl": "https://example.com/path/to/galaxy.jpg",
274-
"systemBackgroundImageDarken": 0.5,
355+
"systemBackgroundImageDarken": 50,
275356
"chatBackgroundImageUrl": "https://example.com/path/to/space.jpg",
276-
"chatBackgroundImageDarken": 0.3
357+
"chatBackgroundImageDarken": 30
277358
}
278359
```
279360

0 commit comments

Comments
 (0)