Skip to content

Commit 79c6e47

Browse files
gskinnergskinner
committed
Initial night mode implementation.
1 parent c776596 commit 79c6e47

File tree

18 files changed

+211
-126
lines changed

18 files changed

+211
-126
lines changed

‎assets/themes/dark.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dev/icons/moon.svg

Lines changed: 9 additions & 0 deletions
Loading

‎dev/inject/icons.svg

Lines changed: 1 addition & 1 deletion
Loading

‎dev/sass/codemirror.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
div.CodeMirror-cursor {
1111
pointer-events: none; /* this doesn't work in IE<11 */
12+
border-left: 1px solid $doc-black;
1213
}
1314
}
1415

‎dev/sass/colors.scss

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// base colors:
2-
$theme-color: #80C0F0; /* #66CCFF */
2+
$theme-color: #70B0E0; /* #66CCFF */
33
$base-color: mix(#808080, $theme-color, 85);
44

55
// core colors:
@@ -31,17 +31,20 @@ $doc-light: mix($doc-white, $base-color, 50%);
3131
// control colors:
3232
$title-bg: $doc-light;
3333
$tooltip-bg: rgba($doc-black,0.9);
34-
$selected-stroke-color: rgba($black, 0.4);
35-
$match-color: rgba($theme-color, 0.6);
34+
$selected-stroke-color: rgba($doc-black, 0.3);
35+
$match-color: rgba($theme-color, 0.5);
3636
$dark-shadow: rgba(0,0,0, 0.25);
3737
$light-shadow: rgba(0,0,0, 0.1);
3838
$strong-shadow: rgba(0,0,0, 0.45);
3939

40-
// syntax coloring:
41-
$error-color: #C22;
40+
// notice colors:
41+
$error-color: #D22;
4242
$warning-color: $error-color;
43+
$fail-color: $error-color;
44+
$pass-color: #0A0;
4345

44-
$group-color: #090;
46+
// syntax colors:
47+
$group-color: #0A0;
4548
$groupbg-color: #0E0;
4649
$alt-color: $group-color;
4750

‎dev/sass/colors_dark.scss

Lines changed: 16 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,36 @@
1+
@import "colors";
2+
13
// base colors:
2-
$theme-color: darken(#80C0F0, 15);
3-
$base-color: mix(#808080, adjust-hue($theme-color, 20), 85);
4+
$theme-color: desaturate(darken($theme-color, 20), 22);
5+
$base-color: mix(#808080, darken($theme-color, 20), 90);
46

57
// core colors:
6-
$black: darken($base-color, 44%);
7-
$darkest: mix($black, $base-color, 80%);
8-
$darker: mix($black, $base-color, 64%);
9-
$dark: mix($black, $base-color, 35%);
10-
11-
$mid: $base-color;
12-
13-
$white: lighten($base-color, 45%);
14-
$lightest: mix($white, $base-color, 92%);
15-
$lighter: mix($white, $base-color, 78%);
16-
$light: mix($white, $base-color, 50%);
8+
// inherited
179

1810
// doc colors:
19-
$doc-black: $white;
11+
$doc-black: $lighter;
2012
$doc-darkest: mix($doc-black, $base-color, 90%);
2113
$doc-darker: mix($doc-black, $base-color, 72%);
2214
$doc-dark: mix($doc-black, $base-color, 50%);
2315

24-
$doc-mid: $base-color;
16+
$doc-mid: $mid;
2517

26-
$doc-white: $darkest;
18+
$doc-white: mix($black, $darkest, 30%);
2719
$doc-lightest: mix($doc-white, $base-color, 92%);
28-
$doc-lighter: mix($doc-white, $base-color, 78%);
29-
$doc-light: mix($doc-white, $base-color, 50%);
20+
$doc-lighter: mix($doc-white, $base-color, 80%);
21+
$doc-light: mix($doc-white, $base-color, 60%);
3022

3123
// control colors:
3224
$title-bg: $doc-light;
3325
$tooltip-bg: rgba($doc-black,0.9);
34-
$selected-stroke-color: rgba($black, 0.4);
26+
$selected-stroke-color: rgba($doc-black, 0.4);
3527
$match-color: rgba($theme-color, 0.6);
36-
$dark-shadow: rgba(0,0,0, 0.35);
37-
$light-shadow: rgba(0,0,0, 0.15);
38-
$strong-shadow: rgba(0,0,0, 0.55);
28+
// shadows inherited
29+
30+
// notice colors:
3931

4032
// syntax coloring:
41-
$group-color: #090;
42-
$groupbg-color: #0E0;
43-
$set-color: #D70;
44-
$setbg-color: #FE0;
45-
$error-color: #C24;
46-
$anchor-color: #840;
47-
$quant-color: #58F;
48-
$alt-color: $group-color;
49-
$esc-color: #C0C;
50-
$special-color: $esc-color;
33+
// inherited
5134

5235
// invisible char color:
53-
// this isn't bound to the theme color, because it's used in the tab bitmap:
54-
$invischar-color: rgba(127,127,127,0.5);
55-
56-
// this shares the colors with js:
57-
#library > #colors {
58-
.theme { color: $theme-color; }
59-
}
36+
// inherited

‎dev/sass/colors_light.scss

Lines changed: 8 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1+
@import "colors";
2+
13
// base colors:
2-
$theme-color: darken(#80C0F0, 8);
4+
// inherit theme-color
5+
$theme-color: darken($theme-color, 6);
36
$base-color: mix(#808080, invert($theme-color), 95);
47

58
// core colors:
@@ -31,29 +34,14 @@ $doc-light: mix($doc-white, $base-color, 50%);
3134
// control colors:
3235
$title-bg: $doc-light;
3336
$tooltip-bg: rgba($doc-black,0.9);
34-
$selected-stroke-color: rgba($black, 0.4);
35-
$match-color: rgba($theme-color, 0.6);
37+
$selected-stroke-color: rgba($doc-black, 0.4);
38+
$match-color: rgba($theme-color, 0.45);
3639
$dark-shadow: rgba(0,0,0, 0.25);
3740
$light-shadow: rgba(0,0,0, 0.1);
3841
$strong-shadow: rgba(0,0,0, 0.35);
3942

4043
// syntax coloring:
41-
$group-color: #090;
42-
$groupbg-color: #0E0;
43-
$set-color: #D70;
44-
$setbg-color: #FE0;
45-
$error-color: #C24;
46-
$anchor-color: #840;
47-
$quant-color: #58F;
48-
$alt-color: $group-color;
49-
$esc-color: #C0C;
50-
$special-color: $esc-color;
44+
// inherited
5145

5246
// invisible char color:
53-
// this isn't bound to the theme color, because it's used in the tab bitmap:
54-
$invischar-color: rgba(127,127,127,0.5);
55-
56-
// this shares the colors with js:
57-
#library > #colors {
58-
.theme { color: $theme-color; }
59-
}
47+
// inherited

‎dev/sass/controls.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,9 @@ svg.icon {
114114
}
115115

116116
> svg.icon {
117-
margin-right: 0.25em;
117+
& + * {
118+
margin-left: 0.25em;
119+
}
118120
margin-top: -0.125em;
119121

120122
&.dropdown {

‎dev/sass/regexr.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import "colors";
1+
@import "colors"; // colors_dark
22
@import "variables";
33
@import "fonts";
44

‎dev/sass/styles.scss

Lines changed: 52 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,3 @@
1-
html, body {
2-
margin: 0;
3-
width: 100%;
4-
height: 100%;
5-
min-height: 540px;
6-
min-width: 500px;
7-
font-family: $font-family;
8-
font-size: $font-size;
9-
color: $white;
10-
user-select: none;
11-
cursor: default;
12-
13-
// This shouldn't be necessary if everything is working correctly
14-
// overflow: hidden;
15-
16-
> .container {
17-
/* wraps all content, since flex layouts don't work reliably on body */
18-
height: 100%;
19-
display: flex;
20-
flex-flow: column;
21-
22-
> .app {
23-
/* wraps the sidebar and doc */
24-
flex: 1;
25-
display: flex;
26-
align-items: stretch;
27-
}
28-
}
29-
}
30-
31-
.app .sidebar, .container .header, .tooltip {
32-
-moz-osx-font-smoothing: grayscale;
33-
-webkit-font-smoothing: antialiased;
34-
}
35-
36-
a {
37-
@extend %link;
38-
text-decoration: none;
39-
}
40-
41-
code, pre {
42-
font-family: $monospace;
43-
}
44-
45-
pre {
46-
margin: 0;
47-
}
48-
491
%title {
502
display: flex;
513
align-items: center;
@@ -59,7 +11,7 @@ pre {
5911

6012
%link {
6113
transition: color $transition-t;
62-
color: $theme-color;
14+
color: $lighter;
6315

6416
&:not(.inactive) {
6517
cursor: pointer;
@@ -96,6 +48,55 @@ pre {
9648
z-index: 9;
9749
}
9850

51+
html, body {
52+
margin: 0;
53+
width: 100%;
54+
height: 100%;
55+
min-height: 540px;
56+
min-width: 500px;
57+
font-family: $font-family;
58+
font-size: $font-size;
59+
color: $white;
60+
user-select: none;
61+
cursor: default;
62+
63+
// This shouldn't be necessary if everything is working correctly
64+
// overflow: hidden;
65+
66+
> .container {
67+
/* wraps all content, since flex layouts don't work reliably on body */
68+
height: 100%;
69+
display: flex;
70+
flex-flow: column;
71+
72+
> .app {
73+
/* wraps the sidebar and doc */
74+
flex: 1;
75+
display: flex;
76+
align-items: stretch;
77+
}
78+
}
79+
}
80+
81+
.app .sidebar, .container .header, .tooltip {
82+
-moz-osx-font-smoothing: grayscale;
83+
-webkit-font-smoothing: antialiased;
84+
}
85+
86+
code, pre {
87+
font-family: $monospace;
88+
}
89+
90+
pre {
91+
margin: 0;
92+
}
93+
94+
a {
95+
@extend %link;
96+
color: $theme-color;
97+
text-decoration: none;
98+
}
99+
99100
h1, h2 {
100101
font-size: 1rem;
101102
font-weight: bold;
@@ -114,9 +115,9 @@ h1, h2 {
114115
}
115116

116117
hr {
117-
border: 1px solid rgba($mid, 0.25);
118+
border: 0;
119+
border-top: 1px solid rgba($mid, 0.25);
118120
margin: 0.75em 0 1em 0;
119-
border-bottom: 0;
120121
}
121122

122123

‎dev/sass/views/header.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919

2020
.settings {
2121
@extend %link;
22+
color: $theme-color;
2223
display: flex;
2324
min-width: 0;
2425
max-width: 20em;
@@ -80,6 +81,19 @@
8081
}
8182
}
8283
}
84+
85+
.button.theme {
86+
padding: $pad * 0.3755;;
87+
background: $darkest;
88+
89+
&.selected .icon {
90+
color: $theme-color;
91+
}
92+
93+
&:hover {
94+
background: $darker;
95+
}
96+
}
8397

8498
ul.etc {
8599
flex: 1;

‎dev/sass/views/sidebar.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -269,8 +269,8 @@
269269

270270
code em {
271271
font-style: normal;
272-
background: $theme-color;
273-
color: $black;
272+
background: $match-color;
273+
color: $white;
274274
margin-right: 1px;
275275
}
276276

‎dev/sass/views/tools/explain.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
padding: 0.5em 1em 0.5em 2.5em;
1111
margin-top: 0.75em;
1212
border: solid 1px rgba($doc-light, 0.5);
13-
border-left-width: 0.25em;
13+
border-left: solid 0.25em rgba($doc-light, 0.5);
1414
background: $doc-white;
1515
cursor: pointer;
1616
}

‎dev/src/RegExr.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import Text from "./views/Text";
3232
import Tools from "./views/Tools";
3333
import Sidebar from "./views/Sidebar";
3434
import Account from "./views/Account";
35+
import Theme from "./views/Theme";
3536

3637
import Reference from "./docs/Reference";
3738
import reference_content from "./docs/reference_content";
@@ -159,6 +160,8 @@ export default class RegExr extends EventDispatcher {
159160
hover: new Tooltip($.query("#library #tooltip").cloneNode(true)),
160161
toggle: new Tooltip($.query("#library #tooltip"), true)
161162
};
163+
164+
this.theme = new Theme(this.el);
162165

163166
let el = $.query(".app > .doc", this.el);
164167
this.expression = new Expression($.query("> section.expression", el));

0 commit comments

Comments
 (0)