Skip to content

Commit 24e9eca

Browse files
Solarized light and dark themes
and fix dark theme being affected by light theme
1 parent edf17f1 commit 24e9eca

File tree

3 files changed

+186
-163
lines changed

3 files changed

+186
-163
lines changed

lib/better_errors/style/main.scss

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -487,12 +487,14 @@ p.no-javascript-notice {
487487
}
488488

489489
.code, .be-console, .unavailable {
490-
background: #fff;
491490
padding: 5px;
492-
493491
box-shadow: inset 3px 3px 3px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
494492
}
495493

494+
.code, .unavailable {
495+
text-shadow: none;
496+
}
497+
496498
.code_linenums{
497499
background:#f1f1f1;
498500
padding-top:10px;
@@ -506,6 +508,12 @@ p.no-javascript-notice {
506508
}
507509

508510
.code {
511+
@import "syntax_highlighting";
512+
513+
@media (prefers-color-scheme: dark) {
514+
@import "syntax_highlighting_dark";
515+
}
516+
509517
margin-bottom: -1px;
510518
border-top-left-radius:2px;
511519
padding: 10px 0;
@@ -543,28 +551,32 @@ p.unavailable:before {
543551
margin-bottom: -10px;
544552
}
545553

554+
$code-highlight-background: rgba(51, 136, 170, 0.15);
555+
$code-highlight-background-flash: adjust-color($code-highlight-background, $alpha: 0.3);
556+
546557
@-webkit-keyframes highlight {
547-
0% { background: rgba(220, 30, 30, 0.3); }
548-
100% { background: rgba(220, 30, 30, 0.1); }
558+
0% { background: $code-highlight-background-flash; }
559+
100% { background: $code-highlight-background; }
549560
}
550561
@-moz-keyframes highlight {
551-
0% { background: rgba(220, 30, 30, 0.3); }
552-
100% { background: rgba(220, 30, 30, 0.1); }
562+
0% { background: $code-highlight-background-flash; }
563+
100% { background: $code-highlight-background; }
553564
}
554565
@keyframes highlight {
555-
0% { background: rgba(220, 30, 30, 0.3); }
556-
100% { background: rgba(220, 30, 30, 0.1); }
566+
0% { background: $code-highlight-background-flash; }
567+
100% { background: $code-highlight-background; }
557568
}
558569

559570
.code .highlight, .code_linenums .highlight {
560-
background: rgba(220, 30, 30, 0.1);
571+
background: $code-highlight-background;
561572
-webkit-animation: highlight 400ms linear 1;
562573
-moz-animation: highlight 400ms linear 1;
563574
animation: highlight 400ms linear 1;
564575
}
565576

566577
/* REPL shell */
567578
.be-console {
579+
background: #fff;
568580
padding: 0 1px 10px 1px;
569581
border-bottom-left-radius: 2px;
570582
border-bottom-right-radius: 2px;
@@ -725,7 +737,3 @@ nav.sidebar:hover::-webkit-scrollbar-thumb {
725737
.code:hover::-webkit-scrollbar-thumb {
726738
background: #888;
727739
}
728-
729-
.code pre {
730-
@import "syntax_highlighting";
731-
}
Lines changed: 81 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -1,150 +1,81 @@
1-
// rougify style pastie --scope ''
2-
// (And remove the first couple of selectors.)
3-
.c, .ch, .cd, .cm, .cpf, .c1 {
4-
color: #888888;
5-
}
6-
.cp {
7-
color: #cc0000;
8-
font-weight: bold;
9-
}
10-
.cs {
11-
color: #cc0000;
12-
background-color: #fff0f0;
13-
font-weight: bold;
14-
}
15-
.err {
16-
color: #a61717;
17-
background-color: #e3d2d2;
18-
}
19-
.gr {
20-
color: #aa0000;
21-
}
22-
.gh {
23-
color: #333333;
24-
}
25-
.gu {
26-
color: #666666;
27-
}
28-
.gd {
29-
color: #000000;
30-
background-color: #ffdddd;
31-
}
32-
.gi {
33-
color: #000000;
34-
background-color: #ddffdd;
35-
}
36-
.ge {
37-
font-style: italic;
38-
}
39-
.gs {
40-
font-weight: bold;
41-
}
42-
.gl {
43-
color: #888888;
44-
}
45-
.go {
46-
color: #888888;
47-
}
48-
.gp {
49-
color: #555555;
50-
}
51-
.gt {
52-
color: #aa0000;
53-
}
54-
.k, .kc, .kd, .kn, .kr, .kv {
55-
color: #008800;
56-
font-weight: bold;
57-
}
58-
.kp {
59-
color: #008800;
60-
}
61-
.kt {
62-
color: #888888;
63-
font-weight: bold;
64-
}
65-
.m, .mb, .mf, .mh, .mi, .il, .mo, .mx {
66-
color: #0000dd;
67-
font-weight: bold;
68-
}
69-
.s, .sb, .sc, .dl, .sd, .s2, .sh, .s1 {
70-
color: #dd2200;
71-
background-color: #fff0f0;
72-
}
73-
.sa {
74-
color: #008800;
75-
font-weight: bold;
76-
}
77-
.se {
78-
color: #0044dd;
79-
background-color: #fff0f0;
80-
}
81-
.si {
82-
color: #3333bb;
83-
background-color: #fff0f0;
84-
}
85-
.sx {
86-
color: #22bb22;
87-
background-color: #f0fff0;
88-
}
89-
.sr {
90-
color: #008800;
91-
}
92-
.ss {
93-
color: #aa6600;
94-
background-color: #fff0f0;
95-
}
96-
.na {
97-
color: #336699;
98-
}
99-
.nb, .bp {
100-
color: #003388;
101-
}
102-
.nc {
103-
color: #bb0066;
104-
font-weight: bold;
105-
}
106-
.no {
107-
color: #003366;
108-
font-weight: bold;
109-
}
110-
.nd {
111-
color: #555555;
112-
}
113-
.ne {
114-
color: #bb0066;
115-
font-weight: bold;
116-
}
117-
.nf, .fm {
118-
color: #0066bb;
119-
font-weight: bold;
120-
}
121-
.nl {
122-
color: #336699;
123-
}
124-
.nn {
125-
color: #bb0066;
126-
font-weight: bold;
127-
}
128-
.py {
129-
color: #336699;
130-
font-weight: bold;
131-
}
132-
.nt {
133-
color: #bb0066;
134-
font-weight: bold;
135-
}
136-
.nv, .vc, .vm {
137-
color: #336699;
138-
}
139-
.vg {
140-
color: #dd7700;
141-
}
142-
.vi {
143-
color: #3333bb;
144-
}
145-
.ow {
146-
color: #008800;
147-
}
148-
.w {
149-
color: #bbbbbb;
150-
}
1+
// Thanks to https://github.com/jwarby/jekyll-pygments-themes/blob/master/pastie.css
2+
3+
$base01: #586e75;
4+
$base1: #93a1a1;
5+
$base3: #fdf6e3;
6+
$orange: #cb4b16;
7+
$red: #dc322f;
8+
$blue: #268bd2;
9+
$cyan: #2aa198;
10+
$green: #859900;
11+
$yellow: #B58900;
12+
13+
& { background-color: $base3; color: $base01 }
14+
.c { color: $base1 } /* Comment */
15+
.err { color: $base01 } /* Error */
16+
.g { color: $base01 } /* Generic */
17+
.k { color: $green } /* Keyword */
18+
.l { color: $base01 } /* Literal */
19+
.n { color: $base01 } /* Name */
20+
.o { color: $green } /* Operator */
21+
.x { color: $orange } /* Other */
22+
.p { color: $base01 } /* Punctuation */
23+
.cm { color: $base1 } /* Comment.Multiline */
24+
.cp { color: $green } /* Comment.Preproc */
25+
.c1 { color: $base1 } /* Comment.Single */
26+
.cs { color: $green } /* Comment.Special */
27+
.gd { color: $cyan } /* Generic.Deleted */
28+
.ge { color: $base01; font-style: italic } /* Generic.Emph */
29+
.gr { color: $red } /* Generic.Error */
30+
.gh { color: $orange } /* Generic.Heading */
31+
.gi { color: $green } /* Generic.Inserted */
32+
.go { color: $base01 } /* Generic.Output */
33+
.gp { color: $base01 } /* Generic.Prompt */
34+
.gs { color: $base01; font-weight: bold } /* Generic.Strong */
35+
.gu { color: $orange } /* Generic.Subheading */
36+
.gt { color: $base01 } /* Generic.Traceback */
37+
.kc { color: $orange } /* Keyword.Constant */
38+
.kd { color: $blue } /* Keyword.Declaration */
39+
.kn { color: $green } /* Keyword.Namespace */
40+
.kp { color: $green } /* Keyword.Pseudo */
41+
.kr { color: $blue } /* Keyword.Reserved */
42+
.kt { color: $red } /* Keyword.Type */
43+
.ld { color: $base01 } /* Literal.Date */
44+
.m { color: $cyan } /* Literal.Number */
45+
.s { color: $cyan } /* Literal.String */
46+
.na { color: $base01 } /* Name.Attribute */
47+
.nb { color: $yellow } /* Name.Builtin */
48+
.nc { color: $blue } /* Name.Class */
49+
.no { color: $orange } /* Name.Constant */
50+
.nd { color: $blue } /* Name.Decorator */
51+
.ni { color: $orange } /* Name.Entity */
52+
.ne { color: $orange } /* Name.Exception */
53+
.nf { color: $blue } /* Name.Function */
54+
.nl { color: $base01 } /* Name.Label */
55+
.nn { color: $base01 } /* Name.Namespace */
56+
.nx { color: $base01 } /* Name.Other */
57+
.py { color: $base01 } /* Name.Property */
58+
.nt { color: $blue } /* Name.Tag */
59+
.nv { color: $blue } /* Name.Variable */
60+
.ow { color: $green } /* Operator.Word */
61+
.w { color: $base01 } /* Text.Whitespace */
62+
.mf { color: $cyan } /* Literal.Number.Float */
63+
.mh { color: $cyan } /* Literal.Number.Hex */
64+
.mi { color: $cyan } /* Literal.Number.Integer */
65+
.mo { color: $cyan } /* Literal.Number.Oct */
66+
.sb { color: $base1 } /* Literal.String.Backtick */
67+
.sc { color: $cyan } /* Literal.String.Char */
68+
.sd { color: $base01 } /* Literal.String.Doc */
69+
.s2 { color: $cyan } /* Literal.String.Double */
70+
.se { color: $orange } /* Literal.String.Escape */
71+
.sh { color: $base01 } /* Literal.String.Heredoc */
72+
.si { color: $cyan } /* Literal.String.Interpol */
73+
.sx { color: $cyan } /* Literal.String.Other */
74+
.sr { color: $red } /* Literal.String.Regex */
75+
.s1 { color: $cyan } /* Literal.String.Single */
76+
.ss { color: $cyan } /* Literal.String.Symbol */
77+
.bp { color: $blue } /* Name.Builtin.Pseudo */
78+
.vc { color: $blue } /* Name.Variable.Class */
79+
.vg { color: $blue } /* Name.Variable.Global */
80+
.vi { color: $blue } /* Name.Variable.Instance */
81+
.il { color: $cyan } /* Literal.Number.Integer.Long */
Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
// Thanks to https://gist.github.com/nicolashery/5765395
2+
3+
// Since the light theme is applied before the dark theme, the dark theme is additive.
4+
// So we must set the background color and font weight on everything that the light theme might have changed.
5+
6+
$base03: #002b36;
7+
$base01: #586e75;
8+
$base1: #93a1a1;
9+
$orange: #cb4b16;
10+
$red: #dc322f;
11+
$blue: #268bd2;
12+
$cyan: #2aa198;
13+
$green: #859900;
14+
$yellow: #B58900;
15+
16+
& { background-color: $base03; color: $base1; }
17+
.c { color: $base01; background-color: transparent; font-style: inherit; } /* Comment */
18+
.err { color: $base1; background-color: transparent; font-style: inherit; } /* Error */
19+
.g { color: $base1; background-color: transparent; font-style: inherit; } /* Generic */
20+
.k { color: $green; background-color: transparent; font-style: inherit; } /* Keyword */
21+
.l { color: $base1; background-color: transparent; font-style: inherit; } /* Literal */
22+
.n { color: $base1; background-color: transparent; font-style: inherit; } /* Name */
23+
.o { color: $green; background-color: transparent; font-style: inherit; } /* Operator */
24+
.x { color: $orange; background-color: transparent; font-style: inherit; } /* Other */
25+
.p { color: $base1; background-color: transparent; font-style: inherit; } /* Punctuation */
26+
.cm { color: $base01; background-color: transparent; font-style: inherit; } /* Comment.Multiline */
27+
.cp { color: $green; background-color: transparent; font-style: inherit; } /* Comment.Preproc */
28+
.c1 { color: $base01; background-color: transparent; font-style: inherit; } /* Comment.Single */
29+
.cs { color: $green; background-color: transparent; font-style: inherit; } /* Comment.Special */
30+
.gd { color: $cyan; background-color: transparent; font-style: inherit; } /* Generic.Deleted */
31+
.ge { color: $base1; background-color: transparent; font-style: italic; } /* Generic.Emph */
32+
.gr { color: $red; background-color: transparent; font-style: inherit; } /* Generic.Error */
33+
.gh { color: $orange; background-color: transparent; font-style: inherit; } /* Generic.Heading */
34+
.gi { color: $green; background-color: transparent; font-style: inherit; } /* Generic.Inserted */
35+
.go { color: $base1; background-color: transparent; font-style: inherit; } /* Generic.Output */
36+
.gp { color: $base1; background-color: transparent; font-style: inherit; } /* Generic.Prompt */
37+
.gs { color: $base1; background-color: transparent; font-weight: bold; } /* Generic.Strong */
38+
.gu { color: $orange; background-color: transparent; font-style: inherit; } /* Generic.Subheading */
39+
.gt { color: $base1; background-color: transparent; font-style: inherit; } /* Generic.Traceback */
40+
.kc { color: $orange; background-color: transparent; font-style: inherit; } /* Keyword.Constant */
41+
.kd { color: $blue; background-color: transparent; font-style: inherit; } /* Keyword.Declaration */
42+
.kn { color: $green; background-color: transparent; font-style: inherit; } /* Keyword.Namespace */
43+
.kp { color: $green; background-color: transparent; font-style: inherit; } /* Keyword.Pseudo */
44+
.kr { color: $blue; background-color: transparent; font-style: inherit; } /* Keyword.Reserved */
45+
.kt { color: $red; background-color: transparent; font-style: inherit; } /* Keyword.Type */
46+
.ld { color: $base1; background-color: transparent; font-style: inherit; } /* Literal.Date */
47+
.m { color: $cyan; background-color: transparent; font-style: inherit; } /* Literal.Number */
48+
.s { color: $cyan; background-color: transparent; font-style: inherit; } /* Literal.String */
49+
.na { color: $base1; background-color: transparent; font-style: inherit; } /* Name.Attribute */
50+
.nb { color: $yellow; background-color: transparent; font-style: inherit; } /* Name.Builtin */
51+
.nc { color: $blue; background-color: transparent; font-style: inherit; } /* Name.Class */
52+
.no { color: $orange; background-color: transparent; font-style: inherit; } /* Name.Constant */
53+
.nd { color: $blue; background-color: transparent; font-style: inherit; } /* Name.Decorator */
54+
.ni { color: $orange; background-color: transparent; font-style: inherit; } /* Name.Entity */
55+
.ne { color: $orange; background-color: transparent; font-style: inherit; } /* Name.Exception */
56+
.nf { color: $blue; background-color: transparent; font-style: inherit; } /* Name.Function */
57+
.nl { color: $base1; background-color: transparent; font-style: inherit; } /* Name.Label */
58+
.nn { color: $base1; background-color: transparent; font-style: inherit; } /* Name.Namespace */
59+
.nx { color: $base1; background-color: transparent; font-style: inherit; } /* Name.Other */
60+
.py { color: $base1; background-color: transparent; font-style: inherit; } /* Name.Property */
61+
.nt { color: $blue; background-color: transparent; font-style: inherit; } /* Name.Tag */
62+
.nv { color: $blue; background-color: transparent; font-style: inherit; } /* Name.Variable */
63+
.ow { color: $green; background-color: transparent; font-style: inherit; } /* Operator.Word */
64+
.w { color: $base1; background-color: transparent; font-style: inherit; } /* Text.Whitespace */
65+
.mf { color: $cyan; background-color: transparent; font-style: inherit; } /* Literal.Number.Float */
66+
.mh { color: $cyan; background-color: transparent; font-style: inherit; } /* Literal.Number.Hex */
67+
.mi { color: $cyan; background-color: transparent; font-style: inherit; } /* Literal.Number.Integer */
68+
.mo { color: $cyan; background-color: transparent; font-style: inherit; } /* Literal.Number.Oct */
69+
.sb { color: $base01; background-color: transparent; font-style: inherit; } /* Literal.String.Backtick */
70+
.sc { color: $cyan; background-color: transparent; font-style: inherit; } /* Literal.String.Char */
71+
.sd { color: $base1; background-color: transparent; font-style: inherit; } /* Literal.String.Doc */
72+
.s2 { color: $cyan; background-color: transparent; font-style: inherit; } /* Literal.String.Double */
73+
.se { color: $orange; background-color: transparent; font-style: inherit; } /* Literal.String.Escape */
74+
.sh { color: $base1; background-color: transparent; font-style: inherit; } /* Literal.String.Heredoc */
75+
.si { color: $cyan; background-color: transparent; font-style: inherit; } /* Literal.String.Interpol */
76+
.sx { color: $cyan; background-color: transparent; font-style: inherit; } /* Literal.String.Other */
77+
.sr { color: $red; background-color: transparent; font-style: inherit; } /* Literal.String.Regex */
78+
.s1 { color: $cyan; background-color: transparent; font-style: inherit; } /* Literal.String.Single */
79+
.ss { color: $cyan; background-color: transparent; font-style: inherit; } /* Literal.String.Symbol */
80+
.bp { color: $blue; background-color: transparent; font-style: inherit; } /* Name.Builtin.Pseudo */
81+
.vc { color: $blue; background-color: transparent; font-style: inherit; } /* Name.Variable.Class */
82+
.vg { color: $blue; background-color: transparent; font-style: inherit; } /* Name.Variable.Global */
83+
.vi { color: $blue; background-color: transparent; font-style: inherit; } /* Name.Variable.Instance */
84+
.il { color: $cyan; background-color: transparent; font-style: inherit; } /* Literal.Number.Integer.Long */

0 commit comments

Comments
 (0)