Skip to content

Commit

Permalink
Dark mode support (#102)
Browse files Browse the repository at this point in the history 
* dark mode, build to allow darkmode, styling and app style toggle

* darkmode tweaks

* border fixed

* spinner updates
  • Loading branch information
@draganescu
draganescu committed Mar 18, 2019
1 parent eb57d45 commit 9e45550
Show file tree
Hide file tree
Showing 10 changed files with 252 additions and 14 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@
"mac": {
"category": "public.app-category.developer-tools",
"icon": "assets/icon.png",
"darkModeSupport": true,
"extendInfo": {
"LSEnvironment": {
"PATH": "/usr/local/bin:/usr/bin:/bin"
Expand Down
88 changes: 88 additions & 0 deletions src/_colors.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
/**
* Colors
*/

// Hugo's new WordPress shades of gray, from http://codepen.io/hugobaeta/pen/grJjVp.
$black: #000;
$dark-gray-900: #191e23;
$dark-gray-800: #23282d;
$dark-gray-700: #32373c;
$dark-gray-600: #40464d;
$dark-gray-500: #555d66; // Use this most of the time for dark items.
$dark-gray-400: #606a73;
$dark-gray-300: #6c7781; // Lightest gray that can be used for AA text contrast.
$dark-gray-200: #7e8993;
$dark-gray-150: #8d96a0; // Lightest gray that can be used for AA non-text contrast.
$dark-gray-100: #8f98a1;
$light-gray-900: #a2aab2;
$light-gray-800: #b5bcc2;
$light-gray-700: #ccd0d4;
$light-gray-600: #d7dade;
$light-gray-500: #e2e4e7; // Good for "grayed" items and borders.
$light-gray-400: #e8eaeb; // Good for "readonly" input fields and special text selection.
$light-gray-300: #edeff0;
$light-gray-200: #f3f4f5;
$light-gray-100: #f8f9f9;
$white: #fff;

// Dark opacities, for use with light themes.
$dark-opacity-900: rgba(#000510, 0.9);
$dark-opacity-800: rgba(#00000a, 0.85);
$dark-opacity-700: rgba(#06060b, 0.8);
$dark-opacity-600: rgba(#000913, 0.75);
$dark-opacity-500: rgba(#0a1829, 0.7);
$dark-opacity-400: rgba(#0a1829, 0.65);
$dark-opacity-300: rgba(#0e1c2e, 0.62);
$dark-opacity-200: rgba(#162435, 0.55);
$dark-opacity-100: rgba(#223443, 0.5);
$dark-opacity-light-900: rgba(#304455, 0.45);
$dark-opacity-light-800: rgba(#425863, 0.4);
$dark-opacity-light-700: rgba(#667886, 0.35);
$dark-opacity-light-600: rgba(#7b86a2, 0.3);
$dark-opacity-light-500: rgba(#9197a2, 0.25);
$dark-opacity-light-400: rgba(#95959c, 0.2);
$dark-opacity-light-300: rgba(#829493, 0.15);
$dark-opacity-light-200: rgba(#8b8b96, 0.1);
$dark-opacity-light-100: rgba(#747474, 0.05);

// Light opacities, for use with dark themes.
$light-opacity-900: rgba($white, 1);
$light-opacity-800: rgba($white, 0.9);
$light-opacity-700: rgba($white, 0.85);
$light-opacity-600: rgba($white, 0.8);
$light-opacity-500: rgba($white, 0.75);
$light-opacity-400: rgba($white, 0.7);
$light-opacity-300: rgba($white, 0.65);
$light-opacity-200: rgba($white, 0.6);
$light-opacity-100: rgba($white, 0.55);
$light-opacity-light-900: rgba($white, 0.5);
$light-opacity-light-800: rgba($white, 0.45);
$light-opacity-light-700: rgba($white, 0.4);
$light-opacity-light-600: rgba($white, 0.35);
$light-opacity-light-500: rgba($white, 0.3);
$light-opacity-light-400: rgba($white, 0.25);
$light-opacity-light-300: rgba($white, 0.2);
$light-opacity-light-200: rgba($white, 0.15);
$light-opacity-light-100: rgba($white, 0.1);

// Additional colors.
// Some are from https://make.wordpress.org/design/handbook/foundations/colors/.
$blue-wordpress-700: #00669b;
$blue-dark-900: #0071a1;

$blue-medium-900: #006589;
$blue-medium-800: #00739c;
$blue-medium-700: #007fac;
$blue-medium-600: #008dbe;
$blue-medium-500: #00a0d2;
$blue-medium-400: #33b3db;
$blue-medium-300: #66c6e4;
$blue-medium-200: #bfe7f3;
$blue-medium-100: #e5f5fa;
$blue-medium-highlight: #b3e7fe;
$blue-medium-focus: #007cba;

// Alert colors.
$alert-yellow: #f0b849;
$alert-red: #d94f4f;
$alert-green: #4ab866;
18 changes: 17 additions & 1 deletion src/app/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,17 @@
@import "../_colors.scss";

.tray-pointer {
height: 0;
width: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #fff;

.theme-light & {
border-bottom: 8px solid $light-gray-100;
}
.theme-dark & {
border-bottom: 8px solid $dark-gray-400;
}
margin: 0 auto;
}

Expand All @@ -15,4 +23,12 @@ body.trayright .tray-pointer {
background-color: #fff;
color: #191e23;
height: 340px;
.theme-light & {
color: $dark-gray-700;
background-color: $light-gray-100;
}
.theme-dark & {
color: $light-gray-200;
background-color: $dark-gray-400;
}
}
11 changes: 11 additions & 0 deletions src/components/about-panel/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import "../../_colors.scss";

.about-panel {
padding: 0 15px 15px;
position: absolute;
Expand All @@ -6,4 +8,13 @@
&__repository-link.is-link {
font-size: 16px;
}

.components-button.is-link {
.theme-light & {
color: $blue-medium-500;
}
.theme-dark & {
color: $blue-medium-200;
}
}
}
59 changes: 55 additions & 4 deletions src/components/pages/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import "../../_colors.scss";

.pages {
height: 100%;
position: relative;
Expand All @@ -8,7 +10,14 @@
position: absolute;
left: 350px;
width: 350px;
background: #fff;
.theme-light & {
color: $dark-gray-700;
background-color: $light-gray-100;
}
.theme-dark & {
color: $light-gray-200;
background-color: $dark-gray-400;
}
}

&__page.page0,
Expand All @@ -30,16 +39,58 @@
&__page-header {
height: 35px;
padding: 10px;
color: #555d66;
border-bottom: 1px solid #ccc;
display: flex;
align-items: center;
.theme-light & {
color: $dark-gray-700;
border-bottom: 1px solid $dark-gray-400;
}
.theme-dark & {
color: $light-gray-200;
border-bottom: 1px solid $light-gray-100;
}
}

&__page-title-logo {
margin: 5px;
height: 25px;
fill: #555d66;
.theme-light & {
fill: $blue-wordpress-700;
}
.theme-dark & {
fill: $blue-medium-100;
}
}

.components-icon-button .dashicon {
.theme-light & {
fill: $blue-wordpress-700;
}
.theme-dark & {
fill: $blue-medium-100;
}
}

.components-icon-button:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover,
.components-icon-button:not(:disabled):not([aria-disabled="true"]):not(.is-default):active,
.components-icon-button:not(:disabled):not([aria-disabled="true"]):not(.is-default):focus {
.theme-light & {
color: $dark-gray-700;
background-color: $light-gray-200;
}
.theme-dark & {
color: $light-gray-200;
background-color: $dark-gray-700;
}
}

.components-button.is-link {
.theme-light & {
color: $blue-medium-500;
}
.theme-dark & {
color: $blue-medium-200;
}
}

&__page-title {
Expand Down
28 changes: 24 additions & 4 deletions src/components/preferences-panel/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,33 @@
@import "../../_colors.scss";

.preferences-panel {
&__directory-select > label,
&__input > label {
display: block;
margin: 10px 0;
color: #000;
.theme-light & {
color: $dark-gray-700;
}
.theme-dark & {
color: $light-gray-200;
}
}

&__directory-select > button {
border: none;
color: #377eb6;
text-decoration: underline;
cursor: pointer;
background: none;
display: block;
font-size: inherit;
margin: 10px 0;
padding: 0;
.theme-light & {
color: $dark-gray-700;
}
.theme-dark & {
color: $light-gray-200;
}
}

&__input--inline > label {
Expand All @@ -25,9 +37,17 @@

&__input > input {
padding: 5px 10px;
background-color: #f6f6f6;
border: 1px solid #e8e8e8;
border-radius: 3px;
.theme-light & {
color: $dark-gray-700;
background-color: $light-gray-100;
border: 1px solid $light-gray-100;
}
.theme-dark & {
color: $light-gray-200;
background-color: $dark-gray-400;
border: 1px solid $light-gray-200;
}
}

&__input--short > input {
Expand Down
11 changes: 11 additions & 0 deletions src/components/status-panel/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import "../../_colors.scss";

.status {
padding: 0 15px 15px;
position: absolute;
Expand All @@ -24,6 +26,14 @@
.components-spinner {
transform: scale(0.8);
background-color: currentColor;
&::before {
.theme-light & {
background-color: #fff;
}
.theme-dark & {
background-color: #000;
}
}
}

&-icon {
Expand All @@ -35,4 +45,5 @@
margin: 0 0.8ch 0 0;
}
}

}
26 changes: 22 additions & 4 deletions src/components/tabs/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
@import "../../_colors.scss";

.tabs {
&__headings {
padding: 20px 15px 10px;
border-bottom: 1px solid #ccc;
color: #82878c;
.theme-light & {
color: $dark-gray-700;
}
.theme-dark & {
color: $light-gray-200;
}
}

&__heading {
Expand All @@ -12,13 +19,24 @@
}

&__heading--active {
color: #000;
border-bottom: 3px solid #377eb6;
.theme-light & {
color: $blue-wordpress-700;
border-bottom: 1px solid $light-gray-100;
}
.theme-dark & {
color: $blue-medium-200;
border-bottom: 1px solid $dark-gray-400;
}
}

&__pages {
padding: 20px 15px;
color: #82878c;
.theme-light & {
color: $dark-gray-700;
}
.theme-dark & {
color: $light-gray-200;
}
}

&__page--active {
Expand Down
22 changes: 22 additions & 0 deletions src/electron-runner.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,28 @@ function createWindow() {
}
} );

if ( process.platform === 'darwin' ) {
const { systemPreferences } = electron;

const setSystemThemeClass = () => {
const currentTheme = systemPreferences.isDarkMode() ? 'dark' : 'light';
const oldTheme = systemPreferences.isDarkMode() ? 'light' : 'dark';
return `
document.body.classList.remove( 'theme-${ oldTheme }' );
document.body.classList.add( 'theme-${ currentTheme }' );
`;
};

window.webContents.executeJavaScript( setSystemThemeClass() );

systemPreferences.subscribeNotification(
'AppleInterfaceThemeChangedNotification',
() => {
window.webContents.executeJavaScript( setSystemThemeClass() );
}
);
}

window.on( 'closed', () => {
window = null;
} );
Expand Down
2 changes: 1 addition & 1 deletion src/index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import "../node_modules/@wordpress/components/build-style/style.css";

@import "./_colors.scss";
body {
margin: 0;
padding: 0;
Expand Down

0 comments on commit 9e45550

Please sign in to comment.