Star

MIT License
Copyright © 2020
CONNECT-platform

linkTheme

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

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

2link

3link

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

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

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

7link },

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

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

10link }

11link});

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

1linkexport interface ThemeExtension {

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

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

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

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

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

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

8link },

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

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

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

12link },

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

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

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

16link }

17link}


linkContent Colors

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

1linkexport interface ContentTheme {

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

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

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

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

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

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

8link}

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
1linkexport const theme = /*#__PURE__*/createTheme({

2link light: {

3link primary: 'red',

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

5link text: '#616161',

6link },

7link dark: {

8link primary: '#1eb2a6'

9link }

10link});

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
1linkimport {

2link createTheme,

3link DefaultCodeThemeLight,

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

5link

6link

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

8link light: {

9link primary: '#1eb2a6',

10link },

11link dark: {

12link primary: '#1eb2a6'

13link },

14link code: {

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

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

17link },

18link});

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:

1linkexport interface CodeTheme {

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

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

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

5link

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

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

8link lineHighlightAdded: string; // --> CSS color string, background of a highlighted "Added" line

9link lineHighlightAddedIndicator: string; // --> CSS color string, color of the "+" sign on "Added" lines

10link lineHighlightRemoved: string; // --> CSS color string, background of a highlighted "Removed" line

11link lineHighlightRemovedIndicator: string;// --> CSS color string, color of the "-" sign on "Removed" lines

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

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

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

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

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

17link errorUnderline: string; // --> CSS color string, color of wavy underline for "error" parts

18link warningUnderline: string; // --> CSS color string, color of wavy underline for "warning" parts

19link

20link terminalPrefix: string; // --> CSS color string, color of terminal prefix

21link terminalOutput: string; // --> CSS color string, color of terminal output

22link terminalOutputBackground: string; // --> CSS color string, background for terminal output

23link

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

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

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

27link string: string; // --> CSS color string, color of string literals

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

45link}


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:

1linkexport interface QuoteTheme {

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

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

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

5link}


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:

1linkexport interface ToCTheme {

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

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

4link}

ThemeContent ColorsCode ColorsQuote ColorsTable of Contents Colors

Home Overview CLI Theme

Markdownchevron_right
Code Featureschevron_right

Images & Assets

Configurationchevron_right
Customizationchevron_right