github/atom
1
1
Fork 0
mirror of https://github.com/atom/atom.git synced 2026-01-23 05:48:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

Change colors in dark ui to match pattern in light ui colors

Browse Source
This commit is contained in:
Ben Ogle
2013-08-15 13:23:14 -07:00
parent 2d12f08375
commit c2aefa7616
12 changed files with 73 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
themes/atom-dark-ui/archive-view.less
View File

@@ -1,7 +1,7 @@
@import "ui-colors";
.archive-view {
background-color: @background-color-4;
background-color: @background-color-2;
color: @text-color-subtle-1;
.selected {
@@ -10,11 +10,11 @@
}
.summary {
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
background-image: -webkit-linear-gradient(@highlight-background-color-2, @highlight-background-color-1);
border: 1px solid rgba(0, 0, 0, 0.5);
padding: 5px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 1px 0 @highlight-background-color-1,
inset 0 -1px 0 rgba(255, 255, 255, 0.02);
}
}

2
themes/atom-dark-ui/atom.less
View File

@@ -3,7 +3,7 @@
html, body,
#root-view {
font: caption;
background-color: @background-color-1;
background-color: @light-background-color-1;
}
#root-view #panes .row > * + * {

2
themes/atom-dark-ui/blurred.less
View File

@@ -2,7 +2,7 @@
.is-blurred {
.tree-view {
background-color: @background-color-3;
background-color: @background-color-1;
}
.tab {

22
themes/atom-dark-ui/command-panel.less
View File

@@ -2,24 +2,24 @@
@import "bootstrap/less/mixins.less";
.command-panel {
background-color: @background-color-4;
background-color: @background-color-2;
color: #dedede;
border-top: 1px solid rgba(0, 0, 0, 0.5);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
box-shadow: inset 0 1px 0 @highlight-background-color-1;
padding: 10px;
.btn {
.btn-pseudo-states(@background-color-6, @background-color-4);
.btn-pseudo-states(@dark-background-color-2, @background-color-2);
color: @text-color-4;
}
}
.command-panel .header {
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
background-image: -webkit-linear-gradient(@highlight-background-color-2, @highlight-background-color-1);
border: 1px solid rgba(0, 0, 0, 0.5);
padding: 5px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 1px 0 @highlight-background-color-1,
inset 0 -1px 0 rgba(255, 255, 255, 0.02);
margin-bottom: 0;
border-top-right-radius: 3px;
@@ -27,11 +27,11 @@
}
.command-panel .preview-list {
background-color: @background-color-6;
background-color: @dark-background-color-2;
color: #6d736f;
border: 1px solid rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(255, 255, 255, 0.05);
border-bottom: 1px solid @border-color-1;
border-right: 1px solid @border-color-1;
}
.command-panel .preview-count {
@@ -44,7 +44,7 @@
}
.command-panel .expand-collapse li {
background: -webkit-linear-gradient(@background-color-6, @background-color-4);
background: -webkit-linear-gradient(@dark-background-color-2, @background-color-2);
box-shadow:
inset -1px -1px 0 rgba(255, 255, 255, 0.1),
inset 1px 1px rgba(0, 0, 0, 0.1);
@@ -56,12 +56,12 @@
.command-panel .preview-list .path.selected .path-details,
.command-panel .preview-list li.operation.selected {
background-color: rgba(255, 255, 255, 0.05);
background-color: @highlight-background-color-1;
}
.command-panel .preview-list:focus .path.selected .path-details,
.command-panel .preview-list:focus li.operation.selected {
background-color: rgba(255, 255, 255, 0.05);
background-color: @highlight-background-color-1;
}
.command-panel .preview-list .path {

6
themes/atom-dark-ui/editor.less
View File

@@ -1,7 +1,9 @@
@import "ui-colors";
.editor.mini {
border: 1px solid rgba(0, 0, 0, 0.5);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(255, 255, 255, 0.05);
border-bottom: 1px solid @border-color-1;
border-right: 1px solid @border-color-1;
}
.editor .gutter.drop-shadow {

2
themes/atom-dark-ui/image-view.less
View File

@@ -1,7 +1,7 @@
@import "ui-colors";
.image-view {
background-color: @background-color-4;
background-color: @background-color-2;
img {
border-color: #c5c8c6;

2
themes/atom-dark-ui/overlay.less
View File

@@ -1,7 +1,7 @@
@import "ui-colors";
.overlay {
background: @background-color-3;
background: @background-color-1;
color: @text-color-2;
border: 1px solid @border-color-1;
}

10
themes/atom-dark-ui/select-list.less
View File

@@ -1,7 +1,7 @@
@import "ui-colors";
.select-list {
background: @background-color-3;
background: @background-color-1;
.error {
color: white;
@@ -9,15 +9,15 @@
}
.loading {
color: #ccc;
color: @text-color-3;
}
ol {
border: 1px solid #222;
li {
background-color: @background-color-2;
border-bottom: 1px solid #1e1e1e;
background-color: @background-color-3;
border-bottom: 1px solid @border-color-3;
color: @text-color-2;
}
@@ -25,7 +25,7 @@
background: -webkit-linear-gradient(
rgba(100, 100, 100, 0.5),
rgba(70,70,70, 0.5));
color: #ccc;
color: @text-color-3;
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.1);
display: inline-block;
line-height: 100%;

6
themes/atom-dark-ui/status-bar.less
View File

@@ -1,15 +1,15 @@
@import "ui-colors";
.status-bar {
background-color: @background-color-4;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
background-color: @background-color-2;
box-shadow: inset 0 1px 0 @highlight-background-color-1;
border-top: 1px solid rgba(0, 0, 0, 0.8);
color: @text-color-4;
}
.status-bar .grammar-name:hover {
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.2);
border: 1px solid @highlight-background-color-1;
border-radius: 2px;
}

6
themes/atom-dark-ui/tabs.less
View File

@@ -9,12 +9,12 @@
.tab {
margin: 0 0 1px 1px;
background-image: -webkit-linear-gradient(#292c2f, @background-color-4);
background-image: -webkit-linear-gradient(#292c2f, @background-color-2);
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, 0.1),
inset 0 1px 0 rgba(0, 0, 0, 1),
inset 1px 0 0 rgba(255, 255, 255, 0.05),
inset -1px 0 0 rgba(255, 255, 255, 0.05);
inset 1px 0 0 @highlight-background-color-1,
inset -1px 0 0 @highlight-background-color-1;
color: #b9bdc1;
}

10
themes/atom-dark-ui/tree-view.less
View File

@@ -4,7 +4,7 @@
border-right: 1px solid @border-color-2;
}
.tree-view {
background: @background-color-4;
background: @background-color-2;
box-shadow:
1px 0 0 #131516,
inset -1px 0 0 rgba(255, 255, 255, 0.02),
@@ -22,11 +22,13 @@
}
.tree-view .selected > .highlight {
background-image: -webkit-linear-gradient(#4e4e4e, #434343);
background-color: transparent;
background-image: -webkit-linear-gradient(@highlight-background-color-2, fadeout(@highlight-background-color-2, 3%));
}
.tree-view:focus .selected > .highlight {
background-image: -webkit-linear-gradient(#7d7d7d, @highlight-background-color-1);
background-color: @highlight-background-color-3;
background-image: -webkit-linear-gradient(@highlight-background-color-3, fadeout(@highlight-background-color-3, 3%));
}
.tree-view:focus .directory.selected > .header > .name,
@@ -69,7 +71,7 @@
}
.tree-view-dialog {
background-color: @background-color-1;
background-color: @light-background-color-1;
border-top: 1px solid #555;
-webkit-box-shadow: 0 0 3px 3px rgba(0, 0, 0, .5);
}

47
themes/atom-dark-ui/ui-colors.less
View File

@@ -2,33 +2,54 @@
@text-color-1: #fff;
@text-color-2: #eee;
@text-color-3: #bbb;
@text-color-4: #969696;
// For opposite color scheme things. Like a bright background with text.
@text-alt-color-1: #333;
@text-alt-color-2: #333;
@text-alt-color-3: #333;
// Number increase is more subtle
@text-color-subtle-1: #777;
@text-color-subtle-2: #555;
@text-color-subtle-3: #333;
// Darker as they increase
@background-color-1: #333;
@background-color-2: #27292b;
@background-color-3: #202123;
@background-color-4: #1d1f21; // maybe unnecessary from 3 on.
@background-color-5: #1b1c1e;
@background-color-6: #19191a;
// Main color, then darker and lighter.
@background-color-1: #202123;
@background-color-2: #1d1f21;
@background-color-3: #27292b;
// Main color, darker, lighter.
// Supposed to match up with the background color indices
@highlight-background-color-1: #737373;
@highlight-background-color-2: #373A3c;
@highlight-background-color-1: rgba(255, 255, 255, 0.05);
@highlight-background-color-2: rgba(255, 255, 255, 0.1);
@highlight-background-color-3: rgba(255, 255, 255, 0.2);
// These could match up to the background colors as well.
// These match up to the background colors as well.
@border-color-1: rgba(255, 255, 255, 0.05);
@border-color-2: #19191a;
@border-color-3: #1e1e1e;
// Info colors are generally blue
@accent-color-info-1: #5293d8;
@accent-color-info-2: #66a6ff;
@accent-color-info-3: #0098ff;
@accent-color-info-2: #66a6ff;
// Error colors are generally red
// Error colors are generally red/orange
@accent-color-error-1: #f78a46;
@accent-color-error-2: #ff4800;
@accent-color-error-3: #ffa275;
// Bright color, darker then lighter.
// Success colors are generally green
@accent-color-success-1: #1fe977;
@accent-color-success-2: #17ca65;
@accent-color-success-3: #58f79d;
// Colors not standard for themes.
@light-background-color-1: #333;
@dark-background-color-1: #1b1c1e;
@dark-background-color-2: #19191a;
@text-color-4: #969696;