MOBILE-3144 theme: Dark mode

2019-09-12 16:40:42 +02:00 · 2019-09-12 16:40:42 +02:00 · 7f882a67ae
parent 716f76f969
commit 7f882a67ae
44 changed files with 586 additions and 136 deletions
--- a/src/addon/block/timeline/components/events/addon-block-timeline-events.html
+++ b/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>
--- a/src/addon/calendar/components/calendar/calendar.scss
+++ b/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 {
--- a/src/addon/messages/pages/discussion/discussion.scss
+++ b/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 {
--- a/src/addon/messages/pages/group-conversations/group-conversations.scss
+++ b/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 {
--- a/src/addon/mod/assign/components/submission/submission.scss
+++ b/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;
        }
    }

--- a/src/addon/mod/data/data.scss
+++ b/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 {
--- a/src/addon/mod/forum/pages/discussion/discussion.scss
+++ b/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 {
--- a/src/addon/mod/lesson/pages/player/player.scss
+++ b/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;
+        }
    }
 }
--- a/src/addon/mod/quiz/components/index/index.scss
+++ b/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;
+            }
+        }
    }
 }
--- a/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss
+++ b/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;
+        }
    }
 }
--- a/src/addon/mod/survey/components/index/index.scss
+++ b/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 {
--- a/src/addon/mod/wiki/components/index/index.scss
+++ b/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;
--- a/src/addon/qtype/ddmarker/component/ddmarker.scss
+++ b/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;
--- a/src/addon/qtype/ddwtos/component/ddwtos.scss
+++ b/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;
        }
    }

--- a/src/addon/qtype/gapselect/component/gapselect.scss
+++ b/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;
+        }
    }
 }
--- a/src/app/app.ios.scss
+++ b/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);

--- a/src/app/app.md.scss
+++ b/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);

--- a/src/app/app.scss
+++ b/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 {
--- a/src/app/app.wp.scss
+++ b/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);

--- a/src/components/icon/icon.scss
+++ b/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,
--- a/src/components/iframe/iframe.scss
+++ b/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 {
--- a/src/components/loading/loading.scss
+++ b/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 {
--- a/src/components/mark-required/mark-required.scss
+++ b/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;
+    }
 }
--- a/src/components/progress-bar/progress-bar.scss
+++ b/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;
        }

--- a/src/components/rich-text-editor/rich-text-editor.scss
+++ b/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 {
--- a/src/components/send-message-form/send-message-form.scss
+++ b/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;
+    }
+  }
 }
--- a/src/components/split-view/split-view.scss
+++ b/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,
--- a/src/components/timer/core-timer.html
+++ b/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>
--- a/src/components/timer/timer.scss
+++ b/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 {
--- a/src/core/block/components/block/block.scss
+++ b/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
+    }
+  }
 }
--- a/src/core/course/components/module/core-course-module.html
+++ b/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">
--- a/src/core/course/components/module/module.scss
+++ b/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 {
+        cursor: initial;
+
+        &: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: $list-background-color;
+            background-color: $core-dark-item-bg-color;
+        }
    }
 }

--- a/src/core/grades/components/course/course.scss
+++ b/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;
+        }
      }
    }

--- a/src/core/login/login.scss
+++ b/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;
+    }
+}
--- a/src/core/login/pages/credentials/credentials.html
+++ b/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>
--- a/src/core/login/pages/credentials/credentials.scss
+++ b/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;
    }
--- a/src/core/login/pages/init/init.scss
+++ b/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;
--- a/src/core/login/pages/reconnect/reconnect.html
+++ b/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>
--- a/src/core/login/pages/reconnect/reconnect.scss
+++ b/src/core/login/pages/reconnect/reconnect.scss
@ -1,55 +1,23 @@
 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 darkmode() {
+                background-color: $core-dark-login-item-inner-background-color;
+            }
            @include padding-horizontal(0);
        }
    }

-    .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;
-            }
-        }
-    }
-
    .list .core-username {
        &.item {
            @include padding-horizontal(0);
--- a/src/core/login/pages/site/site.scss
+++ b/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;
        }
    }
 }
--- a/src/core/mainmenu/pages/more/more.scss
+++ b/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;
+                }
+            }
+        }
+    }
 }
-
-
-
--- a/src/core/user/pages/profile/profile.scss
+++ b/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;
            }
--- a/src/theme/dark.scss
+++ b/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;
+      }
+    }
+  }
+}
--- a/src/theme/variables.scss
+++ b/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";