Add dark mode styling

website/announcements/static/announcements/css/style.scss

 #announcements-alerts {
     .announcement {
         background: $preset;
-        color: $white;
+        color: $preset-contrast;
         text-align: center;
         padding: 0.5rem 1rem;
         position: relative;
 
         .close {
-            color: $white;
+            color: $preset-contrast;
         }
 
         p {
             display: inline;
             margin-left: 0.5rem;
-            color: $white;
+            color: $preset-contrast;
             font-size: 0.9rem;
             font-weight: $bold;
         }
 
         a {
-            color: $white;
+            color: $preset-contrast;
             text-decoration: underline;
         }
 
         a:hover {
-            color: $light-grey;
+            color: $preset-contrast-hover;
         }
 
         button {

website/events/api/serializers.py

@@ -32,8 +32,7 @@ class CalenderJSSerializer(serializers.ModelSerializer):
             "url",
             "title",
             "description",
-            "backgroundColor",
-            "textColor",
+            "classNames",
             "blank",
         )
 
@@ -44,8 +43,7 @@ class CalenderJSSerializer(serializers.ModelSerializer):
     url = serializers.SerializerMethodField("_url")
     title = serializers.SerializerMethodField("_title")
     description = serializers.SerializerMethodField("_description")
-    backgroundColor = serializers.SerializerMethodField("_background_color")
-    textColor = serializers.SerializerMethodField("_text_color")
+    classNames = serializers.SerializerMethodField("_class_names")
     blank = serializers.SerializerMethodField("_target_blank")
 
     def _start(self, instance):
@@ -69,10 +67,7 @@ class CalenderJSSerializer(serializers.ModelSerializer):
     def _description(self, instance):
         return unescape(strip_tags(instance.description))
 
-    def _background_color(self, instance):
-        pass
-
-    def _text_color(self, instance):
+    def _class_names(self, instance):
         pass
 
     def _target_blank(self, instance):
@@ -86,31 +81,23 @@ class EventCalenderJSSerializer(CalenderJSSerializer):
     def _url(self, instance):
         return reverse("events:event", kwargs={"pk": instance.id})
 
-    def _background_color(self, instance):
-        try:
-            if services.is_user_registered(self.context["member"], instance):
-                return "#E62272"
-        except AttributeError:
-            pass
-        return "#616161"
-
-    def _text_color(self, instance):
-        return "#FFFFFF"
+    def _class_names(self, instance):
+        class_names = ["regular-event"]
+        if services.is_user_registered(self.context["member"], instance):
+            class_names.append("has-registration")
+        return class_names
 
 
 class UnpublishedEventSerializer(CalenderJSSerializer):
     """
-    See CalenderJSSerializer, customised colors
+    See CalenderJSSerializer, customised classes
     """
 
     class Meta(CalenderJSSerializer.Meta):
         model = Event
 
-    def _background_color(self, instance):
-        return "rgba(255,0,0,0.3)"
-
-    def _text_color(self, instance):
-        return "black"
+    def _class_names(self, instance):
+        return ["unpublished-event"]
 
     def _url(self, instance):
         return reverse("admin:events_event_details", kwargs={"pk": instance.id})

website/events/static/events/css/admin.scss

@@ -49,11 +49,11 @@
         }
 
         select[name=payment] {
-            background: $danger;
+            background: $red;
             color: white;
 
             &.paid {
-                background: $success;
+                background: $green;
             }
 
             @media(max-width: 767px) {

website/events/static/events/css/style.scss

@@ -9,7 +9,7 @@
         height: calc(100% - 15px);
 
         &:hover {
-            background-color: $grey;
+            background-color: $card-background-hover;
         }
 
         .card-date {
@@ -30,7 +30,7 @@
             }
 
             .no-registration {
-                background-color: $dark-grey;
+                background-color: $grey;
             }
 
             .has-registration {
@@ -42,11 +42,11 @@
 
 #events-index {
     .fc-bootstrap .fc-today {
-        background: #fff9fc;
+        background: $background-shade-light;
     }
 
     .fc-now-indicator {
-        border-color: $dark-grey;
+        border-color: $preset;
 
         &.fc-now-indicator-arrow {
             border-top-color: transparent;
@@ -68,21 +68,70 @@
                 border-radius: 20px;
                 margin-right: 1rem;
                 flex-shrink: 0;
+
+                &.regular-event {
+                    background-color: $grey;
+                    &.has-registration {
+                        background-color: $preset;
+                    }
+                }
+
+                &.unpublished-event, &.unpublished-event:active, &.unpublished-event:hover {
+                    background-color: rgba(255, 0, 0, 0.3);
+                }
+
+                &.partner-event {
+                    background-color: $secondary;
+                }
+
+                &.birthday-event {
+                    background-color: $secondary;
+                    &.honorary {
+                        background-color: $preset;
+                    }
+                }
             }
         }
     }
 
-    .fc-event-dot {
-        background-color: #616161;
-    }
-
     .fc-event {
-        background-color: #616161;
+        color: $white;
+        background-color: $grey;
         border-radius: 0;
         border: none;
         overflow: hidden;
         transition-property: opacity;
 
+        &.regular-event {
+            &.has-registration {
+                background-color: $preset;
+                color: $white;
+            }
+        }
+
+        &.unpublished-event, &.unpublished-event:active, &.unpublished-event:hover {
+            background-color: rgba(255, 0, 0, 0.3);
+            color: $secondary;
+        }
+
+        &.partner-event {
+            color: $preset;
+            background-color: $secondary;
+
+            &:active, &:hover {
+                color: $preset;
+            }
+        }
+
+        &.birthday-event {
+            background-color: $secondary;
+            color: $secondary-contrast;
+            &.honorary {
+                background-color: $preset;
+                color: $secondary;
+            }
+        }
+
         .fc-content {
             padding: 5px;
 
@@ -100,8 +149,6 @@
             .fc-content {
                 opacity: 0.8;
             }
-
-            color: $white;
         }
     }
 }

website/events/static/events/js/listview.js

@@ -47,7 +47,7 @@ class ListView extends FullCalendar.View {
 
             const eventIndicator = document.createElement('div');
             eventIndicator.classList.add('event-indication');
-            eventIndicator.style = 'background-color: ' + def.ui.backgroundColor;
+            eventIndicator.classList.add(def.ui.classNames);
 
             const cardHead = document.createElement('div');
             cardHead.classList.add('card-header', 'collapsed');

website/members/api/serializers.py

@@ -39,14 +39,12 @@ class MemberBirthdaySerializer(CalenderJSSerializer):
             return membership.get_type_display()
         return ""
 
-    def _background_color(self, instance):
+    def _class_names(self, instance):
+        class_names = ["birthday-event"]
         membership = instance.current_membership
         if membership and membership.type == "honorary":
-            return "#E62272"
-        return "black"
-
-    def _text_color(self, instance):
-        return "white"
+            class_names.append("honorary")
+        return class_names
 
 
 class ProfileRetrieveSerializer(serializers.ModelSerializer):

website/partners/api/serializers.py

@@ -20,13 +20,9 @@ class PartnerEventCalendarJSSerializer(CalenderJSSerializer):
             return "{} ({})".format(instance.title, instance.partner.name)
         return "{} ({})".format(instance.title, instance.other_partner)
 
-    def _background_color(self, instance):
+    def _class_names(self, instance):
         """Return the color of the background."""
-        return "black"
-
-    def _text_color(self, instance):
-        """Return the color of the text."""
-        return "#E62272"
+        return ["partner-event"]
 
     def _url(self, instance):
         """Return the url of the partner event."""

website/partners/static/partners/css/style.scss

 #partner-banners {
-    background-color: $grey;
+    background-color: $banner-background;
     height: 140px;
     overflow: hidden;
 
@@ -95,7 +95,7 @@
                 flex-direction: column;
                 justify-content: center;
 
-                background-color: $grey;
+                background-color: $banner-background;
 
                 img {
                     width: auto;

website/payments/static/payments/css/style.scss

@@ -9,6 +9,7 @@
 
     #id_signature_canvas {
         height: 10rem;
+        background-color: #ffffff;
     }
 
     #canvas-container {
@@ -19,7 +20,7 @@
             height: 2rem;
             width: 2rem;
             top: 0.25rem;
-            color: $black;
+            color: #000000;
 
             display: inline-block;
             font-weight: 400;

website/pizzas/static/pizzas/css/admin.scss

@@ -63,11 +63,11 @@
 }
 
 select[name=payment] {
-    background: $danger;
+    background: $red;
     color: white;
 
     &.paid {
-        background: $success;
+        background: $green;
     }
 
     @media(max-width: 767px) {

website/pizzas/static/pizzas/css/style.scss

@@ -7,19 +7,19 @@
     h1 {
         font-size: 2rem;
         text-align: center;
-        color: $white;
     }
 
     h2 {
         text-align: center;
-        color: $white;
     }
 
     &.paid {
         background-color: $success;
+        color: $success-contrast;
     }
 
     &.unpaid {
         background-color: $danger;
+        color: $danger-contrast;
     }
 }

website/registrations/static/registrations/css/style.scss

@@ -3,7 +3,7 @@
         label::after {
             content: '*';
             margin-left: 2px;
-            color: $dark-grey;
+            color: $text-color;
         }
     }
 }

website/thaliawebsite/static/css/_alerts.scss

@@ -4,7 +4,7 @@
 }
 
 .alert-success {
-    color: $white;
+    color: $success-contrast;
     background-color: $success;
     border-color: $success-hover;
 }
@@ -14,7 +14,7 @@
 }
 
 .alert-info {
-    color: $white;
+    color: $info-contrast;
     background-color: $info;
     border-color: $info-hover;
 }
@@ -24,7 +24,7 @@
 }
 
 .alert-warning {
-    color: $white;
+    color: $warning-contrast;
     background-color: $warning;
     border-color: $warning-hover;
 }
@@ -34,7 +34,7 @@
 }
 
 .alert-danger, .alert-error {
-    color: $white;
+    color: $danger-contrast;
     background-color: $danger;
     border-color: $danger-hover;
 }

website/thaliawebsite/static/css/_buttons.scss

@@ -39,7 +39,7 @@
 .btn-primary, .btn-primary:active, .btn-primary:focus {
     background: $preset !important;
     border-color: $preset !important;
-    color: $white !important;
+    color: $preset-contrast !important;
 
     &:hover, &.active {
         background: $preset-hover !important;
@@ -50,7 +50,7 @@
 .btn-secondary, .btn-secondary:active, .btn-secondary:focus {
     background: $secondary !important;
     border-color: $secondary !important;
-    color: $white !important;
+    color: $secondary-contrast !important;
 
     &:hover {
         background: $secondary-hover !important;
@@ -61,7 +61,7 @@
 .btn-success, .btn-success:active, .btn-success:focus {
     background: $success !important;
     border-color: $success !important;
-    color: $white !important;
+    color: $success-contrast !important;
 
     &:hover {
         background: $success-hover !important;
@@ -72,7 +72,7 @@
 .btn-info, .btn-info:active, .btn-info:focus {
     background: $info !important;
     border-color: $info !important;
-    color: $white !important;
+    color: $info-contrast !important;
 
     &:hover {
         background: $info-hover !important;
@@ -83,7 +83,7 @@
 .btn-warning, .btn-warning:active, .btn-warning:focus {
     background: $warning !important;
     border-color: $warning !important;
-    color: $white !important;
+    color: $warning-contrast !important;
 
     &:hover {
         background: $warning-hover !important;
@@ -94,7 +94,7 @@
 .btn-danger, .btn-danger:active, .btn-danger:focus {
     background: $danger !important;
     border-color: $danger !important;
-    color: $white !important;
+    color: $danger-contrast !important;
 
     &:hover {
         background: $danger-hover !important;

website/thaliawebsite/static/css/_cards.scss

@@ -2,7 +2,7 @@
     position: relative;
     display: block;
     margin-bottom: 15px;
-    background-color: $light-grey;
+    background-color: $card-background;
     border-radius: 0;
     border: 0;
     width: 100%;
@@ -33,7 +33,7 @@
 
     .card-text {
         font-size: .9rem;
-        color: #444;
+        color: $card-background-contrast;
     }
 
     .card-btn {
@@ -49,8 +49,8 @@
         font-weight: 700;
         text-transform: uppercase;
         padding: 1.25rem;
-        color: $preset;
-        background-color: $grey;
+        color: $card-background-hover-contrast;
+        background-color: $card-background-hover;
         border-radius: 0;
 
         transition: all 300ms ease-in-out 0s;
@@ -59,23 +59,23 @@
         -o-transition: all 300ms ease-in-out 0s;
 
         a {
-            color: $preset;
+            color: $card-background-hover-contrast;
         }
 
         &.collapsed {
-            color: $black;
-            background-color: $light-grey;
+            color: $card-background-contrast;
+            background-color: $card-background;
 
             a {
-                color: $black;
+                color: $card-background-contrast;
             }
 
             &:hover {
-                color: $preset;
-                background-color: $grey;
+                color: $card-background-hover-contrast;
+                background-color: $card-background-hover;
 
                 a {
-                    color: $preset;
+                    color: $card-background-hover-contrast;
                 }
             }
         }

website/thaliawebsite/static/css/_forms.scss

 .form-control {
-    color: $text-color;
-    background: $white;
+    color: $form-text;
+    background: $form-background;
     font-weight: $regular;
     font-size: 14px;
     font-family: $primary-font;
     letter-spacing: $letter-spacing;
-    border: 2px solid $black;
+    border: 2px solid $form-border;
     border-radius: 0;
     padding: 3px 10px;
     min-height: 50px;
@@ -19,5 +19,7 @@
     &:focus {
         border-color: $preset;
         box-shadow: none;
+        color: $form-text;
+        background: $form-background;
     }
 }

website/thaliawebsite/static/css/_navs.scss

@@ -10,7 +10,8 @@
         }
 
         .nav-link {
-            color: $black;
+            background-color: transparent;
+            color: $nav-link-color;
             font-family: $header-font;
             font-size: 16px;
             line-height: 18px;
@@ -19,22 +20,18 @@
             border-top-right-radius: 0;
             border-top-left-radius: 0;
 
-            &.active {
-                color: $preset;
-            }
-
             &:hover {
                 color: $preset-hover;
             }
 
-            &.mixitup-control-active {
-                color: #E62272;
-                border-color: #dee2e6 #dee2e6 #fff;
+            &.active, &.mixitup-control-active {
+                color: $preset;
+                border-color: #dee2e6 #dee2e6 $background-color;
             }
         }
 
         .nav-select {
-            color: $black;
+            color: $secondary;
             font-family: $header-font;
             font-size: 16px;
             line-height: 18px;
@@ -45,7 +42,7 @@
             border: 1px solid transparent;
 
             &.active {
-                color: #E62272;
+                color: $preset;
             }
         }
     }
@@ -59,8 +56,11 @@
     border-radius: 0;
 
     .page-item {
+
         .page-link {
             color: $preset;
+            background-color: $background-color;
+            border-color: $background-shade;
             border-radius: 0;
 
             &:focus {

website/thaliawebsite/static/css/_progress.scss

@@ -2,7 +2,7 @@
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     border-radius: 0;
-    background-color: $grey;
+    background-color: $card-background-hover;
 
     .progress-bar {
         -webkit-border-radius: 0;

website/thaliawebsite/static/css/_typography.scss

@@ -64,31 +64,31 @@ p {
 }
 
 .bg-primary {
-    color: $white;
+    color: $preset-contrast;
     background: $preset;
     padding: 3px 4px;
 }
 
 .bg-success {
-    color: $white;
+    color: $success-contrast;