Star

MIT License
Copyright © 2020
CONNECT-platform

linkTheme

The color theme of your CODEDOC project is specified in .codedoc/theme.ts:

.codedoc/theme.ts
1import { createTheme } from '@codedoc/core/transport';

2

3

4export const theme = /*#__PURE__*/createTheme({

5 light: { // --> color scheme for contenttecoxt in light-mode

6 primary: '#1eb2a6' // --> the primary color in light-mode (for links, buttons, etc.)

7 },

8 dark: { // --> color scheme for content in dark-mode

9 primary: '#1eb2a6' // --> the primary color in dark-mode (for links, buttons, etc.)

10 }

11});

The object passed to createTheme() method must be a ThemeExtension object:

1export interface ThemeExtension {

2 light?: Partial<ContentTheme>; // --> color scheme of content in light-mode

3 dark?: Partial<ContentTheme>; // --> color scheme of content in dark-mode

4 code?: { // @see #code-colors

5 wmbar?: boolean; // --> whether to display the top-bar of a code snippet

6 light?: Partial<CodeTheme>; // --> color scheme of code in light-mode

7 dark?: Partial<CodeTheme>; // --> color scheme of code in dark-mode

8 },

9 quote?: { // @see #quote-colors

10 light?: Partial<QuoteTheme>, // --> color scheme of quote blocks in light mode

11 dark?: Partial<QuoteTheme>, // --> color scheme of quote blocks in dark mode

12 },

13 toc?: { // @see #table-of-contents-colors

14 light?: Partial<ToCTheme>, // --> color scheme of toc in light mode

15 dark?: Partial<ToCTheme>, // --> color scheme of toc in dark mode

16 }

17}


linkContent Colors

Color scheme of the content, i.e. texts, page background, buttons, etc. is determined via ContentTheme objects:

1export interface ContentTheme {

2 background: string; // --> CSS color string, background of the page

3 text: string; // --> CSS color string, color of text

4 primary: string; // --> CSS color string, primary color (for buttons, links, etc)

5 primaryContrast: string; // --> CSS color string, text color on primary background (e.g. buttons)

6 border: string; // --> CSS color string, border colors

7 code: string // --> CSS color string, in-text code color

8}

You can specify any of these properties for either dark mode or light mode. Each specified property should be a valid CSS color string.

.codedoc/theme.ts
1export const theme = /*#__PURE__*/createTheme({

2 light: {

3 primary: 'red',

4 background: 'rgb(240, 240, 240)',

5 text: '#616161',

6 },

7 dark: {

8 primary: '#1eb2a6'

9 }

10});

The primaryContrast property is an exception from said rule, as it can also have the special value "deduce" (which is in-fact its default value). primaryContrast will be used for text that is rendered on elements whose background is of the primary color. If its value is "deduce", then it will be either white or black depending on the luminosity of primary color itself.


linkCode Colors

Color scheme of code snippets can be specified via the code property of a ThemeExtension object:

.codedoc/theme.ts
1import {

2 createTheme,

3 DefaultCodeThemeLight,

4} from '@codedoc/core/transport';

5

6

7export const theme = /*#__PURE__*/createTheme({

8 light: {

9 primary: '#1eb2a6',

10 },

11 dark: {

12 primary: '#1eb2a6'

13 },

14 code: {

15 wmbar: false, // --> disable the top-bar by default

16 light: DefaultCodeThemeLight, // --> use the default light code theme in light-mode

17 },

18});

The wmbar property specifies whether the top-bar of code-snippets should be displayed (the little bar with 3 dots and sometimes a filename). This bar is never displayed on code snippets that are only one line, and is always displayed on code snippets that have a file name. The wmbar property determines the default behavior for other cases, though that can also be overriden for each specific snippet.

The light and dark properties must be CodeTheme objects. This object determines the colors of various syntax elements within code snippets. CODEDOC itself comes with two code theme presets, DefaultCodeTheme and DefaultCodeThemeLight (the latter is not used by default). Provided values for these two properties must be partials of CodeTheme interface:

1export interface CodeTheme {

2 background: string; // --> CSS color string, background of the snippet

3 text: string; // --> CSS color string, default text color

4 shadow: string; // --> CSS box-shadow string, shadow around a snippet

5

6 lineHover: string; // --> CSS color string, background of a hovered line

7 lineHightlight: string; // --> CSS color string, background of a highlighted line

8 lineHighlightText: string; // --> CSS color string, default text color of a highlighted line

9 lineCounter: string; // --> CSS color string, color of line counters

10 lineCounterBorder: string; // --> CSS color string, color of the line counter border

11 lineCounterBorderHover: string; // --> CSS color string, color of the line counter border in a hovered line

12 lineCounterHighlight: string; // --> CSS color string, color of line counter in a highlighted line

13

14 keyword: string; // --> CSS color string, color of keywords, e.g. `import`, `return`, etc.

15 boolean: string; // --> CSS color string, color of boolean values

16 number: string; // --> CSS color string, color of numeric values

17 string: string; // --> CSS color string, color of string literals

18 function: string; // --> CSS color string, color of function tokens

19 parameter: string; // --> CSS color string, color of function parameters

20 tag: string; // --> CSS color string, color of HTML, JSX and TSX tags

21 comment: string; // --> CSS color string, color of comments

22 operator: string; // --> CSS color string, color of operators

23 punctuation: string; // --> CSS color string, color of punctuation tokens

24 builtin: string; // --> CSS color string, color of builtin values

25 className: string; // --> CSS color string, color of tag class names (HTML/JSX/TSX)

26 attrName: string; // --> CSS color string, color of tag attribute names (HTML/JSX/TSX)

27 attrValue: string; // --> CSS color string, color of tag attribute values (HTML/JSX/TSX)

28 plainText: string; // --> CSS color string, color of plain text in HTML/JSX/TSX tags

29 script: string; // --> CSS color string, color of script tokens

30 placeholder: string; // --> CSS color string, color of sass placeholders

31 selector: string; // --> CSS color string, color of css selectors

32 property: string; // --> CSS color string, color of css properties

33 important: string; // --> CSS color string, color of `important!` keyword

34 cssfunc: string; // --> CSS color string, color of css functions

35}


linkQuote Colors

The quote property of a ThemeExtension object specifies color scheme for block quotes, via its light property for light-mode and via its dark property for dark mode. If provided, any of these two properties must be a partial of QuoteTheme interface:

1export interface QuoteTheme {

2 background: string; // --> CSS color string, background of block-quotes

3 text: string; // --> CSS color string, text color of block-quotes

4 border: string; // --> CSS color string, border color for block-quotes

5}


linkTable of Contents Colors

The toc property of a ThemeExtension object specifies color scheme for the table of contents, via its light and dark properties respectively for light mode and dark mode. If provided, any of these two properties must be a partial of ToCTheme:

1export interface ToCTheme {

2 background: string; // --> CSS color string, background of ToC

3 border: string; // --> CSS color string, border of ToC

4}

ThemeContent ColorsCode ColorsQuote ColorsTable of Contents Colors

Home Overview CLI Theme

Markdownchevron_right
Code Featureschevron_right

Images & Assets

Configurationchevron_right
Customizationchevron_right