7
Replies
7
7
Replies
Community Expert
,
I use a Brackets code theme from GitHub called RubyBlue. There are dozens of other themes there as well.
https://brackets-themes.github.io/
My Theme contains @ variables near the top of the main.less file. These @ variables are used throughout the Theme's style.
/**
* Theme RubyBlue Copyright (c) 2014 Eric Johnson
* Licensed under MIT
*/
/* Overall Colors */
@background: #112435;
@brightgreen: #7BD827;
@comment: #999;
@rb-blue: #3e7087;
@rb-darkblue: #16314a; /* Currently Unused */
@rb-lightblue: #82C6E0;
@rb-magenta: #f0f;
@rb-orange: #F08047;
@rb-pink: #d85896; /* Currently Unused */
@rb-red: #af2018;
@rb-violet: #6c71c4; /* Currently Unused */
@rb-yellow: #F4C20B;
@rb-white: #fff;
.CodeMirror {
.CodeMirror-scroll {
background-color: @background;
color: @rb-white;
}
.CodeMirror-selected {
background: lighten(@background, 20%);
}
.CodeMirror-gutters {
background: lighten(@background, 13%);
border-right: 7px solid @rb-blue;
}
.CodeMirror-linenumber {
color: @rb-white;
}
.CodeMirror-cursor {
border-left: 1px solid @rb-white !important;
}
.CodeMirror-matchingbracket {
color: @rb-magenta !important;
background-color: transparent;
}
.CodeMirror-activeline-background {
background: lighten(@background, 5%);
}
.CodeMirror-searching {
background-color: fade(@rb-orange, 90%);
border: 1px dashed white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
color: @rb-white !important;
}
}
.CodeMirror-searching.searching-current-match {
background-color: @rb-red;
}
.cm-comment {
color: @comment;
}
See screenshot.
Change comment style to these variables.
.cm-comment {
color: @comment;
background-color:@rb-yellow;
}
Save main.less file (Ctrl+S).
Viola! Dark text on yellow background.
Hope that helps.
AdChoices
