Skip to content

Commit bc068b7

Browse files
SamVerschuerenSamVerschueren
committed
chore: document how to theme the editor
1 parent 2a93edb commit bc068b7

File tree

1 file changed

+100
-22
lines changed
  • docs/tutorialkit.dev/src/content/docs/reference

1 file changed

+100
-22
lines changed

‎docs/tutorialkit.dev/src/content/docs/reference/theming.mdx

Lines changed: 100 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -378,31 +378,109 @@ The previews can show one or multiple websites.
378378
| ------------------------------------ | --------------------------------------------------- |
379379
| `--tk-elements-previews-borderColor` | The color of the borders between multiple previews. |
380380

381+
### Editor
382+
383+
The editor is an important part of TutorialKit as it allows you to write and edit code.
384+
385+
| Token | Description |
386+
| ----------------------------------------------------- | ------------------------------------------------------------ |
387+
| `--tk-elements-editor-textColor` | The text color of the editor. |
388+
| `--tk-elements-editor-backgroundColor` | The background color of the editor. |
389+
| `--tk-elements-editor-activeLineBackgroundColor` | The background color of the active line in the editor. |
390+
| `--tk-elements-editor-cursorColor` | The color of the cursor. |
391+
| `--tk-elements-editor-matchingBracketBackgroundColor` | The background color of the matching bracket. |
392+
| `--tk-elements-editor-panels-borderColor` | The border color between different panels inside the editor. |
393+
394+
#### Selection
395+
396+
Text selections inside the editor can be styled with the following tokens:
397+
398+
| Token | Description |
399+
| ---------------------------------------------------------- | --------------------------------------------------------------- |
400+
| `--tk-elements-editor-selection-backgroundColor` | The background color of selected text in the editor. |
401+
| `--tk-elements-editor-selection-backgroundOpacity` | The background opacity of selected text in the editor. |
402+
| `--tk-elements-editor-selection-inactiveBackgroundColor` | The background color of inactive selected text in the editor. |
403+
| `--tk-elements-editor-selection-inactiveBackgroundOpacity` | The background opacity of inactive selected text in the editor. |
404+
405+
#### Gutter
406+
407+
The gutter refers to the area on the left side of the editor that shows line numbers and other information.
408+
409+
| Token | Description |
410+
| ------------------------------------------------- | ------------------------------------------------ |
411+
| `--tk-elements-editor-gutter-textColor` | The text color of the gutter. |
412+
| `--tk-elements-editor-gutter-backgroundColor` | The background color of the gutter. |
413+
| `--tk-elements-editor-gutter-activeLineTextColor` | The text color of the gutter on the active line. |
414+
415+
#### Fold Gutter
416+
417+
The fold gutter is part of the gutter, and is the area next to it that shows the folding icons.
418+
419+
| Token | Description |
420+
| ------------------------------------------------ | ---------------------------------------------------------------------------- |
421+
| `--tk-elements-editor-foldGutter-textColor` | The text color of the fold gutter. |
422+
| `--tk-elements-editor-foldGutter-textColorHover` | The text color of the fold gutter when hovering over an item in that gutter. |
423+
424+
#### Search
425+
426+
The search panel is the panel that shows up when you search text in the editor.
427+
428+
| Token | Description |
429+
| -------------------------------------------------------------- | --------------------------------------------------------------------------- |
430+
| `--tk-elements-editor-search-textColor` | The text color of the search panel. |
431+
| `--tk-elements-editor-search-backgroundColor` | The background color of the search panel. |
432+
| `--tk-elements-editor-search-closeButton-textColor` | The text color of the close button in the search panel. |
433+
| `--tk-elements-editor-search-closeButton-textColorHover` | The text color of the close button in the search panel when hovering. |
434+
| `--tk-elements-editor-search-closeButton-backgroundColor` | The background color of the close button in the search panel. |
435+
| `--tk-elements-editor-search-closeButton-backgroundColorHover` | The background color of the close button in the search panel when hovering. |
436+
| `--tk-elements-editor-search-button-textColor` | The text color of the buttons in the search panel. |
437+
| `--tk-elements-editor-search-button-textColorHover` | The text color of the buttons in the search panel when hovering. |
438+
| `--tk-elements-editor-search-button-backgroundColor` | The background color of the buttons in the search panel. |
439+
| `--tk-elements-editor-search-button-backgroundColorHover` | The background color of the buttons in the search panel when hovering. |
440+
| `--tk-elements-editor-search-button-borderColor` | The border color of the buttons in the search panel. |
441+
| `--tk-elements-editor-search-button-borderColorHover` | The border color of the buttons in the search panel when hovering. |
442+
| `--tk-elements-editor-search-button-borderColorFocused` | The border color of the buttons in the search panel when focused. |
443+
| `--tk-elements-editor-search-input-backgroundColor` | The background color of the search input field. |
444+
| `--tk-elements-editor-search-input-borderColor` | The border color of the search input field. |
445+
| `--tk-elements-editor-search-input-borderColorFocused` | The border color of the search input field when focused. |
446+
447+
#### Tooltip
448+
449+
The tooltip is the small popup that shows up when you hover over an item or when the editor shows suggestions when autocompleting code.
450+
451+
| Token | Description |
452+
| ------------------------------------------------------ | --------------------------------------------------------- |
453+
| `--tk-elements-editor-tooltip-textColor` | The text color of the tooltip. |
454+
| `--tk-elements-editor-tooltip-textColorSelected` | The text color of the selected item in the tooltip. |
455+
| `--tk-elements-editor-tooltip-backgroundColor` | The background color of the tooltip. |
456+
| `--tk-elements-editor-tooltip-backgroundColorSelected` | The background color of the selected item in the tooltip. |
457+
| `--tk-elements-editor-tooltip-borderColor` | The border color of the tooltip. |
458+
381459
### Terminal
382460

383461
The terminal refers to both a [read-only and an interactive terminal](../../guides/configuration#terminal).
384462

385463
![Terminal](./images/theming-terminal.png)
386464

387-
| Token | Description |
388-
| -------------------------------------------------- | ----------------------------------------------------- |
389-
| `--tk-elements-terminal-backgroundColor` | The background color of the terminal. |
390-
| `--tk-elements-terminal-textColor` | The text color of the terminal. |
391-
| `--tk-elements-terminal-cursorColor` | The color of the terminal cursor. |
392-
| `--tk-elements-terminal-selection-backgroundColor` | The background color of selected text in the terminal.|
393-
| `--tk-elements-terminal-color-black` | The color of black text in the terminal. |
394-
| `--tk-elements-terminal-color-red` | The color of red text in the terminal. |
395-
| `--tk-elements-terminal-color-green` | The color of green text in the terminal. |
396-
| `--tk-elements-terminal-color-yellow` | The color of yellow text in the terminal. |
397-
| `--tk-elements-terminal-color-blue` | The color of blue text in the terminal. |
398-
| `--tk-elements-terminal-color-magenta` | The color of magenta text in the terminal. |
399-
| `--tk-elements-terminal-color-cyan` | The color of cyan text in the terminal. |
400-
| `--tk-elements-terminal-color-white` | The color of white text in the terminal. |
401-
| `--tk-elements-terminal-color-brightBlack` | The color of bright black text in the terminal. |
402-
| `--tk-elements-terminal-color-brightRed` | The color of bright red text in the terminal. |
403-
| `--tk-elements-terminal-color-brightGreen` | The color of bright green text in the terminal. |
404-
| `--tk-elements-terminal-color-brightYellow` | The color of bright yellow text in the terminal. |
405-
| `--tk-elements-terminal-color-brightBlue` | The color of bright blue text in the terminal. |
406-
| `--tk-elements-terminal-color-brightMagenta` | The color of bright magenta text in the terminal. |
407-
| `--tk-elements-terminal-color-brightCyan` | The color of bright cyan text in the terminal. |
408-
| `--tk-elements-terminal-color-brightWhite` | The color of bright white text in the terminal. |
465+
| Token | Description |
466+
| -------------------------------------------------- | ------------------------------------------------------ |
467+
| `--tk-elements-terminal-backgroundColor` | The background color of the terminal. |
468+
| `--tk-elements-terminal-textColor` | The text color of the terminal. |
469+
| `--tk-elements-terminal-cursorColor` | The color of the terminal cursor. |
470+
| `--tk-elements-terminal-selection-backgroundColor` | The background color of selected text in the terminal. |
471+
| `--tk-elements-terminal-color-black` | The color of black text in the terminal. |
472+
| `--tk-elements-terminal-color-red` | The color of red text in the terminal. |
473+
| `--tk-elements-terminal-color-green` | The color of green text in the terminal. |
474+
| `--tk-elements-terminal-color-yellow` | The color of yellow text in the terminal. |
475+
| `--tk-elements-terminal-color-blue` | The color of blue text in the terminal. |
476+
| `--tk-elements-terminal-color-magenta` | The color of magenta text in the terminal. |
477+
| `--tk-elements-terminal-color-cyan` | The color of cyan text in the terminal. |
478+
| `--tk-elements-terminal-color-white` | The color of white text in the terminal. |
479+
| `--tk-elements-terminal-color-brightBlack` | The color of bright black text in the terminal. |
480+
| `--tk-elements-terminal-color-brightRed` | The color of bright red text in the terminal. |
481+
| `--tk-elements-terminal-color-brightGreen` | The color of bright green text in the terminal. |
482+
| `--tk-elements-terminal-color-brightYellow` | The color of bright yellow text in the terminal. |
483+
| `--tk-elements-terminal-color-brightBlue` | The color of bright blue text in the terminal. |
484+
| `--tk-elements-terminal-color-brightMagenta` | The color of bright magenta text in the terminal. |
485+
| `--tk-elements-terminal-color-brightCyan` | The color of bright cyan text in the terminal. |
486+
| `--tk-elements-terminal-color-brightWhite` | The color of bright white text in the terminal. |

0 commit comments

Comments
 (0)