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

Redoing the dark theme to be more plain CSS and not rely on central variables #8462

Merged
merged 2 commits into from
Jul 21, 2014
Merged

Redoing the dark theme to be more plain CSS and not rely on central variables #8462

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
45ddc59
Redoing the dark theme to be more plain CSS and not rely on central v…
dangoor Jul 18, 2014
01af13b
Fix inline editor colors.
dangoor Jul 21, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
216 changes: 92 additions & 124 deletions src/extensions/default/ThorDarkTheme/main.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
// Copyright (c) 2014 Adobe Systems Incorporated. All rights reserved.
//
// Permission is hereby granted, free of charge, to any person obtaining a
// copy of this software and associated documentation files (the "Software"),
Expand All @@ -23,16 +23,16 @@


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

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

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


/*
Expand All @@ -48,147 +48,115 @@
* in this file.
*/

/* Overall Colors */
/* Define some variables used in multiple places */
@background: #1d1f21;
@current-line: #000;
@foreground: #c5c8c6;
@comment: #767676;
@orange: #d89333;
@blue: #6c9ef8;
@purple: #b77fdb;
@green: #85a300;
@red: #dc322f;
@aqua: #8abeb7;
@violet: #6c71c4;
@yellow: #f0c674;
@pink: #d85896;
@bc-color-step-size: 10%;

/*
* Background colors are ordered from least "intense" to most "intense"
* So, if the background is light, then @background-color-3 should be
* lightest, -2 should be darker, and -1 should be darker still.
*
* The opposite is true for a dark background -- background-color-3 should be
* the darkest, -2 should be lighter, and -1 should be lighter still.
*/
@background-color-1: lighten(@background, @bc-color-step-size*2);
@background-color-2: lighten(@background, @bc-color-step-size);
@background-color-3: @background;
/* Code Styling */

/*
* @content-color-stronger should be should be further away from the
* background color than @content-color (i.e. more contrasty).
*
* @content-color-weaker should be closer to the background color
* than @content-color (i.e. less contrasty).
*/
@content-color: @foreground;
@content-color-stronger: lighten(@foreground, @bc-color-step-size);
@content-color-weaker: darken(@foreground, @bc-color-step-size);
/* Custom scrollbar colors */
.platform-win & {
.CodeMirror-gutter-filler {
background-color: rgb(15, 15, 15);
}
// Note: when changing padding/margins, may need to adjust metrics in ScrollTrackMarkers.js

/* Code Styling */
::-webkit-scrollbar {
background-color: rgb(15, 15, 15);
}

/* code accent colors */
@accent-keyword: @blue;
@accent-atom: @orange;
@accent-number: @green;
@accent-def: @purple;
@accent-variable: @foreground;
@accent-variable-2: @foreground;
@accent-variable-3: @foreground;
@accent-property: @purple;
@accent-operator: @foreground;
@accent-comment: @comment;
@accent-string: @orange;
@accent-string-2: @orange;
@accent-meta: @foreground;
@accent-error: @red;
@accent-qualifier: @blue;
@accent-builtin: @blue;
@accent-bracket: @foreground;
@accent-tag: @blue;
@accent-attribute: @green;
@accent-header: @pink;
@accent-quote: @blue;
@accent-hr: @orange;
@accent-link: @purple;
@accent-rangeinfo: @violet;
@accent-minus: @red;
@accent-plus: @green;

/* inline editor colors */
@inline-background-color-1: lighten(@background, @bc-color-step-size);
@inline-background-color-2: lighten(@background, @bc-color-step-size*2);
@inline-background-color-3: rgba(0,0,0,0);

@inline-color-1: darken(@foreground, @bc-color-step-size*2);
@inline-color-2: darken(@foreground, @bc-color-step-size);
@inline-color-3: @background;

/* Selection colors */
@selection-color-focused: #0050a0;
@selection-color-unfocused: #333f48;

@activeline-bgcolor: #2f2f2f;
@activeline-number: #fff;
@activeline-number-bgcolor: #000;
@matching-bracket: #2e5c00;

/* Status Bar Colors */
@status-bar-background-color: #1C1C1E;
@status-bar-border: rgba(255, 255, 255, 0.08);
@status-bar-text-color: #a1a1a1;
@status-bar-quiet-text-color: #666;

/* custom scrollbar colors */
@win-scrollbar-track: rgb(15, 15, 15);
@win-scrollbar-thumb: rgb(49, 49, 49);
@win-scrollbar-thumb-hover: rgb(89, 89, 89);
@win-scrollbar-thumb-active: rgb(169, 169, 169);

@linux-scrollbar-thumb: rgba(255, 255, 255, 0.24);
@linux-scrollbar-thumb-inactive: rgba(255, 255, 255, 0.12);
::-webkit-scrollbar-thumb {
box-shadow: 0 0 0 12px rgb(49, 49, 49) inset;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:focus {
box-shadow: 0 0 0 12px rgb(89, 89, 89) inset;
}
::-webkit-scrollbar-thumb:active {
box-shadow: 0 0 0 12px rgb(169, 169, 169) inset;
}
}

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

/* Extra CSS */
::-webkit-scrollbar-thumb:window-inactive {
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12) inset;
}
}

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

// to make an I-cursor, use something like this:
border-left: 1px solid @content-color !important;
.CodeMirror, .CodeMirror-scroll {
background-color: @background;
color: @foreground;
}

.CodeMirror .CodeMirror-gutters {
// gutter border:
// border-right: 1px solid rgba(255, 255, 255, 0.03);
.CodeMirror-focused .CodeMirror-activeline-background {
background: #2f2f2f;
}
.show-line-padding .CodeMirror-focused .CodeMirror-activeline-background {
box-shadow: inset 15px 0 0 0 #000;
}

.CodeMirror-focused .CodeMirror-activeline .CodeMirror-gutter-elt {
color: @comment;
.CodeMirror-focused .CodeMirror-activeline {
.CodeMirror-gutter-elt {
background: #000;
color: #fff;
}
.inline-widget .CodeMirror-gutter-elt {
color: #767676;
}
}

#status-bar {
background: @status-bar-background-color;
border-top: 1px solid @status-bar-border;
color:@status-bar-text-color;
.cm-keyword, .cm-qualifier, .cm-builtin, .cm-tag, .cm-quote {color: #6c9ef8;}
.cm-atom, .cm-string, .cm-string-2, .cm-hr {color: #d89333;}
.cm-number, .cm-attribute, .cm-plus {color: #85a300;}
.cm-def, .cm-property {color: #b77fdb;}
.cm-variable, .cm-variable-2, .cm-variable-3, .cm-operator, .cm-meta, .cm-bracket {color: @foreground;}
.cm-comment {color: #767676;}
.cm-error, .cm-minus {color: #dc322f;}
.cm-header {color: #d85896;}
.cm-link {color: #b77fdb; text-decoration: none;}
.cm-rangeinfo {color: #6c71c4;}

/* Extra CSS */

.CodeMirror-cursor {
border-left: 1px solid #c5c8c6 !important;
}

#status-info {
color: @status-bar-text-color;
.CodeMirror-gutters {
background-color: @background;
border-right: none;
}

#status-file {
color: @status-bar-quiet-text-color;
.CodeMirror-focused .CodeMirror-activeline .CodeMirror-gutter-elt, .CodeMirror-linenumber {
color: #767676;
}

#status-indicators {
background: @status-bar-background-color;
color: @status-bar-text-color;
.CodeMirror .CodeMirror-selected {
background: #333f48;
}
.CodeMirror-focused .CodeMirror-selected {
background: #0050a0;
}

> div {
border-left: 1px solid @status-bar-border;
}
.CodeMirror-matchingbracket, .CodeMirror-matchingtag {
/* Ensure visibility against gray inline editor background */
background-color: #2e5c00;
color: @foreground !important;
}

/* Inline editor styling */

.related-container .selection:before {
border-top: 9px solid black;
border-bottom: 9px solid black;
}

.inline-widget .CodeMirror, .inline-widget .CodeMirror-gutters {
background: transparent;
}
25 changes: 1 addition & 24 deletions src/extensions/default/ThorLightTheme/main.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,27 +18,4 @@
// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
// DEALINGS IN THE SOFTWARE.

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

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

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

/*
* Brackets Default Theme
*
* Defines all the variables that one can configure in a theme. This should
* contain all variables / mixins for UI styling that we want to be able to
* change in a theme.
*
* Throughout the rest of the LESS files we should _only_ use color
* variable names that are on the LHS of the list below. So, if we
* need a new color for some UI element, we should add a variable
* in this file.
*/
// This is the default theme and doesn't need to do anything!
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if we need a newline here.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ha! Actually, it does require a newline. And that's the cause of #8481.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dangoor Should we file a (post-0.42) bug on the Themes code being so finicky about trailing newlines? I could see third-party theme authors being totally befuddled by this as well...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea. #8490 filed.