Skip to content
This repository was archived by the owner on Sep 6, 2021. It is now read-only.

Commit 56f70a4

Browse files
larz0larz0
committed
Merge pull request #8462 from adobe/dangoor/8420-theme-rejigger
Redoing the dark theme to be more plain CSS and not rely on central variables
2 parents 85cb384 + 01af13b commit 56f70a4

File tree

2 files changed

+93
-148
lines changed

2 files changed

+93
-148
lines changed

‎src/extensions/default/ThorDarkTheme/main.less

Lines changed: 92 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
1+
// Copyright (c) 2014 Adobe Systems Incorporated. All rights reserved.
22
//
33
// Permission is hereby granted, free of charge, to any person obtaining a
44
// copy of this software and associated documentation files (the "Software"),
@@ -23,16 +23,16 @@
2323

2424

2525
// Brackets-specific default font and color definitions
26-
@import url("brackets_colors.less");
26+
//@import url("brackets_colors.less");
2727

2828
// Default theme -- all UI styling comes from variables in a theme
2929
// Themes can rely on variables defined above
30-
@import url("brackets_theme_default.less");
30+
//@import url("brackets_theme_default.less");
3131

3232
// Include Codemirror styling overrides so that we can overrides proper values
3333
// for the theme. If you need to customize the tree, you also include jsTree.less
3434
// and even brackets_scrollbars.less
35-
@import url("brackets_codemirror_override.less");
35+
//@import url("brackets_codemirror_override.less");
3636

3737

3838
/*
@@ -48,147 +48,115 @@
4848
* in this file.
4949
*/
5050

51-
/* Overall Colors */
51+
/* Define some variables used in multiple places */
5252
@background: #1d1f21;
53-
@current-line: #000;
5453
@foreground: #c5c8c6;
55-
@comment: #767676;
56-
@orange: #d89333;
57-
@blue: #6c9ef8;
58-
@purple: #b77fdb;
59-
@green: #85a300;
60-
@red: #dc322f;
61-
@aqua: #8abeb7;
62-
@violet: #6c71c4;
63-
@yellow: #f0c674;
64-
@pink: #d85896;
54+
@bc-color-step-size: 10%;
6555

66-
/*
67-
* Background colors are ordered from least "intense" to most "intense"
68-
* So, if the background is light, then @background-color-3 should be
69-
* lightest, -2 should be darker, and -1 should be darker still.
70-
*
71-
* The opposite is true for a dark background -- background-color-3 should be
72-
* the darkest, -2 should be lighter, and -1 should be lighter still.
73-
*/
74-
@background-color-1: lighten(@background, @bc-color-step-size*2);
75-
@background-color-2: lighten(@background, @bc-color-step-size);
76-
@background-color-3: @background;
56+
/* Code Styling */
7757

78-
/*
79-
* @content-color-stronger should be should be further away from the
80-
* background color than @content-color (i.e. more contrasty).
81-
*
82-
* @content-color-weaker should be closer to the background color
83-
* than @content-color (i.e. less contrasty).
84-
*/
85-
@content-color: @foreground;
86-
@content-color-stronger: lighten(@foreground, @bc-color-step-size);
87-
@content-color-weaker: darken(@foreground, @bc-color-step-size);
58+
/* Custom scrollbar colors */
59+
.platform-win & {
60+
.CodeMirror-gutter-filler {
61+
background-color: rgb(15, 15, 15);
62+
}
63+
// Note: when changing padding/margins, may need to adjust metrics in ScrollTrackMarkers.js
8864

89-
/* Code Styling */
65+
::-webkit-scrollbar {
66+
background-color: rgb(15, 15, 15);
67+
}
9068

91-
/* code accent colors */
92-
@accent-keyword: @blue;
93-
@accent-atom: @orange;
94-
@accent-number: @green;
95-
@accent-def: @purple;
96-
@accent-variable: @foreground;
97-
@accent-variable-2: @foreground;
98-
@accent-variable-3: @foreground;
99-
@accent-property: @purple;
100-
@accent-operator: @foreground;
101-
@accent-comment: @comment;
102-
@accent-string: @orange;
103-
@accent-string-2: @orange;
104-
@accent-meta: @foreground;
105-
@accent-error: @red;
106-
@accent-qualifier: @blue;
107-
@accent-builtin: @blue;
108-
@accent-bracket: @foreground;
109-
@accent-tag: @blue;
110-
@accent-attribute: @green;
111-
@accent-header: @pink;
112-
@accent-quote: @blue;
113-
@accent-hr: @orange;
114-
@accent-link: @purple;
115-
@accent-rangeinfo: @violet;
116-
@accent-minus: @red;
117-
@accent-plus: @green;
118-
119-
/* inline editor colors */
120-
@inline-background-color-1: lighten(@background, @bc-color-step-size);
121-
@inline-background-color-2: lighten(@background, @bc-color-step-size*2);
122-
@inline-background-color-3: rgba(0,0,0,0);
123-
124-
@inline-color-1: darken(@foreground, @bc-color-step-size*2);
125-
@inline-color-2: darken(@foreground, @bc-color-step-size);
126-
@inline-color-3: @background;
127-
128-
/* Selection colors */
129-
@selection-color-focused: #0050a0;
130-
@selection-color-unfocused: #333f48;
131-
132-
@activeline-bgcolor: #2f2f2f;
133-
@activeline-number: #fff;
134-
@activeline-number-bgcolor: #000;
135-
@matching-bracket: #2e5c00;
136-
137-
/* Status Bar Colors */
138-
@status-bar-background-color: #1C1C1E;
139-
@status-bar-border: rgba(255, 255, 255, 0.08);
140-
@status-bar-text-color: #a1a1a1;
141-
@status-bar-quiet-text-color: #666;
142-
143-
/* custom scrollbar colors */
144-
@win-scrollbar-track: rgb(15, 15, 15);
145-
@win-scrollbar-thumb: rgb(49, 49, 49);
146-
@win-scrollbar-thumb-hover: rgb(89, 89, 89);
147-
@win-scrollbar-thumb-active: rgb(169, 169, 169);
148-
149-
@linux-scrollbar-thumb: rgba(255, 255, 255, 0.24);
150-
@linux-scrollbar-thumb-inactive: rgba(255, 255, 255, 0.12);
69+
::-webkit-scrollbar-thumb {
70+
box-shadow: 0 0 0 12px rgb(49, 49, 49) inset;
71+
}
72+
::-webkit-scrollbar-thumb:hover,
73+
::-webkit-scrollbar-thumb:focus {
74+
box-shadow: 0 0 0 12px rgb(89, 89, 89) inset;
75+
}
76+
::-webkit-scrollbar-thumb:active {
77+
box-shadow: 0 0 0 12px rgb(169, 169, 169) inset;
78+
}
79+
}
15180

81+
.platform-linux & {
82+
::-webkit-scrollbar-thumb {
83+
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.24) inset;
84+
}
15285

153-
/* Extra CSS */
86+
::-webkit-scrollbar-thumb:window-inactive {
87+
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12) inset;
88+
}
89+
}
15490

155-
.code-cursor() {
156-
// to make a block cursor, use something like this:
157-
// background-color: fadeout(@blue, 50%);
158-
// border: none !important;
15991

160-
// to make an I-cursor, use something like this:
161-
border-left: 1px solid @content-color !important;
92+
.CodeMirror, .CodeMirror-scroll {
93+
background-color: @background;
94+
color: @foreground;
16295
}
16396

164-
.CodeMirror .CodeMirror-gutters {
165-
// gutter border:
166-
// border-right: 1px solid rgba(255, 255, 255, 0.03);
97+
.CodeMirror-focused .CodeMirror-activeline-background {
98+
background: #2f2f2f;
99+
}
100+
.show-line-padding .CodeMirror-focused .CodeMirror-activeline-background {
101+
box-shadow: inset 15px 0 0 0 #000;
167102
}
168103

169-
.CodeMirror-focused .CodeMirror-activeline .CodeMirror-gutter-elt {
170-
color: @comment;
104+
.CodeMirror-focused .CodeMirror-activeline {
105+
.CodeMirror-gutter-elt {
106+
background: #000;
107+
color: #fff;
108+
}
109+
.inline-widget .CodeMirror-gutter-elt {
110+
color: #767676;
111+
}
171112
}
172113

173-
#status-bar {
174-
background: @status-bar-background-color;
175-
border-top: 1px solid @status-bar-border;
176-
color:@status-bar-text-color;
114+
.cm-keyword, .cm-qualifier, .cm-builtin, .cm-tag, .cm-quote {color: #6c9ef8;}
115+
.cm-atom, .cm-string, .cm-string-2, .cm-hr {color: #d89333;}
116+
.cm-number, .cm-attribute, .cm-plus {color: #85a300;}
117+
.cm-def, .cm-property {color: #b77fdb;}
118+
.cm-variable, .cm-variable-2, .cm-variable-3, .cm-operator, .cm-meta, .cm-bracket {color: @foreground;}
119+
.cm-comment {color: #767676;}
120+
.cm-error, .cm-minus {color: #dc322f;}
121+
.cm-header {color: #d85896;}
122+
.cm-link {color: #b77fdb; text-decoration: none;}
123+
.cm-rangeinfo {color: #6c71c4;}
124+
125+
/* Extra CSS */
126+
127+
.CodeMirror-cursor {
128+
border-left: 1px solid #c5c8c6 !important;
177129
}
178130

179-
#status-info {
180-
color: @status-bar-text-color;
131+
.CodeMirror-gutters {
132+
background-color: @background;
133+
border-right: none;
181134
}
182135

183-
#status-file {
184-
color: @status-bar-quiet-text-color;
136+
.CodeMirror-focused .CodeMirror-activeline .CodeMirror-gutter-elt, .CodeMirror-linenumber {
137+
color: #767676;
185138
}
186139

187-
#status-indicators {
188-
background: @status-bar-background-color;
189-
color: @status-bar-text-color;
140+
.CodeMirror .CodeMirror-selected {
141+
background: #333f48;
142+
}
143+
.CodeMirror-focused .CodeMirror-selected {
144+
background: #0050a0;
145+
}
190146

191-
> div {
192-
border-left: 1px solid @status-bar-border;
193-
}
147+
.CodeMirror-matchingbracket, .CodeMirror-matchingtag {
148+
/* Ensure visibility against gray inline editor background */
149+
background-color: #2e5c00;
150+
color: @foreground !important;
194151
}
152+
153+
/* Inline editor styling */
154+
155+
.related-container .selection:before {
156+
border-top: 9px solid black;
157+
border-bottom: 9px solid black;
158+
}
159+
160+
.inline-widget .CodeMirror, .inline-widget .CodeMirror-gutters {
161+
background: transparent;
162+
}

‎src/extensions/default/ThorLightTheme/main.less

Lines changed: 1 addition & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -18,27 +18,4 @@
1818
// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
1919
// DEALINGS IN THE SOFTWARE.
2020

21-
// Brackets-specific default font and color definitions
22-
@import url("brackets_colors.less");
23-
24-
// Default theme -- all UI styling comes from variables in a theme
25-
// Themes can rely on variables defined above
26-
@import url("brackets_theme_default.less");
27-
28-
// Include Codemirror styling overrides so that we can overrides proper values
29-
// for the theme. If you need to customize the tree, you also include jsTree.less
30-
// and even brackets_scrollbars.less
31-
@import url("brackets_codemirror_override.less");
32-
33-
/*
34-
* Brackets Default Theme
35-
*
36-
* Defines all the variables that one can configure in a theme. This should
37-
* contain all variables / mixins for UI styling that we want to be able to
38-
* change in a theme.
39-
*
40-
* Throughout the rest of the LESS files we should _only_ use color
41-
* variable names that are on the LHS of the list below. So, if we
42-
* need a new color for some UI element, we should add a variable
43-
* in this file.
44-
*/
21+
// This is the default theme and doesn't need to do anything!

0 commit comments

Comments
 (0)