MOBILE-3144 theme: Dark mode

src/addon/block/timeline/components/events/addon-block-timeline-events.html

@@ -4,7 +4,7 @@
     </ion-item-divider>
     <ng-container *ngFor="let event of dayEvents.events">
         <a ion-item text-wrap detail-none class="core-course-module-handler item-media" (click)="action($event, event.url)" [title]="event.name">
-            <img item-start [src]="event.iconUrl" core-external-content alt="" role="presentation" *ngIf="event.iconUrl" class="core-module-icon">
+            <img item-start [src]="event.iconUrl" alt="" role="presentation" *ngIf="event.iconUrl" class="core-module-icon">
             <h2><core-format-text [text]="event.name"></core-format-text></h2>
             <p *ngIf="showCourse">
                 <core-format-text [text]="event.course.fullnamedisplay"></core-format-text>

src/addon/calendar/components/calendar/calendar.scss

@@ -58,6 +58,9 @@ ion-app.app-root addon-calendar-calendar {
     .addon-calendar-months {
         background-color: white;
         padding: 0;
+        @include darkmode() {
+            background-color: $gray-darker;
+        }
     }
 
     .addon-calendar-day {
@@ -108,6 +111,9 @@ ion-app.app-root addon-calendar-calendar {
         }
         &.dayblank {
             background-color: $gray-lighter;
+            @include darkmode() {
+                background-color: $black;
+            }
         }
 
         .addon-calendar-event {

src/addon/messages/pages/discussion/discussion.scss

@@ -4,10 +4,13 @@ $item-message-note-text: $gray-dark !default;
 $item-message-note-font-size: 75% !default;
 $item-message-mine-bg: $gray-light !default;
 
-ion-app.app-root page-addon-messages-discussion {
+ion-app.app-root page-addon-messages-discussion.ion-page {
 
     ion-content {
         background-color: $gray-lighter !important;
+        @include darkmode() {
+            background-color: $gray-darker !important;
+        }
     }
 
     .addon-messages-discussion-container {
@@ -59,6 +62,7 @@ ion-app.app-root page-addon-messages-discussion {
             align-items: center;
             margin-bottom: .5rem!important;
             margin-top: 0;
+            color: $text-color;
 
             ion-avatar {
                 display: block;
@@ -108,6 +112,9 @@ ion-app.app-root page-addon-messages-discussion {
 
         .addon-message-text {
             display: inline-flex;
+            * {
+                color: $text-color;
+            }
         }
 
         .addon-messages-delete-button {

src/addon/messages/pages/group-conversations/group-conversations.scss

@@ -28,6 +28,9 @@ ion-app.app-root .addon-message-discussion {
         white-space: nowrap;
         color: $black;
         @include margin(null, 2px, null, null);
+        @include darkmode() {
+            color: $white;
+        }
     }
 
     .addon-message-last-message-text {

src/addon/mod/assign/components/submission/submission.scss

@@ -10,6 +10,9 @@ ion-app.app-root addon-mod-assign-submission {
 
     div.submissioneditable p {
         color: $red;
+        @include darkmode() {
+            color: $red-light;
+        }
     }
 
     .core-grading-summary .advancedgrade {
@@ -45,6 +48,7 @@ core-format-text {
         margin: 0 auto;
         tbody {
             background: $white;
+            color: $text-color;
         }
     }
 

src/addon/mod/data/data.scss

@@ -3,7 +3,7 @@
   white-space: normal;
   word-break: break-word;
   padding: $content-padding;
-  background-color: white;
+  background-color: $white;
   border-top-width: 1px;
   border-bottom-width: 1px;
   border-right-width: 0;
@@ -11,6 +11,10 @@
   border-style: solid;
   border-color: $list-border-color;
 
+  @include darkmode {
+    background-color: $core-dark-item-bg-color;
+  }
+
   table, tbody {
     display: block;
   }
@@ -46,6 +50,11 @@ page-addon-mod-data-edit {
     form .addon-data-advanced-search {
         background-color: $list-background-color;
 
+        @include darkmode() {
+          background-color: $core-dark-item-bg-color;
+          color: $core-dark-text-color;
+        }
+
         .item.item-input .item-block .item-inner ion-input,
         .item.item-input.item-input-has-focus .item-inner ion-input,
         .item.item-input.input-has-focus .item-inner ion-input {

src/addon/mod/forum/pages/discussion/discussion.scss

@@ -1,6 +1,9 @@
 ion-app.app-root page-addon-mod-forum-discussion {
     .card.highlight .card-header .item {
         background-color: $gray-lighter;
+        @include darkmode() {
+            background-color: $black;
+        }
     }
 
     .addon-forum-reply-button .label {

src/addon/mod/lesson/pages/player/player.scss

@@ -26,6 +26,9 @@ ion-app.app-root page-addon-mod-lesson-player {
 
         tr:nth-child(odd) {
             background-color: $gray-lighter;
+            @include darkmode() {
+                background-color: $core-dark-item-divider-bg-color;
+            }
         }
 
         tr:last-child td {
@@ -52,13 +55,25 @@ ion-app.app-root page-addon-mod-lesson-player {
 
     .item-ios table {
         @extend .card-ios;
+        @include darkmode() {
+            color: $white;
+            background-color: $core-dark-item-bg-color;
+        }
     }
 
     .item-md table {
         @extend .card-md;
+        @include darkmode() {
+            color: $white;
+            background-color: $core-dark-item-bg-color;
+        }
     }
 
     .item-wp table {
         @extend .card-wp;
+        @include darkmode() {
+            color: $white;
+            background-color: $core-dark-item-bg-color;
+        }
     }
 }

src/addon/mod/quiz/components/index/index.scss

@@ -25,6 +25,9 @@ ion-app.app-root addon-mod-quiz-index {
 
         .item:nth-child(even) {
             background-color: $gray-lighter;
+            @include darkmode() {
+                background-color: $core-dark-item-divider-bg-color;
+            }
         }
 
         .addon-mod_quiz-highlighted,
@@ -34,5 +37,15 @@ ion-app.app-root addon-mod-quiz-index {
             background-color: $blue-light;
             color: $blue-dark;
         }
+
+        @include darkmode() {
+            .addon-mod_quiz-highlighted,
+            .item.addon-mod_quiz-highlighted,
+            .addon-mod_quiz-highlighted p,
+            .item.addon-mod_quiz-highlighted p {
+                background-color: $blue-dark;
+                color: $blue-light;
+            }
+        }
     }
 }

src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss

@@ -10,5 +10,13 @@ ion-app.app-root page-addon-mod-quiz-navigation-modal {
         }
         color: $text-color;
         background-color: $white;
+
+        @include darkmode() {
+            ion-label.label {
+                color: $core-dark-text-color;
+            }
+            color: $core-dark-text-color;
+            background-color: $core-dark-item-bg-color;
+        }
     }
 }

src/addon/mod/survey/components/index/index.scss

@@ -11,10 +11,16 @@ ion-app.app-root addon-mod-survey-index {
 
   ion-grid {
     background-color: $white;
+    @include darkmode() {
+      background-color: $black;
+    }
   }
 
   .even {
     background-color: $gray-light;
+    @include darkmode() {
+      background-color: $gray-darker;
+    }
   }
 
   .addon-mod_survey-textarea textarea {

src/addon/mod/wiki/components/index/index.scss

@@ -6,20 +6,32 @@ $addon-mod-wiki-toc-background-color: $gray-light !default;
 
 ion-app.app-root addon-mod-wiki-index {
     background-color: $white;
+    @include darkmode() {
+        background-color: $black;
+    }
 
     .addon-mod_wiki-page-content {
         background-color: $white;
+        @include darkmode() {
+            background-color: $black;
+        }
     }
 
     .wiki-toc {
         border: 1px solid $addon-mod-wiki-toc-border-color;
         background: $addon-mod-wiki-toc-background-color;
+        p {
+            color: $text-color !important;
+        }
+        a {
+            color: $link-color;
+        }
         margin: 16px;
         padding: 8px;
     }
 
     .wiki-toc-title {
-        color: $addon-mod-wiki-toc-title-color;
+        color: $addon-mod-wiki-toc-title-color !important;
         font-size: 1.1em;
         font-variant: small-caps;
         text-align: center;

src/addon/qtype/ddmarker/component/ddmarker.scss

@@ -69,6 +69,7 @@ addon-qtype-ddmarker {
         display: inline-block;
         zoom: 1;
         border-radius: 10px;
+        color: $text-color;
     }
     div.markertexts span.markertext {
         z-index: 3;

src/addon/qtype/ddwtos/component/ddwtos.scss

@@ -69,14 +69,21 @@ addon-qtype-ddwtos {
 
     span.incorrect {
         background-color: $red-light;
+        @include darkmode() {
+            background-color: $red-dark;
+        }
     }
     span.correct {
         background-color: $green-light;
+        @include darkmode() {
+            background-color: $green-dark;
+        }
     }
 
     @for $i from 0 to length($core-dd-question-colors) {
         .group#{$i + 1} {
             background: nth($core-dd-question-colors, $i + 1);
+            color: $text-color;
         }
     }
 

src/addon/qtype/gapselect/component/gapselect.scss

@@ -15,5 +15,9 @@ ion-app.app-root addon-qtype-gapselect {
         border-radius: 4px;
         margin-bottom: 10px;
         background: $gray-lighter;
+
+        @include darkmode() {
+            background: $gray-dark;
+        }
     }
 }

src/app/app.ios.scss

@@ -43,6 +43,10 @@ ion-app.app-root.ios {
       @extend .card-ios ;
       @extend .card-content-ios;
 
+      @include darkmode() {
+        background-color: $core-dark-item-bg-color;
+      }
+
       &[icon-start] {
         @include padding(null, null, null, $card-ios-padding-left * 2 + 20);
 

src/app/app.md.scss

@@ -38,6 +38,10 @@ ion-app.app-root.md {
       @extend .card-md;
       @extend .card-content-md;
 
+      @include darkmode() {
+        background-color: $core-dark-item-bg-color;
+      }
+
       &[icon-start] {
         @include padding(null, null, null, $card-md-padding-left * 2 + 20);
 

src/app/app.scss

@@ -255,6 +255,10 @@ ion-app.app-root {
 
         &.core-shortened {
           color: $gray-darker;
+          @include darkmode() {
+            color: $white;
+          }
+
           overflow: hidden;
           min-height: 50px;
 
@@ -268,6 +272,10 @@ ion-app.app-root {
             z-index: 1001;
             background-color: $white;
             @include padding(null, null, null, 10px);
+            @include darkmode() {
+              color: $white;
+              background-color: $core-dark-item-bg-color;
+            }
           }
 
           &:before {
@@ -282,6 +290,15 @@ ion-app.app-root {
             background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
             background: linear-gradient(to bottom, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px));
             z-index: 1000;
+
+            @include darkmode {
+              background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), $core-dark-item-bg-color calc(100% - 15px));
+              background: -webkit-gradient(left top, left bottom, color-stop(calc(100% - 50px), rgba(255, 255, 255, 0)), color-stop(calc(100% - 15px), white));
+              background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), $core-dark-item-bg-color calc(100% - 15px));
+              background: -o-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), $core-dark-item-bg-color calc(100% - 15px));
+              background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), $core-dark-item-bg-color calc(100% - 15px));
+              background: linear-gradient(to bottom, rgba(255, 255, 255, 0) calc(100% - 50px), $core-dark-item-bg-color calc(100% - 15px));
+            }
           }
         }
       }
@@ -469,6 +486,23 @@ ion-app.app-root {
     }
   }
 
+  @include darkmode() {
+    ion-select.core-button-select,
+    .core-button-select {
+      background-color: $core-dark-item-divider-bg-color;
+
+
+      &.select-md,
+      &.button-md,
+      &.select-ios,
+      &.button-ios,
+      &.select-wp,
+      &.button-wp {
+        background: $core-dark-item-divider-bg-color;
+      }
+    }
+  }
+
   // File uploader.
   // -------------------------
   .core-fileuploader-file-handler {
@@ -692,6 +726,10 @@ ion-app.app-root {
       @extend ion-card;
       border-bottom: 3px solid $color-base;
 
+      @include darkmode() {
+        background-color: $core-dark-item-bg-color;
+      }
+
       &[icon-start] {
         @include padding(null, null, null, 52px);
         position: relative;
@@ -713,6 +751,9 @@ ion-app.app-root {
       ion-icon {
         color: $color-base;
       }
+      @include darkmode() {
+        background-color: $core-dark-item-bg-color;
+      }
     }
 
     .core-#{$color-name}-item.item-input {

src/app/app.wp.scss

@@ -35,6 +35,10 @@ ion-app.app-root.wp {
       @extend .card-wp ;
       @extend .card-content-wp;
 
+      @include darkmode() {
+        background-color: $core-dark-item-bg-color;
+      }
+
       &[icon-start] {
         @include padding(null, null, null, $card-wp-padding-left * 2 + 20);
 

src/components/icon/icon.scss

@@ -5,6 +5,12 @@
   }
 }
 
+@each $color-name, $color-base, $color-contrast in get-colors($colors-dark) {
+  .fa-#{$color-name} {
+    color: $color-base !important;
+  }
+}
+
 
 [dir=rtl] .icon {
     &.core-icon-dir-flip,

src/components/iframe/iframe.scss

@@ -6,6 +6,7 @@ ion-app.app-root core-iframe {
         border: 0;
         display: block;
         max-width: 100%;
+        background-color: $gray-light;
     }
 
     .core-loading-container {

src/components/loading/loading.scss

@@ -7,6 +7,9 @@ ion-app.app-root {
             text-align: center;
             padding-top: 10px;
             clear: both;
+            @include darkmode() {
+                color: $core-dark-text-color;
+            }
         }
 
         .core-loading-content {

src/components/mark-required/mark-required.scss

@@ -4,4 +4,8 @@ ion-app.app-root .core-input-required-asterisk, ion-app.app-root .icon.core-inpu
     @include padding(null, null, null, 4px);
     line-height: 100%;
     vertical-align: top;
+
+    @include darkmode() {
+        color: $red-light !important;
+    }
 }

src/components/progress-bar/progress-bar.scss

@@ -13,6 +13,10 @@ ion-app.app-root core-progress-bar {
         color: $gray-darker;
         @include position(-16px, 10px, null, null);
         position: absolute;
+
+        @include darkmode() {
+            color: $gray-lighter;
+        }
     }
 
     progress {
@@ -35,6 +39,9 @@ ion-app.app-root core-progress-bar {
         .progress-bar-fallback span,
         &[value]::-webkit-progress-value {
             background-color: $core-progressbar-color;
+            @include darkmode() {
+                background-color: $core-progressbar-color;
+            }
             border-radius: 0;
         }
 

src/components/rich-text-editor/rich-text-editor.scss

@@ -6,6 +6,9 @@ ion-app.app-root core-rich-text-editor {
     width: 100%;
     display: flex;
     flex-direction: column;
+    @include darkmode() {
+        background-color: $black;
+    }
 
     .core-rte-editor, .core-textarea {
         padding: 2px;
@@ -13,6 +16,10 @@ ion-app.app-root core-rich-text-editor {
         width: 100%;
         resize: none;
         background-color: $white;
+        @include darkmode() {
+            background-color: $black;
+            color: $white;
+        }
     }
 
     .core-rte-editor {
@@ -32,6 +39,10 @@ ion-app.app-root core-rich-text-editor {
             display: block;
             color: $gray-light;
             font-weight: bold;
+
+            @include darkmode() {
+                color: $gray;
+            }
         }
 
         // Make empty elements selectable (to move the cursor).
@@ -65,6 +76,10 @@ ion-app.app-root core-rich-text-editor {
         flex-grow: 0;
         flex-shrink: 0;
         background-color: $white;
+
+        @include darkmode() {
+            background-color: $black;
+        }
         @include padding(5px, null);
         border-top: 1px solid $gray;
 
@@ -90,12 +105,20 @@ ion-app.app-root core-rich-text-editor {
             color: $text-color;
             cursor: pointer;
 
+            @include darkmode() {
+                background-color: $black;
+                color: $core-dark-text-color;
+            }
+
             &.toolbar-button-enable {
                 width: 100%;
             }
 
             &:active, &[aria-pressed="true"] {
                 background-color: $gray;
+                @include darkmode() {
+                    background-color: $gray-dark;
+                }
             }
 
             &.toolbar-arrow {
@@ -107,6 +130,9 @@ ion-app.app-root core-rich-text-editor {
 
                 &:active {
                     background-color: $white;
+                    @include darkmode() {
+                        background-color: $black;
+                    }
                 }
 
                 &.toolbar-arrow-hidden {

src/components/send-message-form/send-message-form.scss

@@ -34,4 +34,9 @@ ion-app.app-root core-send-message-form {
     min-height: 0;
     align-self: self-end;
   }
+  @include darkmode() {
+    ion-icon.icon {
+      color: $gray-darker;
+    }
+  }
 }

src/components/split-view/split-view.scss

@@ -22,6 +22,10 @@ ion-app.app-root core-split-view {
         .split-pane-side .core-split-item-selected {
             background-color: $gray-lighter;
             @include core-selected-item($core-splitview-selected);
+
+            @include darkmode() {
+              background-color: $black;
+            }
         }
 
         .item-ios[detail-push] .item-inner,

src/components/timer/core-timer.html

@@ -1,4 +1,4 @@
-<ion-item #container class="core-timer" [attr.text-center]="align == 'center' ? true : null" [attr.text-end]="align == 'right' ? true : null" role="timer">
+<ion-item #container no-lines class="core-timer" [attr.text-center]="align == 'center' ? true : null" [attr.text-end]="align == 'right' ? true : null" role="timer">
     <ion-icon name="timer" item-start role="presentation"></ion-icon>
     <label *ngIf="timeLeft > 0 && timerText">{{ timerText }}</label>
     <span *ngIf="timeLeft > 0">{{ timeLeft | coreSecondsToHMS }}</span>

src/components/timer/timer.scss

@@ -4,7 +4,7 @@ ion-app.app-root core-timer {
     }
 
     .core-timer {
-        background-color: transparent;
+        background-color: transparent !important;
 
         span {
             font-weight: bold;
@@ -13,7 +13,7 @@ ion-app.app-root core-timer {
         // Create the timer warning colors. Go to $core-timer-warn-color.
         @for $i from 0 through $core-timer-iterations {
             &.core-timer-timeleft-#{$i} {
-                background-color: rgba($core-timer-warn-color, 1 - ($i / $core-timer-iterations));
+                background-color: rgba($core-timer-warn-color, 1 - ($i / $core-timer-iterations)) !important;
 
                 @if $i <= $core-timer-iterations / 2 {
                     label, span, ion-icon {

src/core/block/components/block/block.scss

@@ -29,4 +29,10 @@ ion-app.app-root core-block {
   .item-divider .icon {
     color: $black;
   }
+
+  @include darkmode() {
+    .item-divider .icon {
+      color: $core-dark-text-color
+    }
+  }
 }

src/core/course/components/module/core-course-module.html

@@ -1,4 +1,4 @@
-<ion-item *ngIf="module && module.visibleoncoursepage !== 0" text-wrap id="core-course-module-{{module.id}}" class="core-course-module-handler {{module.handlerData.class}}" (click)="moduleClicked($event)" [ngClass]="{'item-media': module.handlerData.icon, 'core-not-clickable': !module.handlerData.action || !module.uservisible === false, 'item-dimmed': module.visible === 0 || module.uservisible === false}" [title]="module.handlerData.a11yTitle" detail-none>
+<ion-item *ngIf="module && module.visibleoncoursepage !== 0" text-wrap id="core-course-module-{{module.id}}" class="core-course-module-handler {{module.handlerData.class}}" (click)="moduleClicked($event)" [ngClass]="{'item-media': module.handlerData.icon, 'core-not-clickable': !module.handlerData.action || module.uservisible === false, 'item-dimmed': module.visible === 0 || module.uservisible === false}" [title]="module.handlerData.a11yTitle" detail-none>
 
     <img item-start *ngIf="module.handlerData.icon" [src]="module.handlerData.icon" [alt]="module.modnametranslated" class="core-module-icon">
     <div class="core-module-title">

src/core/course/components/module/module.scss

@@ -15,6 +15,20 @@ ion-app.app-root core-course-module {
         .core-module-icon {
             align-items: flex-start;
         }
+
+        cursor: pointer;
+        &.item-ios:active,
+        &.item-ios.activated {
+            background-color: $list-ios-activated-background-color;
+        }
+        &.item-md:active,
+        &.item-md.activated {
+            background-color: $list-md-activated-background-color;
+        }
+        &.item-wp:active,
+        &.item-wp.activated {
+            background-color: $list-wp-activated-background-color;
+        }
     }
 
     .core-module-title {
@@ -64,9 +78,32 @@ ion-app.app-root core-course-module {
         }
     }
 
-    .core-not-clickable:active,
+    .core-not-clickable {
-    .core-not-clickable.activated {
+        cursor: initial;
-        background-color: $list-background-color;
+
+        &:active,
+        &.activated {
+            background-color: $list-background-color;
+        }
+    }
+
+    @include darkmode() {
+        .item.core-course-module-handler {
+            background: $core-dark-item-bg-color;
+            &.item-ios:active,
+            &.item-ios.activated,
+            &.item-md:active,
+            &.item-md.activated,
+            &.item-wp:active,
+            &.item-wp.activated {
+              background-color: $core-dark-background-color;
+            }
+        }
+
+        .core-not-clickable:active,
+        .core-not-clickable.activated {
+            background-color: $core-dark-item-bg-color;
+        }
     }
 }
 

src/core/grades/components/course/course.scss

@@ -6,6 +6,10 @@ ion-app.app-root core-grades-course {
     font-size: 16px;
     color: $text-color;
 
+    @include darkmode() {
+      color: $core-dark-text-color;
+    }
+
     tr {
       border-bottom: 1px solid $list-border-color;
     }
@@ -19,6 +23,10 @@ ion-app.app-root core-grades-course {
       vertical-align: bottom;
       font-weight: bold;
       background-color: $white;
+
+      @include darkmode() {
+        background-color: $black;
+      }
     }
     tbody th {
       font-weight: normal;
@@ -58,11 +66,17 @@ ion-app.app-root core-grades-course {
     .odd {
       td, th, th.core-split-item-selected {
         background-color: $gray-lighter;
+        @include darkmode() {
+          background-color: $gray-darker;
+        }
       }
     }
     .even {
       td, th, th.core-split-item-selected {
         background-color: $white;
+        @include darkmode() {
+          background-color: $black;
+        }
       }
     }
 

src/core/login/login.scss

@@ -0,0 +1,74 @@
+ion-app.app-root page-core-login-credentials,
+ion-app.app-root page-core-login-reconnect,
+ion-app.app-root page-core-login-site {
+    .scroll-content {
+        background: $core-login-page-background-color;
+
+        @include darkmode() {
+            background: $core-dark-login-page-background-color;
+        }
+    }
+
+    img {
+        max-width: 100%;
+    }
+
+    img.login-logo {
+        width: 90%;
+        max-width: 300px;
+    }
+
+    .box {
+        padding: 16px;
+        margin: 8px;
+        background: $core-login-box-background-color;
+        border: 1px solid $core-login-box-background-border;
+        color: $core-login-box-text-color;
+
+        @include darkmode() {
+            background: $core-dark-login-box-background-color;
+            border-color: $core-dark-login-box-background-border;
+            color: $core-dark-login-box-text-color;
+        }
+    }
+
+    .core-sitename, .core-siteurl {
+        @if $core-fixed-url { display: none; }
+    }
+
+    @if $core-login-button-outline {
+        .button-md.button-default-md, .button-ios.button-default-ios {
+            @extend .button-md-light;
+        }
+    }
+
+    @if $core-login-loading-color {
+        .core-loading-container {
+            color: $core-login-loading-color;
+
+            .spinner circle, .spinner line {
+                stroke: $core-login-loading-color;
+            }
+        }
+    }
+
+    @if $core-dark-login-button-outline {
+        .button-md.button-default-md, .button-ios.button-default-ios {
+            @extend .button-md-light;
+        }
+    }
+
+    @include darkmode() {
+        .core-loading-container {
+            color: $core-dark-login-loading-color;
+
+            .spinner circle, .spinner line {
+                stroke: $core-dark-login-loading-color;
+            }
+        }
+    }
+
+    .item-input {
+        margin-bottom: 20px;
+    }
+}

src/core/login/pages/credentials/credentials.html

@@ -36,11 +36,11 @@
             </form>
 
             <!-- Forgotten password button. -->
-            <div padding-top>
+            <div padding-top class="core-login-forgotten-password">
                 <button ion-button block text-wrap color="light" (click)="forgottenPassword()">{{ 'core.login.forgotten' | translate }}</button>
             </div>
 
-            <ion-list *ngIf="identityProviders && identityProviders.length" padding-top>
+            <ion-list *ngIf="identityProviders && identityProviders.length" padding-top class="core-login-identity-providers">
                 <ion-list-header text-wrap>{{ 'core.login.potentialidps' | translate }}</ion-list-header>
                 <button ion-item *ngFor="let provider of identityProviders" text-wrap class="core-oauth-icon" (click)="oauthClicked(provider)" title="{{provider.name}}">
                     <img [src]="provider.iconurl" alt="" width="32" height="32" item-start>
@@ -48,7 +48,7 @@
                 </button>
             </ion-list>
 
-            <ion-list *ngIf="canSignup" padding-top>
+            <ion-list *ngIf="canSignup" padding-top class="core-login-sign-up">
                 <ion-list-header text-wrap>{{ 'core.login.firsttime' | translate }}</ion-list-header>
                 <ion-item no-lines text-wrap *ngIf="authInstructions">
                     <p><core-format-text [text]="authInstructions"></core-format-text></p>

src/core/login/pages/credentials/credentials.scss

@@ -1,45 +1,4 @@
 ion-app.app-root page-core-login-credentials {
-    .scroll-content {
-        background: $core-login-page-background-color;
-    }
-
-    img {
-        max-width: 100%;
-    }
-
-    img.login-logo {
-        width: 90%;
-        max-width: 300px;
-    }
-
-    .box {
-        padding: 16px;
-        margin: 8px;
-        background: $core-login-box-background-color;
-        border: 1px solid $core-login-box-background-border;
-        color: $core-login-box-text-color;
-    }
-
-    .core-sitename, .core-siteurl {
-        @if $core-fixed-url { display: none; }
-    }
-
-    @if $core-login-button-outline {
-        .button-md.button-default-md, .button-ios.button-default-ios {
-            @extend .button-md-light;
-        }
-    }
-
-    @if $core-login-loading-color {
-        .core-loading-container {
-            color: $core-login-loading-color;
-
-            .spinner circle, .spinner line {
-                stroke: $core-login-loading-color;
-            }
-        }
-    }
-
     .item-input {
         margin-bottom: 20px;
     }

src/core/login/pages/init/init.scss

@@ -22,6 +22,8 @@ ion-app.app-root page-core-login-init {
         background-size: 100%;
         background-size: $core-splash-bgsize;
         background-position: center;
+        width: 100%;
+        height: 100%;
 
         .spinner circle, .spinner line {
             stroke: $core-splash-spinner-color;

src/core/login/pages/reconnect/reconnect.html

@@ -30,7 +30,7 @@
                 <p class="item-heading">{{ 'core.login.username' | translate }}</p>
                 <p>{{username}}</p>
             </ion-item>
-            <form [formGroup]="credForm" (ngSubmit)="login($event)">
+            <form [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form">
                 <ion-item margin-bottom>
                     <core-show-password item-content [name]="'password'">
                         <ion-input class="core-ioninput-password" name="password" type="password" placeholder="{{ 'core.login.password' | translate }}" formControlName="password" [clearOnEdit]="false"></ion-input>
@@ -50,12 +50,12 @@
         </ion-list>
 
         <!-- Forgotten password button. -->
-        <div padding-top>
+        <div padding-top class="core-login-forgotten-password">
             <button ion-button block text-wrap color="light" (click)="forgottenPassword()">{{ 'core.login.forgotten' | translate }}</button>
         </div>
 
         <!-- Identity providers. -->
-        <ion-list *ngIf="identityProviders && identityProviders.length" padding-top>
+        <ion-list *ngIf="identityProviders && identityProviders.length" padding-top class="core-login-identity-providers">
             <ion-list-header text-wrap>{{ 'core.login.potentialidps' | translate }}</ion-list-header>
             <button ion-item *ngFor="let provider of identityProviders" text-wrap class="core-oauth-icon" (click)="oauthClicked(provider)" title="{{provider.name}}">
                 <img [src]="provider.iconurl" alt="" width="32" height="32" item-start>

src/core/login/pages/reconnect/reconnect.scss

@@ -1,52 +1,20 @@
 ion-app.app-root page-core-login-reconnect {
-    .scroll-content {
-        background: $core-login-page-background-color;
-    }
-
-    img {
-        max-width: 100%;
-    }
-
-    img.login-logo {
-        width: 90%;
-        max-width: 300px;
-    }
-
     .box {
-        padding: 16px;
-        margin: 8px;
-        background: $core-login-box-background-color;
-        border: 1px solid $core-login-box-background-border;
-        color: $core-login-box-text-color;
-
         .core-login-form .item {
             background-color: $core-login-item-background-color;
             @include padding-horizontal(0);
+
+            @include darkmode() {
+                background-color: $core-dark-login-item-background-color;
+            }
         }
 
         .core-login-form .item-inner {
             background-color: $core-login-item-inner-background-color;
-            @include padding-horizontal(0);
+            @include darkmode() {
-        }
+                background-color: $core-dark-login-item-inner-background-color;
-    }
-
-    .core-sitename, .core-siteurl {
-        @if $core-fixed-url { display: none; }
-    }
-
-    @if $core-login-button-outline {
-        .button-md.button-default-md, .button-ios.button-default-ios {
-            @extend .button-md-light;
-        }
-    }
-
-    @if $core-login-loading-color {
-        .core-loading-container {
-            color: $core-login-loading-color;
-
-            .spinner circle, .spinner line {
-                stroke: $core-login-loading-color;
             }
+            @include padding-horizontal(0);
         }
     }
 

src/core/login/pages/site/site.scss

@@ -1,38 +1,4 @@
 ion-app.app-root page-core-login-site {
-    .scroll-content {
-        background-color: $core-login-page-background-color;
-    }
-
-    img.login-logo {
-        width: 90%;
-        max-width: 300px;
-    }
-
-    .box {
-        padding: 16px;
-        margin: 8px;
-        background: $core-login-box-background-color;
-        border: 1px solid $core-login-box-background-border;
-        color: $core-login-box-text-color;
-    }
-
-    @if $core-login-button-outline {
-        .button-md.button-default-md, .button-ios.button-default-ios {
-            @extend .button-md-light;
-        }
-    }
-
-    @if $core-login-loading-color {
-        .core-loading-container {
-            color: $core-login-loading-color;
-
-            .spinner circle, .spinner line {
-                stroke: $core-login-loading-color;
-            }
-        }
-    }
-
-
     .item-input:last-child {
         margin-bottom: 20px;
     }
@@ -41,7 +7,7 @@ ion-app.app-root page-core-login-site {
         background: transparent;
 
         .searchbar-input {
-            background-color: $searchbar-ios-toolbar-input-background
+            background-color: $searchbar-ios-toolbar-input-background;
         }
     }
 }

src/core/mainmenu/pages/more/more.scss

@@ -82,7 +82,44 @@ ion-app.app-root page-core-mainmenu-more {
             background-color: $core-more-divider-wp;
         }
     }
+
+    @include darkmode() {
+        ion-icon {
+            color: $core-dark-text-color;
+        }
+
+        .item-divider {
+            &.item-ios,
+            &.item-md,
+            &.item-wp {
+                color: $core-dark-text-color;
+                background-color: $core-dark-item-divider-bg-color;
+            }
+        }
+
+        .item-block {
+            &.item-ios,
+            &.item-md,
+            &.item-wp {
+                color: $core-dark-text-color;
+                background-color: $core-dark-item-bg-color;
+                p {
+                    color: $core-dark-text-color;
+                }
+
+            }
+
+            &.activated {
+                &.item-ios {
+                    background-color: $core-more-activated-background-ios;
+                }
+                &.item-md {
+                    background-color: $core-more-activated-background-md;
+                }
+                &.item-wp {
+                    background-color: $core-more-activated-background-wp;
+                }
+            }
+        }
+    }
 }
-
-
-

src/core/user/pages/profile/profile.scss

@@ -9,7 +9,10 @@ ion-app.app-root page-core-user-profile {
         width: 30px;
         height: 30px;
         border-radius: 50%;
-        background-color: white;
+        background-color: $white;
+        @include darkmode() {
+            background: $core-dark-item-bg-color;
+        }
     }
     [core-user-avatar].item-avatar-center {
         display: inline-block;
@@ -26,11 +29,19 @@ ion-app.app-root page-core-user-profile {
         background: $list-background-color;
         border-bottom: 1px solid $list-border-color;
 
+        @include darkmode() {
+            background: $core-dark-item-bg-color;
+        }
+
         .core-user-profile-handler {
             background: $list-background-color;
             border: 0;
             color: $core-user-profile-communication-icons-color;
 
+            @include darkmode() {
+               background: $core-dark-item-bg-color;
+            }
+
             p {
                 margin: 0;
             }

src/theme/dark.scss

@@ -0,0 +1,123 @@
+$core-dark-text-color: $white !default;
+$core-dark-text-secondary-color: $gray-light !default;
+$core-dark-link-color: $blue-light !default;
+
+$core-dark-item-bg-color: $gray-darker !default;
+$core-dark-item-divider-bg-color: $black !default;
+$core-dark-background-color: $gray-dark !default;
+
+// Login.
+$core-dark-login-page-background-color: radial-gradient(white, $gray-dark) !default;
+$core-dark-login-box-background-color: $black !default;
+$core-dark-login-box-background-border: $core-login-box-background-border !default;
+$core-dark-login-box-text-color: $core-dark-text-color !default;
+$core-dark-login-item-inner-background-color: $core-dark-login-box-background-color !default;
+$core-dark-login-item-background-color: $core-dark-login-box-background-color !default;
+$core-dark-login-button-outline: $core-login-button-outline !default;
+$core-dark-login-loading-color: $core-dark-text-color !default;
+
+ion-app.app-root .ion-page {
+  @include darkmode() {
+    color: $core-dark-text-color;
+    background-color: $core-dark-item-bg-color;
+
+    a {
+      color: $core-dark-link-color;
+    }
+
+    .core-tabs-bar *,
+    .core-tabs-bar .tab-slide,
+    .ion-page,
+    .item,
+    .item-select,
+    ion-card,
+    .card-header {
+        color: $core-dark-text-color;
+        background-color: $core-dark-item-bg-color;
+
+        h1, h2, h3, h4, h5, h6,
+        ion-icon,
+        .label {
+          color: $core-dark-text-color;
+        }
+
+        @each $color-name, $color-base, $color-contrast in get-colors($colors-dark) {
+          .icon-md-#{$color-name},
+          .icon-ios-#{$color-name},
+          .icon-wp-#{$color-name} {
+            color: $color-base;
+          }
+        }
+        p {
+          color: $core-dark-text-secondary-color;
+        }
+    }
+
+    .item-divider,
+    .item-divider .item-inner {
+      color: $core-dark-text-color;
+      background-color: $core-dark-item-divider-bg-color;
+    }
+
+    .item.item-ios:active,
+    .item.item-ios.activated,
+    .item.item-md:active,
+    .item.item-md.activated,
+    .item.item-wp:active,
+    .item.item-wp.activated {
+      background-color: $core-dark-background-color;
+    }
+
+    .content,
+    .content-md,
+    .content-ios,
+    .content-wp {
+      color: $core-dark-text-color;
+      background-color: $core-dark-background-color;
+    }
+
+    .button,
+    .button-md-light,
+    .button-ios-light,
+    .button-wp-light,
+    .button-outline {
+      ion-icon {
+        color: inherit;
+      }
+    }
+
+    .toolbar-md-light .toolbar-background,
+    .toolbar-ios-light .toolbar-background,
+    .toolbar-wp-light .toolbar-background {
+      background-color: $core-dark-item-divider-bg-color;
+      color: $core-dark-text-color;
+    }
+
+    .button.button-clear-md-dark,
+    .button.button-clear-ios-dark,
+    .button.button-clear-wp-dark {
+      .button-inner ion-icon {
+        color: $core-dark-text-color;
+      }
+    }
+
+    .button-outline {
+      background-color: $core-dark-item-bg-color;
+    }
+
+    ion-refresher {
+      .refresher-pulling-icon,
+      .refresher-refreshing-icon,
+      .refresher-pulling-icon ion-icon,
+      .refresher-refreshing-icon ion-icon,
+      ion-icon {
+        color: $refresher-icon-color;
+      }
+
+      .refresher-pulling-text,
+      .refresher-refreshing-text {
+        color: $core-dark-text-color;
+      }
+    }
+  }
+}

src/theme/variables.scss

@@ -88,6 +88,15 @@ $info: $blue !default;
 $inverted-base: $white !default;
 $inverted-contrast: $primary !default;
 
+$primary-dark: lighten($primary, 10%) !default;
+$secondary-dark: mix($secondary, white, 20%) !default;
+$danger-dark: mix($danger, white, 20%) !default;
+$warning-dark: mix($warning, white, 20%) !default;
+$success-dark: mix($success, white, 20%) !default;
+$info-dark: mix($info, white, 20%) !default;
+$inverted-base-dark: $dark !default;
+$inverted-contrast-dark: $primary-dark !default;
+
 $colors: (
   primary:    $primary,
   secondary:  $secondary,
@@ -104,6 +113,22 @@ $colors: (
   )
 );
 
+$colors-dark: (
+  primary:    $primary-dark,
+  secondary:  $secondary-dark,
+  danger:     $danger-dark,
+  light:      $dark,
+  gray:       $color-gray,
+  dark:       $light,
+  warning:    $warning-dark,
+  success:    $success-dark,
+  info:       $info-dark,
+  inverted: (
+    base: $inverted-base-dark,
+    contrast: $inverted-contrast-dark
+  )
+);
+
 $text-color:                 $black !default;
 $link-color:                 $blue !default;
 $background-color:           $gray-light !default;
@@ -544,9 +569,30 @@ $core-dd-question-colors: $white, $blue-light, #DCDCDC, #D8BFD8, #87CEFA, #DAA52
   }
 }
 
+@mixin darkmode() {
+  $root: #{&};
+
+  @at-root body.scheme-auto {
+    #{$root} {
+      @media (prefers-color-scheme: dark) {
+        @content;
+      }
+    }
+  }
+
+  @at-root body.scheme-dark {
+    #{$root} {
+      @content;
+    }
+  }
+}
+
 // Font Awesome
 $fa-font-path: $font-path;
 @import "font-awesome";
 
 // Format text styles.
 @import "format-text";
+
+// Dark mode.
+@import "dark";