Skip to content

Commit 8de5404

Browse files
jackycutejackycute
committed
Added new editor theme: one-dark, updated monokai active line gutter style
1 parent 98ca5cb commit 8de5404

3 files changed

Lines changed: 213 additions & 1 deletion

File tree

‎public/vendor/codemirror/theme/monokai.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
.cm-s-monokai span.cm-link {color: #ae81ff;}
2929
.cm-s-monokai span.cm-error {background: #f92672; color: #f8f8f0;}
3030

31-
.cm-s-monokai .CodeMirror-activeline-background {background: #373831 !important;}
31+
.cm-s-monokai .CodeMirror-activeline-background, .cm-s-monokai .CodeMirror-activeline .CodeMirror-gutter-wrapper {background: #373831 !important;}
3232
.cm-s-monokai .CodeMirror-matchingbracket {
3333
text-decoration: underline;
3434
color: white !important;

‎public/vendor/codemirror/theme/one-dark.css‎

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
/**
2+
* Atom One Dark Theme
3+
*
4+
* Copyright (c) 2015 Hikio - twitter.com/hik_io
5+
*
6+
* 06/26/2015
7+
*
8+
* Licensed under MIT
9+
* GitHub https://github.com/hikio/brackets-one-dark
10+
*/
11+
/*
12+
Modified by jackycute 2015
13+
borrow some color from tomorrow-night-eighties
14+
*/
15+
/* Editor */
16+
.panel,
17+
#main-toolbar {
18+
background: #1d222a;
19+
}
20+
#working-set-list-container,
21+
.dark #editor-holder .pane-header {
22+
background: #15181e;
23+
}
24+
.working-set-header,
25+
#project-files-header .btn-alt-quiet {
26+
background: rgba(204, 217, 255, 0.05);
27+
}
28+
.working-set-header > span {
29+
background: transparent;
30+
}
31+
.sidebar-selection,
32+
.filetree-selection,
33+
.sidebar-selection-extension,
34+
.filetree-selection-extension {
35+
background: #282c34;
36+
}
37+
.dark #status-bar,
38+
.dark #status-indicators {
39+
background: #15181e;
40+
border-top-color: #1d222a;
41+
}
42+
.dark a,
43+
.open-files-container li.selected a {
44+
color: #528bff;
45+
}
46+
/* Code Styling */
47+
.cm-s-one-dark.CodeMirror,
48+
.cm-s-one-dark .CodeMirror-scroll {
49+
/* background-color: #282c34;*/
50+
background-color: #1e2126;
51+
color: #abb2bf;
52+
}
53+
.cm-s-one-dark .CodeMirror-activeline-background {
54+
background: transparent;
55+
}
56+
.cm-s-one-dark.CodeMirror-focused .CodeMirror-activeline-background {
57+
background: rgba(204, 217, 255, 0.05);
58+
}
59+
.show-line-padding .cm-s-one-dark.CodeMirror-focused .CodeMirror-activeline-background {
60+
box-shadow: inset 15px 0 0 0 #000;
61+
}
62+
.cm-s-one-dark.CodeMirror-focused .CodeMirror-activeline .CodeMirror-gutter-elt {
63+
background: transparent;
64+
color: #5c6370;
65+
}
66+
.cm-s-one-dark.CodeMirror-focused .CodeMirror-activeline .inline-widget .CodeMirror-gutter-elt {
67+
color: red;
68+
}
69+
.cm-s-one-dark .cm-string-2,
70+
.cm-s-one-dark .cm-hr {
71+
color: #56b6c2;
72+
}
73+
.cm-s-one-dark .cm-number,
74+
.cm-s-one-dark .cm-attribute,
75+
.cm-s-one-dark .cm-qualifier,
76+
.cm-s-one-dark .cm-plus,
77+
.cm-s-one-dark .cm-atom {
78+
color: #eda35e;
79+
}
80+
.cm-s-one-dark .cm-def {
81+
color: #c678dd;
82+
}
83+
.cm-s-one-dark .cm-property,
84+
.cm-s-one-dark .cm-variable,
85+
.cm-s-one-dark .cm-variable-2,
86+
.cm-s-one-dark .cm-variable-3,
87+
.cm-s-one-dark .cm-operator,
88+
/*.cm-meta,*/
89+
.cm-s-one-dark .cm-bracket {
90+
color: #f76e79;
91+
}
92+
/*borrow from tomorrow-night-eighties*/
93+
.cm-s-one-dark .cm-variable {
94+
color: #99cc99;
95+
}
96+
.cm-s-one-dark .cm-variable-2 {
97+
color: #6699cc;
98+
}
99+
100+
.cm-s-one-dark .cm-comment {
101+
color: #5c6370;
102+
font-style: italic;
103+
}
104+
.cm-s-one-dark .cm-error,
105+
.cm-s-one-dark .cm-minus {
106+
color: #be5046;
107+
}
108+
.cm-s-one-dark .cm-header {
109+
color: #eda35e;
110+
}
111+
.cm-s-one-dark .cm-link {
112+
color: #98c379;
113+
text-decoration: none;
114+
}
115+
.cm-s-one-dark .cm-rangeinfo {
116+
color: #c678dd;
117+
}
118+
.cm-s-one-dark .cm-keyword,
119+
.cm-s-one-dark .cm-builtin,
120+
.cm-s-one-dark .cm-tag {
121+
color: #98c379;
122+
}
123+
.cm-s-one-dark .cm-string {
124+
/* color: #98c379;*/
125+
color: #6699cc;
126+
}
127+
/* Extra CSS */
128+
.cm-s-one-dark .CodeMirror-searching {
129+
color: #fff !important;
130+
border: 1px solid #528bff;
131+
margin: 0 -1px;
132+
background-color: rgba(204, 217, 255, 0.09);
133+
box-shadow: 0px 0px 6px rgba(66, 133, 244, 0.4);
134+
}
135+
.cm-s-one-dark .CodeMirror-searching.searching-current-match {
136+
color: #fff;
137+
background-color: #528bff;
138+
box-shadow: 0px 0px 6px rgba(66, 133, 244, 0.8);
139+
}
140+
.cm-s-one-dark .CodeMirror-cursor {
141+
border-left: 2px solid #528bff !important;
142+
}
143+
.cm-s-one-dark .CodeMirror-gutters {
144+
/* background-color: #282c34;*/
145+
background-color: #1e2126;
146+
border-right: 1px solid rgba(204, 217, 255, 0.05);
147+
}
148+
.cm-s-one-dark .CodeMirror-linenumber {
149+
color: #393e46;
150+
}
151+
.cm-s-one-dark.CodeMirror .CodeMirror-selected {
152+
background: rgba(204, 217, 255, 0.05);
153+
}
154+
.cm-s-one-dark.CodeMirror-focused .CodeMirror-selected {
155+
background: rgba(204, 217, 255, 0.09);
156+
}
157+
.cm-s-one-dark .CodeMirror-matchingbracket,
158+
.cm-s-one-dark .CodeMirror-matchingtag {
159+
/* Ensure visibility against gray inline editor background */
160+
background-color: rgba(204, 217, 255, 0.09);
161+
color: #abb2bf !important;
162+
border-bottom: 1px solid #528bff;
163+
}
164+
.cm-s-one-dark .CodeMirror-overwrite .CodeMirror-cursor {
165+
border-left: none !important;
166+
border-bottom: 1px solid #fff;
167+
}
168+
.cm-s-one-dark.CodeMirror .CodeMirror {
169+
background: transparent;
170+
}
171+
.cm-s-one-dark.CodeMirror .CodeMirror .CodeMirror-gutters {
172+
background: transparent;
173+
border-right: none;
174+
}
175+
.cm-s-one-dark.CodeMirror .CodeMirror .CodeMirror-activeline-background {
176+
background: transparent;
177+
}
178+
.cm-s-one-dark.CodeMirror .CodeMirror .CodeMirror-activeline .CodeMirror-gutter-elt {
179+
background: transparent;
180+
color: #5c6370;
181+
}
182+
.cm-s-one-dark.CodeMirror .CodeMirror-focused .CodeMirror-activeline-background {
183+
background: #000;
184+
}
185+
.cm-s-one-dark.CodeMirror .CodeMirror-focused .CodeMirror-activeline .CodeMirror-gutter-elt {
186+
background: rgba(204, 217, 255, 0.05);
187+
color: #fff;
188+
}
189+
.cm-s-one-dark .CodeMirror-foldgutter-open:after {
190+
color: #393e46;
191+
}
192+
.cm-s-one-dark .CodeMirror-foldgutter-folded:after {
193+
color: #5c6370;
194+
}
195+
.cm-s-one-dark .CodeMirror.over-gutter .CodeMirror-foldgutter-open:after,
196+
.cm-s-one-dark.CodeMirror-focused .CodeMirror-activeline .CodeMirror-foldgutter-open:after {
197+
color: #5c6370;
198+
}
199+
.cm-s-one-dark .CodeMirror-foldmarker {
200+
border-color: #393e46;
201+
color: #abb2bf;
202+
background: rgba(204, 217, 255, 0.05);
203+
}
204+
/* Non-editor styling */
205+
.image-view,
206+
.not-editor {
207+
background-color: #282c34;
208+
}
209+
.view-pane .image-view {
210+
color: #abb2bf;
211+
}

‎public/views/head.ejs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
<link rel="stylesheet" href="/vendor/codemirror/addon/scroll/simplescrollbars.css">
2424
<link rel="stylesheet" href="/vendor/codemirror/addon/search/matchesonscrollbar.css">
2525
<link rel="stylesheet" href="/vendor/codemirror/theme/monokai.css">
26+
<link rel="stylesheet" href="/vendor/codemirror/theme/one-dark.css">
2627
<link rel="stylesheet" href="/css/github-extract.css">
2728
<link rel="stylesheet" href="/css/gist.css">
2829
<link rel="stylesheet" href="/vendor/highlight-js/github-gist.min.css">

0 commit comments

Comments
 (0)