Skip to content

Commit 316a3a7

Browse files
rcastleyrcastley
committed
Improved themes
1 parent 4a5fb6a commit 316a3a7

File tree

6 files changed

+155
-74
lines changed

6 files changed

+155
-74
lines changed

‎config.yaml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ markup:
2929
renderer:
3030
unsafe: true
3131
highlight:
32-
style: tango
32+
guessSyntax: false
33+
noClasses: false
3334
outputs:
3435
home:
3536
- HTML

‎static/css/chroma-splunk-dark.css‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
/* based on monokai
2+
/* Background */ .chroma { color: #f8f8f8; background-color: #2b2b2b }
3+
/* Other */ .chroma .x { }
4+
/* Error */ .chroma .err { color: #960050; }
5+
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
6+
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
7+
/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
8+
/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
9+
/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
10+
/* Keyword */ .chroma .k { color: #66d9ef }
11+
/* KeywordConstant */ .chroma .kc { color: #66d9ef }
12+
/* KeywordDeclaration */ .chroma .kd { color: #66d9ef }
13+
/* KeywordNamespace */ .chroma .kn { color: #f92672 }
14+
/* KeywordPseudo */ .chroma .kp { color: #66d9ef }
15+
/* KeywordReserved */ .chroma .kr { color: #66d9ef }
16+
/* KeywordType */ .chroma .kt { color: #66d9ef }
17+
/* Name */ .chroma .n { }
18+
/* NameAttribute */ .chroma .na { color: #a6e22e }
19+
/* NameBuiltin */ .chroma .nb { }
20+
/* NameBuiltinPseudo */ .chroma .bp { }
21+
/* NameClass */ .chroma .nc { color: #a6e22e }
22+
/* NameConstant */ .chroma .no { color: #66d9ef }
23+
/* NameDecorator */ .chroma .nd { color: #a6e22e }
24+
/* NameEntity */ .chroma .ni { }
25+
/* NameException */ .chroma .ne { color: #a6e22e }
26+
/* NameFunction */ .chroma .nf { color: #a6e22e }
27+
/* NameFunctionMagic */ .chroma .fm { }
28+
/* NameLabel */ .chroma .nl { }
29+
/* NameNamespace */ .chroma .nn { }
30+
/* NameOther */ .chroma .nx { color: #a6e22e }
31+
/* NameProperty */ .chroma .py { }
32+
/* NameTag */ .chroma .nt { color: #f92672 }
33+
/* NameVariable */ .chroma .nv { }
34+
/* NameVariableClass */ .chroma .vc { }
35+
/* NameVariableGlobal */ .chroma .vg { }
36+
/* NameVariableInstance */ .chroma .vi { }
37+
/* NameVariableMagic */ .chroma .vm { }
38+
/* Literal */ .chroma .l { color: #ae81ff }
39+
/* LiteralDate */ .chroma .ld { color: #e6db74 }
40+
/* LiteralString */ .chroma .s { color: #e6db74 }
41+
/* LiteralStringAffix */ .chroma .sa { color: #e6db74 }
42+
/* LiteralStringBacktick */ .chroma .sb { color: #e6db74 }
43+
/* LiteralStringChar */ .chroma .sc { color: #e6db74 }
44+
/* LiteralStringDelimiter */ .chroma .dl { color: #e6db74 }
45+
/* LiteralStringDoc */ .chroma .sd { color: #e6db74 }
46+
/* LiteralStringDouble */ .chroma .s2 { color: #e6db74 }
47+
/* LiteralStringEscape */ .chroma .se { color: #ae81ff }
48+
/* LiteralStringHeredoc */ .chroma .sh { color: #e6db74 }
49+
/* LiteralStringInterpol */ .chroma .si { color: #e6db74 }
50+
/* LiteralStringOther */ .chroma .sx { color: #e6db74 }
51+
/* LiteralStringRegex */ .chroma .sr { color: #e6db74 }
52+
/* LiteralStringSingle */ .chroma .s1 { color: #e6db74 }
53+
/* LiteralStringSymbol */ .chroma .ss { color: #e6db74 }
54+
/* LiteralNumber */ .chroma .m { color: #ae81ff }
55+
/* LiteralNumberBin */ .chroma .mb { color: #ae81ff }
56+
/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff }
57+
/* LiteralNumberHex */ .chroma .mh { color: #ae81ff }
58+
/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff }
59+
/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff }
60+
/* LiteralNumberOct */ .chroma .mo { color: #ae81ff }
61+
/* Operator */ .chroma .o { color: #f92672 }
62+
/* OperatorWord */ .chroma .ow { color: #f92672 }
63+
/* Punctuation */ .chroma .p { }
64+
/* Comment */ .chroma .c { color: #7c7c7c }
65+
/* CommentHashbang */ .chroma .ch { color: #7c7c7c }
66+
/* CommentMultiline */ .chroma .cm { color: #7c7c7c }
67+
/* CommentSingle */ .chroma .c1 { color: #7c7c7c }
68+
/* CommentSpecial */ .chroma .cs { color: #7c7c7c }
69+
/* CommentPreproc */ .chroma .cp { color: #7c7c7c }
70+
/* CommentPreprocFile */ .chroma .cpf { color: #7c7c7c }
71+
/* Generic */ .chroma .g { }
72+
/* GenericDeleted */ .chroma .gd { color: #f92672 }
73+
/* GenericEmph */ .chroma .ge { font-style: italic }
74+
/* GenericError */ .chroma .gr { }
75+
/* GenericHeading */ .chroma .gh { }
76+
/* GenericInserted */ .chroma .gi { color: #a6e22e }
77+
/* GenericOutput */ .chroma .go { }
78+
/* GenericPrompt */ .chroma .gp { }
79+
/* GenericStrong */ .chroma .gs { font-weight: bold }
80+
/* GenericSubheading */ .chroma .gu { color: #7c7c7c }
81+
/* GenericTraceback */ .chroma .gt { }
82+
/* GenericUnderline */ .chroma .gl { }
83+
/* TextWhitespace */ .chroma .w { }

‎static/css/chroma-splunk-light.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,4 +80,4 @@
8080
/* GenericSubheading */ .chroma .gu { color: #800080; font-weight: bold }
8181
/* GenericTraceback */ .chroma .gt { color: #a40000; font-weight: bold }
8282
/* GenericUnderline */ .chroma .gl { color: #000000; text-decoration: underline }
83-
/* TextWhitespace */ .chroma .w { color: #f8f8f8; text-decoration: underline }
83+
/* TextWhitespace */ .chroma .w { color: #f8f8f8; text-decoration: underline }

‎static/css/theme-aws.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11

2+
@import "chroma-splunk-light.css";
3+
24
:root{
35

46
--MAIN-TEXT-color:#323235; /* Color of text by default */

‎static/css/theme-splunk-dark.css‎

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
- remove `markup.highlight.noClasses` from your config.toml
44
- set `markup.highlight.style` to a predefined style name in your config.toml
55
- remove the following `@import` of the self-defined chroma stylesheet */
6+
@import "chroma-splunk-dark.css";
67

78
:root {
89
--PRIMARY-color: #e20082;
@@ -14,23 +15,19 @@
1415

1516
--MAIN-TEXT-color: #e0e0e0;
1617
/* text color of content and h1 titles */
17-
--MAIN-LINK-HOVER-color: #e20082;
1818
--MAIN-LINK-HOVER-color: #66d9ef;
1919
/* hovered link color of content */
2020
--MAIN-BG-color: #202020;
2121
/* background color of content */
2222
--MAIN-TITLES-TEXT-color: #ffffff;
2323
/* text color of h2-h6 titles and transparent box titles */
24-
/*--MAIN-LINK-color: #e20082;*/
2524
--MAIN-LINK-color: #66d9ef;
2625

2726
/* adjusted to relearn-dark chroma style */
28-
--CODE-BLOCK-color: #000000;
27+
--CODE-BLOCK-color: #f8f8f8;
2928
/* fallback text color of block code; should be adjusted to your selected chroma style */
30-
--CODE-BLOCK-BG-color: #730606;
29+
--CODE-BLOCK-BG-color: #2b2b2b;
3130
/* fallback background color of block code; should be adjusted to your selected chroma style */
32-
--CODE-BLOCK-BORDER-color: #ffffff;
33-
/* color of block code border */
3431

3532
--CODE-INLINE-color: #a6e22e;
3633
/* text color of inline code */
@@ -39,27 +36,24 @@
3936
--CODE-INLINE-BORDER-color: #464646;
4037
/* border color of inline code */
4138

39+
--BROWSER-theme: dark;
40+
/* name of the theme for browser scrollbars of the main section */
4241
--MERMAID-theme: dark;
4342
/* name of the default Mermaid theme for this variant, can be overridden in config.toml */
4443
--SWAGGER-theme: dark;
4544
/* name of the default Swagger theme for this variant, can be overridden in config.toml */
4645

4746
--MENU-HOME-LINK-color: #ffffff;
48-
/* Color of the home button text */
47+
/* home button color if configured */
4948
--MENU-HOME-LINK-HOVER-color: #e20082;
50-
/* Color of the hovered home button text */
49+
/* hovered home button color if configured */
5150

52-
--MENU-HEADER-BG-color: #e20082;
53-
/* Background color of menu header */
54-
--MENU-HEADER-BORDER-color: #000000;
55-
/*Color of menu header border */
56-
57-
--MENU-SEARCH-color: #ffffff;
58-
/* Color of search field text */
59-
--MENU-SEARCH-BG-color: #e20082;
60-
/* Search field background color (by default borders + icons) */
61-
--MENU-SEARCH-BORDER-color: #f9f9f9;
62-
/* Override search field border color */
51+
--MENU-SEARCH-color: #e0e0e0;
52+
/* text and icon color of search box */
53+
--MENU-SEARCH-BG-color: #323232;
54+
/* background color of search box */
55+
--MENU-SEARCH-BORDER-color: #e0e0e0;
56+
/* border color of search box */
6357

6458
--MENU-SECTIONS-BG-color: #2b2b2b;
6559
/* background of the menu; this is NOT just a color value but can be a complete CSS background definition including gradients, etc. */
@@ -82,5 +76,4 @@
8276
--BOX-BG-color: rgba(20, 20, 20, 1);
8377
/* background color of colored boxes */
8478
--BOX-TEXT-color: #e0e0e0;
85-
/* text color of colored box content */
86-
}
79+
/* text color of colored box content */

‎static/css/theme-splunk-light.css‎

Lines changed: 53 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -6,74 +6,76 @@
66
@import "chroma-splunk-light.css";
77

88
:root {
9-
--MAIN-TEXT-color: #323232;
10-
/* Color of text by default */
11-
--MAIN-TITLES-TEXT-color: #5e5e5e;
12-
/* Color of titles h2-h3-h4-h5-h6 */
13-
--MAIN-TITLES-H1-color: #222222;
14-
/* text color of h1 titles */
15-
--MAIN-LINK-color: #e20082;
16-
/* Color of links */
9+
--PRIMARY-color: #e20082;
10+
/* brand primary color */
11+
--SECONDARY-color: #e20082;
12+
/* brand secondary color */
13+
--ACCENT-color: #ff88ff;
14+
/* brand accent color, used for search highlights */
15+
16+
--MAIN-TEXT-color: #101010;
17+
/* text color of content and h1 titles */
1718
--MAIN-LINK-HOVER-color: #e20082;
18-
/* Color of hovered links */
19+
/* hovered link color of content */
1920
--MAIN-BG-color: #ffffff;
20-
/* color of text by default */
21+
/* background color of content */
22+
--MAIN-TITLES-TEXT-color: #4a4a4a;
23+
/* text color of h2-h6 titles and transparent box titles */
2124

22-
/* adjusted to relearn-dark chroma style */
25+
/* adjusted to relearn-light chroma style */
2326
--CODE-BLOCK-color: #000000;
2427
/* fallback text color of block code; should be adjusted to your selected chroma style */
25-
--CODE-BLOCK-BG-color: #9b9b9b;
26-
/* fallback color for code background */
27-
--CODE-BLOCK-BORDER-color: #ffffff;
28-
/* color of block code border */
28+
--CODE-BLOCK-BG-color: #f8f8f8;
29+
/* fallback background color of block code; should be adjusted to your selected chroma style */
30+
--CODE-BLOCK-BORDER-color: #d8d8d8;
31+
/* border color of block code */
2932

3033
--CODE-INLINE-color: #5e5e5e;
31-
/* color for inline code text */
32-
--CODE-INLINE-BG-color: #e1e1e1;
33-
/* color for inline code background */
34+
/* text color of inline code */
35+
--CODE-INLINE-BG-color: #fffae9;
36+
/* background color of inline code */
3437
--CODE-INLINE-BORDER-color: #f8e8c8;
35-
/* color of inline code border */
38+
/* border color of inline code */
39+
40+
--BROWSER-theme: light;
41+
/* name of the theme for browser scrollbars of the main section */
42+
--MERMAID-theme: default;
43+
/* name of the default Mermaid theme for this variant, can be overridden in config.toml */
44+
--SWAGGER-theme: light;
45+
/* name of the default Swagger theme for this variant, can be overridden in config.toml */
3646

3747
--MENU-HOME-LINK-color: #ffffff;
38-
/* Color of the home button text */
48+
/* home button color if configured */
3949
--MENU-HOME-LINK-HOVER-color: #e20082;
40-
/* Color of the hovered home button text */
50+
/* hovered home button color if configured */
4151

42-
--MENU-HEADER-BG-color: #e20082;
43-
/* Background color of menu header */
4452
--MENU-HEADER-BORDER-color: #000000;
45-
/*Color of menu header border */
46-
47-
--MENU-SEARCH-color: #ffffff;
48-
/* Color of search field text */
49-
--MENU-SEARCH-BG-color: #e20082;
50-
/* Search field background color (by default borders + icons) */
51-
--MENU-SEARCH-BORDER-color: #f9f9f9;
52-
/* Override search field border color */
53+
/* border color of the menu header */
5354

54-
--MENU-SECTIONS-ACTIVE-BG-color: #2b2020;
55-
/* Background color of the active section and its children */
56-
--MENU-SECTIONS-BG-color: #312525;
57-
/* Background color of other sections */
58-
--MENU-SECTIONS-LINK-color: #ccc;
59-
/* Color of links in menu */
60-
--MENU-SECTIONS-LINK-HOVER-color: #e6e6e6;
61-
/* Color of links in menu, when hovered */
62-
--MENU-SECTION-ACTIVE-CATEGORY-color: #777;
63-
/* Color of active category text */
64-
--MENU-SECTION-ACTIVE-CATEGORY-BG-color: #fff;
65-
/* Color of background for the active category (only) */
55+
--MENU-SEARCH-color: #e0e0e0;
56+
/* text and icon color of search box */
57+
--MENU-SEARCH-BG-color: #323232;
58+
/* background color of search box */
59+
--MENU-SEARCH-BORDER-color: #e0e0e0;
60+
/* border color of search box */
6661

67-
--MENU-VISITED-color: #e20082;
68-
/* Color of 'page visited' icons in menu */
69-
--MENU-SECTION-HR-color: #2b2020;
70-
/* Color of <hr> separator in menu */
62+
--MENU-SECTIONS-BG-color: #282828;
63+
/* background of the menu; this is NOT just a color value but can be a complete CSS background definition including gradients, etc. */
64+
--MENU-SECTIONS-ACTIVE-BG-color: rgba(0, 0, 0, .166);
65+
/* background color of the active menu section */
66+
--MENU-SECTIONS-LINK-color: #bababa;
67+
/* link color of menu topics */
68+
--MENU-SECTIONS-LINK-HOVER-color: #ffffff;
69+
/* hovered link color of menu topics */
70+
--MENU-SECTION-ACTIVE-CATEGORY-color: #444444;
71+
/* text color of the displayed menu topic */
72+
--MENU-SECTION-HR-color: #606060;
73+
/* separator color of menu footer */
7174

72-
/* base styling for boxes */
7375
--BOX-CAPTION-color: rgba(255, 255, 255, 1);
74-
/* color of the title text */
76+
/* text color of colored box titles */
7577
--BOX-BG-color: rgba(255, 255, 255, .833);
76-
/* color of the content background */
78+
/* background color of colored boxes */
7779
--BOX-TEXT-color: rgba(16, 16, 16, 1);
78-
/* fixed color of the content text */
80+
/* text color of colored box content */
7981
}

0 commit comments

Comments
 (0)