Theming initial proposal

styles/abstracts/_theme.scss

@@ -0,0 +1,48 @@
+$themes: (
+ 'light-mode': (
+ 'white': #ffffff,
+ 'black': #000000,
+ 'text-color': #000000,
+ 'text-color-inverse': #ffffff,
+ 'k-accent': #ff7ac3,
+ 'k-accentlight': #ffe5f3,
+ 'k-accentlight2': #fff0f8,
+ 'k-green': #04af00,
+ 'k-red': #ff5757,
+ 'k-grey': #999999,
+ 'k-hovergrey': #6b6b6b,
+ 'k-blue': #6188e7,
+ 'k-shade': #cccccc,
+ 'primary-shadow': 4px 4px $black,
+ ),
+ 'dark-mode': (
+ 'white': #ffffff,
+ 'black': #000000,
+ 'text-color': #ffffff,
+ 'text-color-inverse': #000000,
+ 'k-accent': #191718,
+ 'k-accentlight': #ffe5f3,
+ 'k-accentlight2': #363234,
+ 'k-green': #04af00,
+ 'k-red': #ff5757,
+ 'k-grey': #999999,
+ 'k-hovergrey': #6b6b6b,
+ 'k-blue': #6188e7,
+ 'k-shade': #cccccc,
+ 'primary-shadow': 4px 4px $white,
+ ),
+);
+
+@mixin ktheme() {
+ @each $theme, $map in $themes {
+ $theme-map: $map !global;
+ .#{$theme} & {
+ @content;
+ }
+ }
+ $theme-map: null !global;
+}
+
+@function theme($key) {
+ @return map-get($theme-map, $key);
+}

styles/abstracts/_variables.scss

@@ -82,6 +82,7 @@ $footer-padding: 0;
 // navbar
 $navbar-item-img-max-height: 60px;
 $navbar-item-hover-color: $primary;
+$navbar-item-hover-background-color: transparent;
 
 // button
 $button-border-color: $primary;

styles/base/_reset.scss

@@ -1,6 +1,4 @@
-a {
- color: $lightpink;
-}
+
 
 pre {
  background-color: $black;

styles/components/_carousel.scss

@@ -4,37 +4,30 @@
  overflow: visible !important;
  }
 
- .carousel-info-collection-name {
- color: $k-grey;
- &:hover {
- color: $black;
- }
- }
 
  .carousel-item {
- background-color: white;
- color: black;
- border: 1px solid black;
- box-shadow: 4px 4px 0 0 rgba(255, 255, 255, 0);
+ @include ktheme() {
+ border: 1px solid theme('text-color');
+ &:hover {
+ box-shadow: theme('primary-shadow');
+ opacity: 1 !important;
+ animation: cardHoverIn 0.3s ease-in;
+ }
+ }
  transition: box-shadow 0.4s, opacity 0.4s;
  animation: cardHoverOut 0.3s ease-out;
-
- &:hover {
- box-shadow: var(--card-box-shadow);
- opacity: 1 !important;
- animation: cardHoverIn 0.3s ease-in;
- }
  }
 
  .carousel-media {
- border-bottom: 1px solid black;
-
  &-collection {
  border-bottom: none;
  padding: 16px 16px 0 16px;
 
  a {
- border: 1px solid black;
+ @include ktheme() {
+ border: 1px solid theme('text-color');
+ }
+
  display: block;
  }
  }
@@ -47,14 +40,10 @@
  text-overflow: ellipsis;
 
  &-name {
- color: black;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
- &:hover {
- color: $k-hovergrey;
- }
  }
 
  &-collection {
@@ -64,7 +53,9 @@
  }
 
  &-arrow {
- color: black;
+ @include ktheme() {
+ color: theme('text-color');
+ }
  font-family: 'Fira Code', monospace;
  }
  }
@@ -81,7 +72,9 @@
  }
 
  .chain-name {
- color: $k-grey;
+ @include ktheme() {
+ color: theme('k-grey');
+ }
  }
 
  .dots {
@@ -98,7 +91,6 @@
  border: none;
  width: 10px;
  height: 10px;
- background: #c5c5c5;
  margin: 0 12px;
  padding: 5px;
  cursor: pointer;
@@ -107,8 +99,11 @@
  outline: none;
  }
 
- &.active {
- background: #000;
+ @include ktheme() {
+ background: theme('k-shade');
+ &.active {
+ background: theme('k-grey');
+ }
  }
  }
 
@@ -129,8 +124,9 @@
 
  border-bottom: solid $side-y transparent;
  border-top: solid $side-y transparent;
- border-right: solid $side-x black;
-
+ @include ktheme() {
+ border-right: solid $side-x theme('black');
+ }
  &::after {
  content: '';
  width: 0;
@@ -139,7 +135,9 @@
  position: absolute;
  border-bottom: solid $side-y - 2 transparent;
  border-top: solid $side-y - 2 transparent;
- border-right: solid $side-x - 2 white;
+ @include ktheme() {
+ border-right: solid $side-x - 2 theme('white');
+ }
  top: -($side-y - 2);
  right: -($side-x - 1);
  transition-duration: 0.2s;
@@ -153,7 +151,10 @@
  position: absolute;
  border-bottom: solid $side-y transparent;
  border-top: solid $side-y transparent;
- border-right: solid $side-x black;
+ @include ktheme() {
+ border-right: solid $side-x theme('black');
+ }
+
  top: -($side-y - 6);
  right: -($side-x + 4);
  }
@@ -165,8 +166,9 @@
 
  border-bottom: solid $side-y transparent;
  border-top: solid $side-y transparent;
- border-left: solid $side-x black;
-
+ @include ktheme() {
+ border-left: solid $side-x theme('black');
+ }
  &::after {
  content: '';
  width: 0;
@@ -175,7 +177,9 @@
  position: absolute;
  border-bottom: solid $side-y - 2 transparent;
  border-top: solid $side-y - 2 transparent;
- border-left: solid $side-x - 2 white;
+ @include ktheme() {
+ border-left: solid $side-x - 2 theme('white');
+ }
  top: -($side-y - 2);
  left: -($side-x - 1);
  transition-duration: 0.2s;
@@ -189,19 +193,25 @@
  position: absolute;
  border-bottom: solid $side-y transparent;
  border-top: solid $side-y transparent;
- border-left: solid $side-x black;
+ @include ktheme() {
+ border-left: solid $side-x theme('black');
+ }
  top: -($side-y - 6);
  left: -($side-x - 4);
  }
  }
 
  &:hover {
  &.arrow-left::after {
- border-right: solid $side-x - 2 $k-accentlight;
+ @include ktheme() {
+ border-right: solid $side-x - 2 theme('k-accentlight');
+ }
  }
 
  &.arrow-right::after {
- border-left: solid $side-x - 2 $k-accentlight;
+ @include ktheme() {
+ border-left: solid $side-x - 2 theme('k-accentlight');
+ }
  }
  }
 
@@ -210,40 +220,3 @@
  }
  }
 }
-
-.dark-mode {
- .carousel-agnostic {
- .carousel-item {
- background-color: $dark-accent;
- border: 1px solid white;
- }
-
- .carousel-info-collection-name {
- &:hover {
- color: $white;
- }
- }
-
- .carousel-info {
- &-name {
- &:hover {
- color: $shade !important;
- }
- }
- }
-
- .carousel-info-name,
- .carousel-meta,
- .carousel-info-arrow {
- color: white;
- }
-
- .carousel-media-collection a {
- border: 1px solid white;
- }
-
- .dot.active {
- background-color: white;
- }
- }
-}

styles/components/_search.scss

@@ -50,18 +50,15 @@
  font-weight: 400;
  font-size: 20px;
  line-height: 23px;
- color: $grey;
  width: max-content;
  font-weight: 700;
- color: $white;
 
- &:hover {
- color: $k-hovergrey !important;
- }
  }
 
  .beta-text {
- color: $shade;
+ @include ktheme() {
+ color: theme('k-shade');
+ }
  font-weight: 400;
  }
 
@@ -251,8 +248,6 @@
  }
  }
  }
-
-
 }
 
 .section-search {

styles/global.scss

@@ -11,6 +11,17 @@ main {
 }
 
 body {
+ a {
+ @include ktheme() {
+ color: theme('text-color');
+ }
+ &:hover {
+ @include ktheme() {
+ color: theme('k-hovergrey');
+ }
+ }
+ }
+
  .select select,
  .select select option,
  .taginput .taginput-container.is-focusable,

styles/index.scss

@@ -3,6 +3,7 @@
 @import "abstracts/animations";
 @import "abstracts/mixins";
 @import "abstracts/fonts";
+@import "abstracts/theme";
 
 // FRAMEWORK (note: don't move this on top)
 @import "~bulma";

styles/layouts/_footer.scss

@@ -112,11 +112,6 @@
  grid-gap: 10px;
 
  &-item {
- a {
- &:hover {
- color: $k-hovergrey !important;
- }
- }
 
  &:first-child {
  padding-left: 0px;

styles/layouts/_main-navigation.scss

@@ -223,8 +223,13 @@
  color: $black;
  border-radius: 0 !important;
 
+ @include ktheme() {
+ color: theme('text-color');
+ }
  &:hover {
- color: $k-hovergrey;
+ @include ktheme() {
+ color: theme('k-hovergrey');
+ }
  background-color: inherit;
  }
  }

styles/themes/_dark.scss

@@ -274,11 +274,6 @@ html.dark-mode {
  }
  }
 
- .chain-option {
- &:hover {
- color: $shade !important;
- }
- }
 
  .modal-card-container {
  border: 1px solid white;