Markdown Overview Buttons Tabs Footnotes Collapse ToC Navigation Formula Page-Specific Meta Custom Components
MIT License
Copyright © 2020
CONNECT-platform
The color theme of your CODEDOC project is specified in .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}
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.
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.
Color scheme of code snippets can be specified via the code property of a ThemeExtension object:
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}
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}
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}