Merge pull request #57 from south-west-communities/te-add-dark-theme

Te add dark theme

_layouts/community-page.html

@@ -25,12 +25,9 @@ <h1 class="hero__title">{{ page.name }}</h1>
  </div>
 
  <div class="column event-org-logo-container">
- <a href="/communities/{{page.organiserAltName}}"
- title="View organiser">
  <img src="{{ site.url }}{{ site.baseurl }}/assets/img/communities/{{page.featured-img}}_thumb.jpeg"
  alt="{{page.name}} logo."
  class="event-org-logo">
- </a>
  </div>
  </div>
 

_sass/abstracts/_mixins.scss

@@ -25,4 +25,12 @@
  @media only screen and (min-width:#{$query}) {
  @content;
  }
-}
+}
+
+@mixin set-dark-color($values) {
+ @media (prefers-color-scheme: dark) {
+ @each $property, $value in $values {
+ #{$property}: $value;
+ }
+ }
+}

_sass/abstracts/_variables.scss

@@ -14,6 +14,30 @@ $button-dark: #222325;
 $grey: #343800;
 $brand-color: #996D9E;
 
+$hero-text-color-trans: rgba(255,255,255,0.9);
+$input-background-color: #fff;
+
+
+$dark-primary: #277cea !default;
+$dark-secondary: #ff6161 !default;
+$dark-border: #ededed !default;
+$dark-primary-light: #68a4f1;
+$dark-reverse: #3c3d41 !default;
+$dark-error: #ff6161 !default;
+
+$dark-bg-color: #121212 !default;
+$dark-bg-color-trans: rgba(18,18,18,0.9);
+$dark-light-bg-color: #000000;
+$dark-text-color: #ededed;
+$dark-link-color: $primary;
+$dark-button-dark: #ededed;
+$dark-grey: #e0dddd;
+$dark-brand-color: #996D9E;
+
+$dark-hero-text-color-trans: rgba(255,255,255,0.9);
+$dark-input-background-color: #3c3d41;
+
+
 $font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
 
 // Breakpoints

_sass/base/_base.scss

@@ -45,3 +45,6 @@ figure {
  clear: both;
  width: 100%;
 }
+img {
+ @include set-dark-color((opacity: 0.7));
+}

_sass/base/_typography.scss

@@ -7,11 +7,15 @@ body {
  color: $text-color;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
+
+ @include set-dark-color((background-color: $dark-bg-color, color: $dark-text-color, font-weight: 300));
 }
 
 ::selection {
  color: $bg-color;
  background-color: $reverse;
+
+ @include set-dark-color((background-color: $dark-text-color, color: $dark-bg-color));
 }
 
 // Reboot
@@ -31,6 +35,12 @@ h6 {
  margin-top: 0;
  margin-bottom: .5rem;
  width: 100%;
+
+ @include set-dark-color((color: $dark-text-color));
+}
+
+h2{
+ @include set-dark-color((font-weight: 500));
 }
 
 h2.resource-header:first-of-type() {
@@ -48,6 +58,8 @@ a {
  transition: border-bottom .2s linear;
  border-bottom: 1px dashed $link-color;
 
+ @include set-dark-color((color: $dark-link-color));
+
  &:active,
  &:focus {
  outline: 0;
@@ -58,11 +70,15 @@ a {
  color: $primary-light;
  transition: border-bottom .2s linear;
  border-bottom: 1px solid $primary-light;
+
+ @include set-dark-color((color: $dark-primary-light, border-bottom: 1px solid $dark-primary-light));
  }
 }
 
 hr {
  height: 1px;
  background: $border;
  border: 0;
+
+ @include set-dark-color((background: $dark-border));
 }

_sass/components/_btn.scss

@@ -14,12 +14,15 @@ input[type="button"] {
  white-space: nowrap;
  cursor: pointer;
  color: $bg-color;
+ transition: background-color 0.45s cubic-bezier(0.25, 1, 0.33, 1);
  background-color: $button-dark;
  text-align: center;
  border: 0;
  border-radius: 0;
  outline: 0;
 
+ @include set-dark-color((color: $dark-bg-color, background-color: $dark-button-dark, font-weight: 500));
+
  &::after {
  display: none;
  }
@@ -31,6 +34,8 @@ input[type="button"] {
  transition: background-color 0.45s cubic-bezier(0.25, 1, 0.33, 1);
  background-color: lighten($button-dark, 14%);
  outline: 0;
+
+ @include set-dark-color((color: darken($dark-bg-color, 20%), background-color: darken($dark-button-dark, 20%)));
  }
 }
 
@@ -56,6 +61,8 @@ button:disabled {
  &:hover,
  &:focus {
  background-color: $button-dark;
+
+ @include set-dark-color((background-color: $dark-button-dark));
  }
 }
 
@@ -91,26 +98,30 @@ select {
  box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
  border-radius: .5em;
  appearance: none;
- background-color: #fff;
+ background-color: $dark-text-color;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
- linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
+ linear-gradient(to bottom, $dark-text-color 0%, #e5e5e5 100%);
  background-repeat: no-repeat, repeat;
  background-position: right .7em top 50%, 0 0;
  background-size: .65em auto, 100%;
 }
+
 select::-ms-expand {
  display: none;
 }
+
 select:hover {
  border-color: #888;
 }
+
 select:focus {
  border-color: #aaa;
  box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
  box-shadow: 0 0 0 3px -moz-mac-focusring;
  color: #222;
  outline: none;
 }
+
 select option {
  font-weight:normal;
 }

_sass/components/_calendar.scss

@@ -12,6 +12,8 @@
  text-align: center;
  vertical-align: middle;
  line-height: 40px;
+
+ @include set-dark-color((background-color: $dark-bg-color-trans));
 }
 
 .filters {
@@ -35,4 +37,6 @@
  border-bottom: 5px solid $brand-color;
  padding-bottom: 13px;
  background-color: lighten($button-dark, 14%);
+
+ @include set-dark-color((color: darken($dark-bg-color, 20%), background-color: $dark-button-dark, border-bottom: 5px solid $dark-brand-color));
 }

_sass/components/_card.scss

@@ -11,6 +11,8 @@
  border-bottom: 0;
  transition: box-shadow .25s ease;
 
+ @include set-dark-color((background-color: $dark-bg-color));
+
  &:hover,
  &:focus {
  border-bottom: 0;
@@ -56,10 +58,14 @@
  color: $grey;
  border-bottom: 0;
 
+ @include set-dark-color((color: $dark-grey));
+
  &:focus,
  &:hover {
  color: $grey;
  border-bottom: 0;
+
+ @include set-dark-color((color: $dark-grey));
  }
  }
 
@@ -78,6 +84,8 @@
  position: relative;
  overflow: hidden;
 
+ @include set-dark-color((background: $dark-bg-color));
+
  &::after {
  content: "";
  display: block;

_sass/components/_form.scss

@@ -9,9 +9,13 @@ textarea {
  font-family: $font-stack;
  background: transparent;
 
+ @include set-dark-color((border-bottom: 2px solid $dark-border));
+
  &:focus {
  border-color: $primary;
  transition: border-color .25s;
+
+ @include set-dark-color((border-color: $dark-primary));
  }
 }
 
@@ -32,6 +36,8 @@ textarea {
  z-index: 5;
  transition: width .45s cubic-bezier(.694, .048, .335, 1);
  transition-delay: .1s;
+
+ @include set-dark-color((background: $dark-primary));
  }
 
  &::after {
@@ -44,6 +50,8 @@ textarea {
  background: $secondary;
  z-index: 4;
  transition: width .45s cubic-bezier(.694, .048, .335, 1);
+
+ @include set-dark-color((background: 2px solid $dark-secondary));
  }
 
  &:hover::after,
@@ -76,10 +84,13 @@ textarea {
 .error {
  input {
  border-bottom-color: $error;
+
+ @include set-dark-color((border-bottom-color: $dark-error));
  }
 
  textarea {
  border-bottom-color: $error;
+ @include set-dark-color((border-bottom-color: $dark-error));
  }
 }
 
@@ -89,4 +100,6 @@ textarea {
  position: absolute;
  left: 0;
  bottom: -21px;
+
+ @include set-dark-color((color: $dark-error));
 }

_sass/components/_label.scss

@@ -16,5 +16,7 @@
  color: $bg-color;
  background-color: $primary;
  border: 2px solid $primary;
+
+ @include set-dark-color((color: $dark-bg-color, background-color: $dark-primary, border: 2px solid $dark-primary));
  }
-}
+}

_sass/components/_table.scss

@@ -9,13 +9,19 @@ table {
  border-radius: 4px;
  font-size: 14.5px;
 
+ @include set-dark-color((border: 1px solid $dark-border));
+
  th {
  background-color: $light-bg-color;
+
+ @include set-dark-color((background-color: $dark-light-bg-color));
  }
 
  th,
  td {
  padding: 6px 13px;
  border: 1px solid $border;
+
+ @include set-dark-color((border: 1px solid $dark-border));
  }
 }

_sass/layout/_footer.scss

@@ -5,14 +5,20 @@ footer {
  font-size: 0.875rem;
  color: $grey;
 
+ @include set-dark-color((color: $dark-grey));
+
  a {
  color: $grey;
  border-bottom: 0;
 
+ @include set-dark-color((color: $dark-grey));
+
  &:hover,
  &:focus {
  color: $primary;
  border-bottom: 0;
+
+ @include set-dark-color((color: $dark-primary));
  }
  }
 }