Update dark mode

Fixes https://github.com/TryGhost/Ghost/issues/8560

Depends on https://github.com/TryGhost/Ghost-Admin/pull/733

ghost/admin/app/styles/app-dark.css

@@ -69,6 +69,11 @@ body {
     color: #e5eff5;
 }
 
+pre {
+    border: color(var(--lightgrey) l(+5%));
+    background: var(--lightgrey);
+}
+
 input,
 .gh-input,
 .gh-select {
@@ -89,6 +94,12 @@ input,
     border-color: color(var(--lightgrey));
     background: color(var(--lightgrey));
 }
+
+.ember-power-select-dropdown {
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
+}
+
+.ember-power-select-dropdown,
 .ember-power-select-options:not([role="group"]),
 .ember-power-select-dropdown.ember-basic-dropdown-content--in-place {
     border-color: color(var(--lightgrey));
@@ -119,6 +130,23 @@ input,
     border: 0;
 }
 
+.gh-btn-link {
+    border: none;
+}
+
+.settings-menu-delete-button {
+    color: var(--red);
+}
+
+.gh-publishmenu-trigger {
+    color: var(--blue);
+    border: none;
+}
+
+.gh-publishmenu-trigger svg path {
+    stroke-width: 2px;
+}
+
 .dropdown-menu > li > a,
 .dropdown-menu > li > button {
     color: color(var(--lightgrey) lightness(+20%));
@@ -131,3 +159,93 @@ input,
 .gh-cardmenu {
     background: var(--lightgrey);
 }
+
+.editor-toolbar a.active, .editor-toolbar a:hover {
+    background-color: rgba(0,0,0,0.3);
+}
+
+.gh-badge-black,
+.gh-badge.owner {
+    color: var(--lightgrey);
+}
+
+.nav-list {
+    border-color: var(--lightgrey);
+    background: var(--lightgrey);
+}
+
+.selectize-input,
+.selectize-control.single .selectize-input.input-active {
+    background: var(--lightgrey);
+}
+
+.gh-select select {
+    color: var(--darkgrey);
+    background: var(--lightgrey);
+}
+
+.gh-date-time-picker-date,
+.gh-date-time-picker-time {
+    background: var(--lightgrey);
+}
+
+.gh-date-time-picker input {
+    color: var(--darkgrey);
+}
+
+.gh-publishmenu-dropdown {
+    background: #212A2E;
+}
+
+.gh-image-uploader {
+    background: var(--lightgrey);
+}
+
+.gh-main > section.gh-editor-fullscreen {
+    background: color(#212A2E l(+2%));
+}
+
+.dropdown-menu {
+    background: var(--lightgrey);
+}
+
+.dropdown-menu > li > a, .dropdown-menu > li > button {
+    color: var(--darkgrey);
+}
+
+.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-menu > li > button:hover, .dropdown-menu > li > button:focus {
+    color: #fff;
+}
+
+.dropdown-menu .divider {
+    opacity: 0.1;
+}
+
+.ember-power-select-group .ember-power-select-option .highlight {
+    background: rgba(0,0,0,0.5);
+}
+
+.modal-content {
+    background: #212A2E;
+}
+
+.seo-preview-title {
+    color: color(#1e0fbe l(+25%));
+}
+
+.seo-preview-description {
+    color: var(--midgrey);
+}
+
+.tour-dismiss {
+    border: none;
+    background: linear-gradient( rgb(50, 50, 50), rgb(23, 23, 23) );
+}
+
+.tour-dismiss span {
+    background: linear-gradient( rgb(69, 69, 69), rgb(42, 44, 45) 60%, rgb(42, 44, 45) 90%, rgb(49, 52, 53) );
+}
+
+.throbber:before {
+    background: rgba(0,0,0,0.2);
+}

ghost/admin/app/styles/components/power-select.css

@@ -2,6 +2,7 @@
     padding: 0 16px 0 8px;
     border: 1px solid #dfe1e3;
     border-radius: var(--border-radius);
+    background: transparent;
 }
 
 .ember-power-select-trigger svg {
@@ -11,6 +12,10 @@
     vertical-align: middle;
 }
 
+.ember-power-select-trigger svg path {
+    stroke: var(--darkgrey);
+}
+
 .ember-power-select-search {
     padding: 2px 0 3px 0 !important;
 }

ghost/admin/app/styles/layouts/editor.css

@@ -170,7 +170,6 @@
     height: 43px;
     padding: 0;
     padding-left: 15px;
-    background: #fff;
     border-bottom: var(--lightgrey) 1px solid;
     z-index: 100;
 }
@@ -298,7 +297,7 @@
 .gh-editor-footer .editor-toolbar {
     border: none;
     border-radius: 0;
-    background-color: #fff;
+    background: transparent;
     opacity: 1;
 }
 
@@ -314,6 +313,7 @@
 .gh-editor .CodeMirror {
     padding: 0;
     overflow: visible;
+    background: transparent;
 }
 
 /* fix visible scrollbars when OSX is set to show them */
@@ -336,6 +336,7 @@
     margin-left: auto;
     margin-right: auto;
     border: none;
+    background: transparent;
 }
 
 .gh-editor .CodeMirror pre {
@@ -423,10 +424,14 @@
     stroke: color(var(--darkgrey) l(+15%));
 }
 
+.editor-toolbar a {
+    color: var(--darkgrey) !important;
+}
+
 .editor-toolbar a.disabled,
 .gh-editor-preview .editor-toolbar a:not(.no-disable) {
     pointer-events: none;
-    color: lightgray !important;
+    color: var(--lightgrey) !important;
 }
 
 .editor-toolbar a.disabled:hover {

ghost/admin/app/styles/layouts/main.css

@@ -85,11 +85,11 @@ body > .ember-view:not(.default-liquid-destination) {
     width: 12px;
     height: 12px;
     transition: margin-top 0.2s ease;
-    fill: color(var(--darkgrey));
 }
 
 .gh-nav-menu svg path {
     stroke-width: 1px;
+    stroke: color(var(--darkgrey));
 }
 
 .gh-nav-menu-icon {
@@ -138,6 +138,7 @@ body > .ember-view:not(.default-liquid-destination) {
 
 .gh-nav-search .ember-power-select-trigger {
     outline: 0;
+    background: #fff;
 }
 
 .gh-nav-search-button {
@@ -554,7 +555,7 @@ body > .ember-view:not(.default-liquid-destination) {
     align-items: center;
     padding: 0 20px;
     height: 65px;
-    border-bottom: #dfe1e3 1px solid;
+    border-bottom: var(--lightgrey) 1px solid;
 }
 
 .view-title {

ghost/admin/app/styles/patterns/buttons.css

@@ -367,7 +367,7 @@ Usage: CTA buttons grouped together horizontally.
 }
 
 .gh-btn-link {
-    border: 0;
+    border: none;
 }
 
 

ghost/admin/app/styles/patterns/forms.css

@@ -182,7 +182,7 @@ textarea {
 .for-radio label p,
 .for-checkbox label p {
     overflow: auto;
-    color: #000;
+    color: var(--darkgrey);
     font-weight: normal;
 }
 

ghost/admin/app/styles/patterns/throbber.css

@@ -19,8 +19,7 @@
     display: block;
     width: 14px;
     height: 14px;
-    border: rgba(255,255,255,0.1) 2px solid;
-    background: rgba(255,255,255,0.6);
+    background: color(var(--blue) alpha(0.9));
     border-radius: 100%;
     box-shadow: color(var(--blue) alpha(0.9)) 0 0 0 2px;
 }

ghost/admin/app/templates/components/gh-post-settings-menu.hbs

@@ -116,7 +116,7 @@
             </div>
 
             {{#unless model.isNew}}
-                <button type="button" class="gh-btn gh-btn-link gh-btn-sm gh-btn-icon settings-menu-delete-button" {{action "deletePost"}}><span>{{inline-svg "trash"}} Delete Post</span></button>
+                <button type="button" class="gh-btn gh-btn-link gh-btn-icon settings-menu-delete-button" {{action "deletePost"}}><span>{{inline-svg "trash"}} Delete Post</span></button>
             {{/unless}}
 
             </form>