docs/_assets/theme.css
:root {
/* colors */
--blue-100: #bbdefb;
--blue-900: #0d47a1;
--blue-grey-100: #cfd8dc;
--blue-grey-900: #263238;
--cyan-400: #26c6da;
--cyan-600: #00acc1;
--cyan-700: #0097a7;
--cyan-800: #00838f;
--cyan-900: #006064;
--deep-orange-200: #ffab91;
--deep-orange-600: #f4511e;
--deep-orange-900: #bf360c;
--deep-orange-a400: #ff3d00;
--deep-orange-a700: #dd2c00;
--grey-100: #f5f5f5;
--grey-200: #eee;
--grey-50: #fafafa;
--grey-900: #212121;
--light-blue-300: #4fc3f7;
--light-blue-400: #29b6f6;
--light-blue-500: #03a9f4;
--light-blue-600: #039be5;
--light-blue-700: #0288d1;
--light-blue-800: #0277bd;
--light-blue-900: #01579b;
--light-green-a400: #76ff03;
--near-black: #111;
--pink-200: #f48fb1;
--pink-400: #ec407a;
--pink-900: #880e4f;
--pink-a200: #ff4081;
--pink-a400: #f50057;
--pink-a700: #c51162;
--purple-700: #7b1fa2;
--purple-a200: #e040fb;
--purple-a400: #d500f9;
--purple-a700: #a0f;
--red-400: #ef5350;
--red-900: #b71c1c;
--teal-700: #00796b;
--teal-900: #004d40;
--yellow-300: #FFF176;
/* theme */
--primary-color-accent: var(--blue-grey-100);
--primary-color-darker: var(--purple-700);
--primary-color-lighter: var(--purple-a400);
--primary-color: var(--purple-a700);
--primary-lines-color: #ccc;
--primary-text-color: #2c3e50;
/* Contrast colors */
--contrast-color-light: #fff;
--contrast-color-dark: var(--page-background);
/* background-colors */
--page-background: white;
--footer-background: rgba(0, 0, 0, 0.1);
--text-color: black;
--text-contrast-color: var(--contrast-color-light);
/* code blocks */
--code-button-focus-background: var(--grey-200);
--code-button-focus-color: var(--text-color);
--code-button-background: var(--page-background);
--code-tabs-tabs-background: transparent;
--code-tabs-selected-highlight-color: var(--markdown-link-decoration);
--code-tabs-border-color: var(--page-background);
--wcd-snippet-button-background: var(--code-button-background);
--wcd-snippet-button-focus-background: var(--code-button-focus-background);
--wcd-snippet-button-focus-color: var(--code-button-focus-color);
--wcd-snippet-outer-background-color: var(--page-background);
--wcd-snippet-focus-border-color: var(--primary-color);
--playground-snippet-button-background: var(--code-button-background);
--playground-snippet-button-focus-background: var(--code-button-focus-background);
--playground-snippet-button-focus-color: var(--code-button-focus-color);
--playground-snippet-outer-background-color: var(--page-background);
--playground-snippet-focus-border-color: var(--primary-color);
/* markdown */
--markdown-blockquote-color: var(--light-blue-900);
--markdown-link-color: var(--pink-a700);
--markdown-link-decoration: var(--pink-200);
--markdown-syntax-attr-name-color: var(--blue-900);
--markdown-syntax-background-color: var(--grey-50);
--markdown-syntax-boolean-color: var(--light-blue-900);
--markdown-syntax-class-name-color: var(--deep-orange-a700);
--markdown-syntax-comment-color: var(--teal-700);
--markdown-syntax-function-color: var(--cyan-900);
--markdown-syntax-keyword-color: var(--deep-orange-a400);
--markdown-syntax-keyword-color: var(--light-blue-900);
--markdown-syntax-number-color: var(--light-blue-900);
--markdown-syntax-operator-color: var(--light-blue-900);
--markdown-syntax-punctuation-color: var(--teal-900);
--markdown-syntax-string-color: var(--deep-orange-a700);
--markdown-syntax-tag-color: var(--cyan-900);
--markdown-syntax-variable-color: var(--deep-orange-a700);
/* playground */
--playground-code-attribute-color: var(--markdown-syntax-attr-name-color);
--playground-code-atom-color: var(--markdown-syntax-keyword-color);
--playground-code-default-color: var(--markdown-syntax-color);
--playground-code-punctuation-color: var(--markdown-syntax-punctuation-color);
--playground-code-property-color: var(--markdown-syntax-class-name-color);
--playground-code-string-color: var(--markdown-syntax-string-color);
--playground-code-function-color: var(--markdown-syntax-function-color);
--playground-code-operator-color: var(--markdown-syntax-operator-color);
--playground-code-comment-color: var(--markdown-syntax-comment-color);
--playground-code-number-color: var(--markdown-syntax-number-color);
--playground-code-boolean-color: var(--markdown-syntax-boolean-color);
--playground-code-tag-color: var(--markdown-syntax-tag-color);
--playground-code-variable-color: var(--markdown-syntax-variable-color);
--playground-code-def-color: var(--markdown-syntax-variable-color);
--playground-code-background-color: var(--markdown-syntax-background-color);
--playground-code-callee-color: var(--markdown-syntax-function-color);
--playground-code-keyword-color: var(--markdown-syntax-keyword-color);
--playground-code-variable-2-color: var(--markdown-syntax-attr-name-color);
--playground-code-selection-background: var(--markdown-table-row-odd-background-color, #f6f8fa);
--playground-code-cursor-color: var(--markdown-syntax-color);
--playground-code-background: var(--markdown-syntax-background-color);
--playground-tab-bar-background: var(--page-background);
--playground-tab-bar-foreground-color: var(--primary-text-color);
--playground-preview-toolbar-background: var(--page-background);
--playground-preview-toolbar-foreground-color: var(--primary-text-color);
--playground-highlight-color: var(--primary-color);
--playground-code-builtin-color: var(--markdown-blockquote-color);
/* typography */
--primary-font-family: 'Open Sans', sans-serif;
--secondary-font-family: 'Recursive', sans-serif;
--monospace-font-family: 'Recursive', 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace;
--type-doc-header-font-family: 'Recursive';
}
@media (prefers-color-scheme: dark) {
:root {
/* theme */
--primary-color-accent: var(--blue-grey-100);
--primary-color-darker: var(--purple-a700);
--primary-color-lighter: var(--purple-a200);
--primary-color: var(--purple-a400);
--primary-lines-color: #ccc;
--primary-text-color: var(--grey-200);
/* Text colors */
--sidebar-tag-background-color: var(--code-button-focus-background);
--text-color: white;
--text-contrast-color: var(--contrast-color-light);
/* background-colors */
--footer-background: #151515;
--page-background: var(--near-black);
/* code blocks */
--code-button-focus-background: #333;
--code-button-focus-color: white;
--code-button-background: var(--page-background);
--code-tabs-tabs-background: transparent;
--wcd-snippet-button-background: var(--code-button-background);
--wcd-snippet-button-focus-background: var(--code-button-focus-background);
--wcd-snippet-button-focus-color: var(--code-button-focus-color);
/* search */
--rocket-search-background-color: var(--code-button-focus-background);
--rocket-search-highlight-color: var(--primary-color-lighter);
--rocket-search-fill-color: var(--primary-lines-color);
--rocket-search-hover-background-color: var(--near-black);
--rocket-search-input-border-color: var(--page-background);
--rocket-search-input-overlay-border-color: var(--page-background);
/* widgets */
--inline-notification-danger-background-color: #b71c1c44; /* red 900 */
--inline-notification-danger-heading-color: var(--red-900);
--inline-notification-tip-background-color: #004d4044; /* teal 900 */
/* markdown */
--markdown-blockquote-color: var(--blue-100);
--markdown-link-color: var(--pink-a200);
--markdown-link-decoration: var(--pink-900);
--markdown-code-background-color: var(--grey-900);
--markdown-octicon-link: white;
--markdown-pre-background-color: var(--grey-900);
--markdown-syntax-attr-name-color: var(--light-blue-500);
--markdown-syntax-background-color: var(--grey-900);
--markdown-syntax-boolean-color: var(--light-blue-300);
--markdown-syntax-class-name-color: var(--deep-orange-200);
--markdown-syntax-color: white;
--markdown-syntax-comment-color: var(--light-green-a400);
--markdown-syntax-function-color: var(--cyan-400);
--markdown-syntax-keyword-color: var(--light-blue-300);
--markdown-syntax-number-color: var(--light-blue-300);
--markdown-syntax-operator-color: var(--light-blue-300);
--markdown-syntax-punctuation-color: var(--cyan-600);
--markdown-syntax-string-color: var(--deep-orange-200);
--markdown-syntax-tag-color: var(--cyan-400);
--markdown-syntax-variable-color: var(--deep-orange-200);
--markdown-table-background-color: var(--grey-900);
--markdown-table-border-color: var(--markdown-table-background-color);
--markdown-table-row-odd-background-color: var(--blue-grey-900);
}
}
code-tabs:hover,
code-tabs:focus,
code-tabs:focus-within {
--code-tabs-selected-highlight-color: var(--primary-color) !important;
}