Merge pull request #29 from csalmeida/dark-mode

Theme template extension - dark mode

2 files changed, 408 insertions, 6 deletions

diff --git a/templates/@theme-base/_full.scss b/templates/@theme-base/_full.scss
new file mode 100644
index 0000000..1e6b7e1
--- /dev/null
+++ b/templates/@theme-base/_full.scss
@@ -0,0 +1,340 @@
+// Applies theme styles across as many areas of the layout as possible.
+
+// Message items
+.conversation {
+  border-color: lighten($base, 10%);
+}
+
+.main-area,
+.main-area--noHeader, 
+.main-area--withToolbar,
+.main-area--withToolbar--noHeader,
+[class*="block-info-"] {
+  color: $text_color;
+}
+
+.fill-global-grey {
+  fill: $highlight;
+}
+
+.starbutton {
+  fill: $extra_color;
+}
+
+// Read message
+.bg-global-light, kbd {
+  background: $base;
+}
+
+// Unread, not active
+.conversation.item-container:not(.item-contact):not(.read):not(.active) {
+  background: lighten($base, 5%);
+}
+
+// Active
+.item-container.active, .item-is-selected {
+  background: darken($base, 2%);
+  .flex-item-fluid {
+    color: $highlight;
+  }
+}
+
+// Selected message checkbox
+.item-icon {
+  background-color: $base;
+  border: 1px solid darken($text_color, 5%);
+}
+
+.selectBoxElement-container:hover .item-icon {
+  background-color: $base;
+  border: 1px solid darken($highlight, 5%);
+
+  .item-icon-fakecheck-icon {
+    fill: darken($highlight, 5%);
+  }
+}
+
+.selectBoxElement-container {
+  color: $text_color;
+}
+
+.selectBoxElement-container:hover .item-checkbox:checked + .item-icon {
+  background-color: darken($highlight, 5%);
+  border-color: darken($highlight, 5%);
+}
+
+// Message list background area
+.items-column-list {
+  background-color: $base;
+}
+
+// Current message panel
+.message-header {
+  background-color: lighten($base, 5%);
+}
+
+.view-column-detail {
+  background-color: $base;
+}
+
+details:first-child {
+  border-color: lighten($base, 10%);
+}
+
+.items-column-list,
+.message-container, 
+.message-attachments {
+  border-color: lighten($base, 10%);
+}
+
+.message-container:not(.sent):not(.draft) .message-header.message-summary::before, 
+.message-header.is-inbound::before {
+  border-top: 1px solid lighten($base, 10%);
+  border-left: 1px solid lighten($base, 10%);
+  background-color: lighten($base, 5%);
+}
+
+// Mailing list block
+.bg-white {
+  background-color: $base;
+}
+
+.bordered, .bordered-container, .breadcrumb-container {
+  border-color: lighten($base, 10%);
+}
+
+.email.message-body-container {
+  [bgcolor], [style*="background"] {
+    background-color: transparent !important;
+    div, p, 
+    h1, h2, h3,
+    h4, h5, h6 {
+      color: $text_color !important;
+    }
+  }
+}
+
+// Attachment button
+.pm-button, .pm-button--info, .pm-button--redborder {
+  background: $base;
+  border-color: lighten($base, 10%);
+  color: $text_color;
+}
+
+.message-attachmentInfo {
+  border-color: lighten($base, 10%);
+}
+
+.is-hover.pm-button--info, .is-hover.pm-button--redborder,
+.pm-button--info:focus, .pm-button--info:focus-within,
+.pm-button--info:hover, .pm-button--redborder:focus,
+.pm-button--redborder:focus-within, .pm-button--redborder:hover,
+.pm-button.is-hover, .pm-button:focus, 
+.pm-button:focus-within, .pm-button:hover:not(.pm-button--primary) {
+  color: $highlight;
+}
+
+.is-disabled.pm-button--info,
+.is-disabled.pm-button--redborder,
+.pm-button--info[disabled],
+.pm-button--redborder[disabled],
+.pm-button.is-disabled,
+.pm-button[disabled] {
+  background: lighten($base, 10%);
+}
+
+.is-active.pm-button--info,
+.is-active.pm-button--redborder,
+.pm-button--info:not(div):active,
+.pm-button--redborder:not(div):active,
+.pm-button.is-active, .pm-button:not(div):active {
+  background: lighten($base, 10%);
+  color: $highlight;
+}
+
+// Dropdowns
+.dropDown-content {
+  background: $base;
+  color: $text_color;
+
+  button {
+    color: $text_color;
+  }
+
+  .elementsSelector-btn-action,
+  .dropDown-item:hover {
+    color: $text_color;
+  }
+
+  .dropDown-item:hover {
+    background: lighten($base, 5%) !important;
+  }
+
+  .dropDown-item + .dropDown-item {
+    border-top: 1px solid lighten($base, 10%);
+  }
+
+  .dropDown-item {
+    .color-global-grey {
+      color: $text_color;
+    }
+  }
+}
+
+.dropDown {
+  .dropDown-content {
+    &::before, &::after {
+      border-bottom-color: $base;
+    }
+  }
+}
+
+.dropDown--right-bottom {
+  &::before {
+    border-right-color: $base;
+  }
+
+  .dropDown-content {
+    &::before, &::after {
+      background: $base;
+    }
+  }
+}
+
+.dropDown--bottom-right {
+  .dropDown-content {
+    &::before, &::after {
+      background: $base;
+    }
+  }
+}
+
+.dropDown--bottom-left::before, 
+.dropDown--bottom-right::before, 
+.dropDown--bottom::before {
+  border-bottom-color: lighten($base, 10%);
+}
+
+.dropDown--bottom-right {
+  border: 1px solid lighten($base, 10%);
+}
+
+.pm-field-icon-container[type="search"], .pm-field[type="search"] {
+  background-color: lighten($base, 5%);
+}
+
+.dropDown-contentInner {
+  background-color: $base;
+
+  &::before, &::after {
+    background-color: $base;
+  }
+
+  .dropDown-item span {
+    color: $text_color !important;
+  }
+}
+
+.searchbox-field[type="search"]:not(#global_search) {
+  background: $text_color;
+  color: $base;
+}
+
+// Links
+.link, a, .pm-button--link {
+  color: $highlight;
+}
+
+.link:active, .link:focus, .link:hover, 
+a:active, a:focus, a:hover,
+.pm-button--link:hover {
+  color: lighten($highlight, 5%);
+}
+
+// Modal
+.pm-modal, .pm-modalContentInner {
+  background-color: $base;
+  color: $text_color;
+
+  &::before, &::after {
+    background-color: $base;
+  }
+  
+  .labelColorSelector-item-mask {
+    border: 2px solid lighten($base, 15%);
+  }
+}
+
+.pm-button--primaryborder, .pm-button-blueborder {
+  border-color: $highlight;
+  color: $highlight;
+  background-color: lighten($base, 5%);
+  transition: background-color .2s ease-in-out;
+}
+
+.is-hover.pm-button--primaryborder, .pm-button--primaryborder:focus,
+.pm-button--primaryborder:focus-within, .pm-button--primaryborder:hover,
+.pm-button-blueborder.is-hover, .pm-button-blueborder:focus,
+.pm-button-blueborder:focus-within, .pm-button-blueborder:hover {
+  border-color: $highlight;
+  color: $highlight;
+  background-color: darken($base, 1%);
+}
+
+// Input fields
+.pm-field, .pm-field-icon-container,
+.focus.pm-field-icon-container, .pm-field-icon-container:focus,
+.pm-field-icon-container:focus-within, .pm-field.focus,
+.pm-field:focus, .pm-field:focus-within {
+  color: $text_color;
+  background-color: lighten($base, 5%);
+
+  &::placeholder {
+    color: darken($text_color, 5%);
+  }
+}
+
+select.pm-field, select.pm-field-icon-container {
+  background-color: lighten($base, 5%);
+  color: $text_color;
+}
+
+// Storage progress modal
+.storageProgress-content.dropDown-content--rightbottom {
+  &::before {
+    border-right-color: $base;
+  }
+}
+
+// Settings panel
+.main-area, .main-area-content {
+  background-color: $base;
+
+  .p1 {
+    background-color: lighten($base, 5%);
+  }
+}
+
+.subnav {
+  .link, a {
+    color: $highlight;
+  }
+  
+  .link:active, .link:focus, .link:hover, a:active, a:focus, a:hover {
+    color: lighten($highlight, 5%);
+  }
+}
+
+// Toggle button
+.pm-toggle-label {
+  border-color: lighten($base, 10%);
+  background: lighten($base, 5%);
+
+  &::before {
+    background: $base;
+  }
+
+  .pm-toggle-label-img {
+    fill: $text_color;
+  }
+}
diff --git a/templates/@theme-base/_styles.scss b/templates/@theme-base/_styles.scss
index 8292211..39aec8f 100644
--- a/templates/@theme-base/_styles.scss
+++ b/templates/@theme-base/_styles.scss
@@ -46,13 +46,17 @@ $boxshadow-main: none;
 }
 
 // Storage indicator
-.storageProgress-container {
-  .circle-chart__circle {
-    stroke: $highlight;
-  }
+
+.circle-chart__circle {
+  stroke: $highlight;
 }
 
 // Top navigation
+#global_search.searchbox-field[type="search"] {
+  background-color: $search;
+  color: $text_color;
+}
+
 .topnav-link, .topnav-link > .topnav-icon {
   color: $navigation;
   transition: color .2s ease-in-out;
@@ -74,6 +78,10 @@ $boxshadow-main: none;
     background: $highlight;
   }
 
+  &.item-container.active, &.item-is-selected {
+    background: rgba($highlight, 0.1);
+  }
+
   .item-checkbox:checked + .item-icon {
     background-color: $highlight;
     border-color: $highlight;
@@ -86,6 +94,25 @@ $boxshadow-main: none;
   .item-checkbox:checked + .item-icon:hover .item-icon-fakecheck-icon {
     fill: $navigation;
   }
+
+  .selectBoxElement-container:hover .item-icon {
+    // background-color: transparent;
+    border: 1px solid darken($highlight, 5%);
+
+    .item-icon-fakecheck-icon {
+      fill: darken($highlight, 5%);
+    }
+  }
+}
+
+// Star icon
+.starbutton {
+  fill: $highlight !important;
+  opacity: 0.7;
+}
+
+.starbutton:focus, .starbutton:hover {
+  fill: $highlight;
 }
 
 // Highlighted text (seen when multiple messages are selected)
@@ -112,12 +139,14 @@ $boxshadow-main: none;
 }
 
 // Links across the site:
-.link, a {
+.link, a, .pm-button--link {
   color: $base;
   transition: color .2s ease-in-out;
 }
 
-.link:active, .link:focus, .link:hover, a:active, a:focus, a:hover {
+.link:active, .link:focus, .link:hover, 
+a:active, a:focus, a:hover,
+.pm-button--link:hover {
   color: darken($highlight, 10%);
 }
 
@@ -125,4 +154,37 @@ $boxshadow-main: none;
 .pm-toggle-checkbox:checked+.pm-toggle-label:before {
   background: $highlight;
   border-color: $highlight;
+}
+
+// Message panel
+
+// Attachment icon
+.fill-pm-blue,
+.message-attachmentIcon .file-outer-icon.is-embedded {
+  fill: $highlight;
+}
+
+// Subscription plans
+.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2) {
+  border-color: $highlight;
+  color: $highlight;
+
+  &::before {
+    background-color: $highlight;
+  }
+}
+
+.pm-table--highlight[data-plan-number="1"] tr td:nth-child(2), 
+.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2),
+.pm-table--highlight[data-plan-number="1"] tr:last-child td:nth-child(2) {
+  border-color: $highlight;
+}
+
+// Contacts
+.progress-contact {
+  color: $highlight;
+
+  &::-moz-progress-bar {
+    background: $highlight;
+  }
 }
\ No newline at end of file