diff --git a/scripts/langindex.json b/scripts/langindex.json index fe54142bd..741c90a6b 100644 --- a/scripts/langindex.json +++ b/scripts/langindex.json @@ -1781,6 +1781,10 @@ "core.settings.appready": "local_moodlemobileapp", "core.settings.cannotsyncoffline": "local_moodlemobileapp", "core.settings.cannotsyncwithoutwifi": "local_moodlemobileapp", + "core.settings.colorscheme": "local_moodlemobileapp", + "core.settings.colorscheme-auto": "local_moodlemobileapp", + "core.settings.colorscheme-dark": "local_moodlemobileapp", + "core.settings.colorscheme-light": "local_moodlemobileapp", "core.settings.compilationinfo": "local_moodlemobileapp", "core.settings.cordovadevicemodel": "local_moodlemobileapp", "core.settings.cordovadeviceosversion": "local_moodlemobileapp", diff --git a/src/addon/block/timeline/components/events/addon-block-timeline-events.html b/src/addon/block/timeline/components/events/addon-block-timeline-events.html index 1cebcecc1..46af070cc 100644 --- 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 @@ - +

diff --git a/src/addon/calendar/components/calendar/calendar.scss b/src/addon/calendar/components/calendar/calendar.scss index b04fe3d64..17c3fd478 100644 --- 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 { diff --git a/src/addon/messages/pages/discussion/discussion.scss b/src/addon/messages/pages/discussion/discussion.scss index f17702e24..5b8ee2a35 100644 --- 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 { diff --git a/src/addon/messages/pages/group-conversations/group-conversations.scss b/src/addon/messages/pages/group-conversations/group-conversations.scss index d4dd9a821..517363205 100644 --- 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 { diff --git a/src/addon/mod/assign/components/submission/submission.scss b/src/addon/mod/assign/components/submission/submission.scss index d8d1d5aeb..8d3f9a458 100644 --- 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; } } diff --git a/src/addon/mod/data/data.scss b/src/addon/mod/data/data.scss index d18a66a08..1bce48a43 100644 --- 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 { diff --git a/src/addon/mod/forum/pages/discussion/discussion.scss b/src/addon/mod/forum/pages/discussion/discussion.scss index b4151f311..f9013b8f7 100644 --- 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 { diff --git a/src/addon/mod/lesson/pages/player/player.scss b/src/addon/mod/lesson/pages/player/player.scss index cb4a4caf9..750d00287 100644 --- 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; + } } } diff --git a/src/addon/mod/quiz/components/index/index.scss b/src/addon/mod/quiz/components/index/index.scss index 69ad61736..e359e8a0b 100644 --- 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; + } + } } } diff --git a/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss b/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss index 6576971e0..2896cb9d3 100644 --- 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; + } } } diff --git a/src/addon/mod/survey/components/index/index.scss b/src/addon/mod/survey/components/index/index.scss index e8bc5f985..e7af8521d 100644 --- 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 { diff --git a/src/addon/mod/wiki/components/index/index.scss b/src/addon/mod/wiki/components/index/index.scss index 49867d614..e320264d2 100644 --- 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; diff --git a/src/addon/qtype/ddmarker/component/ddmarker.scss b/src/addon/qtype/ddmarker/component/ddmarker.scss index d9197d122..cba59c4e7 100644 --- 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; diff --git a/src/addon/qtype/ddwtos/component/ddwtos.scss b/src/addon/qtype/ddwtos/component/ddwtos.scss index a594f55fa..33666ece9 100644 --- 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; } } diff --git a/src/addon/qtype/gapselect/component/gapselect.scss b/src/addon/qtype/gapselect/component/gapselect.scss index 53ceeba30..4698805aa 100644 --- 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; + } } } diff --git a/src/app/app.ios.scss b/src/app/app.ios.scss index 8eeaf67a3..d90e3da7b 100644 --- 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); diff --git a/src/app/app.md.scss b/src/app/app.md.scss index a97ce6e95..db1666048 100644 --- 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); diff --git a/src/app/app.scss b/src/app/app.scss index 594dccfe3..474ace86f 100644 --- 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 { diff --git a/src/app/app.wp.scss b/src/app/app.wp.scss index b91fb4f10..127e273b0 100644 --- 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); diff --git a/src/assets/lang/en.json b/src/assets/lang/en.json index d837ace11..f8d0edfe3 100644 --- a/src/assets/lang/en.json +++ b/src/assets/lang/en.json @@ -1779,6 +1779,10 @@ "core.settings.appready": "App ready", "core.settings.cannotsyncoffline": "Cannot synchronise offline.", "core.settings.cannotsyncwithoutwifi": "Cannot synchronise because the current settings only allow to synchronise when connected to Wi-Fi. Please connect to a Wi-Fi network.", + "core.settings.colorscheme": "Color Scheme", + "core.settings.colorscheme-auto": "Auto (based on system settings)", + "core.settings.colorscheme-dark": "Dark", + "core.settings.colorscheme-light": "Light", "core.settings.compilationinfo": "Compilation info", "core.settings.cordovadevicemodel": "Cordova device model", "core.settings.cordovadeviceosversion": "Cordova device OS version", diff --git a/src/components/icon/icon.scss b/src/components/icon/icon.scss index f909e876e..a80559c8e 100644 --- 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, diff --git a/src/components/iframe/iframe.scss b/src/components/iframe/iframe.scss index 82b13e078..0d0e5ca92 100644 --- 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 { diff --git a/src/components/loading/loading.scss b/src/components/loading/loading.scss index bc1faec9f..8b4136eea 100644 --- 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 { diff --git a/src/components/mark-required/mark-required.scss b/src/components/mark-required/mark-required.scss index 0453ba119..3b49f99ee 100644 --- 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; + } } diff --git a/src/components/progress-bar/progress-bar.scss b/src/components/progress-bar/progress-bar.scss index a385388e0..4092a6c3c 100644 --- 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; } diff --git a/src/components/rich-text-editor/rich-text-editor.scss b/src/components/rich-text-editor/rich-text-editor.scss index 9460297fd..d4ba94b06 100644 --- 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 { diff --git a/src/components/send-message-form/send-message-form.scss b/src/components/send-message-form/send-message-form.scss index ea9f7c367..cec94f20e 100644 --- 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; + } + } } \ No newline at end of file diff --git a/src/components/split-view/split-view.scss b/src/components/split-view/split-view.scss index 5c399b5e5..4d1fe88aa 100644 --- 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, diff --git a/src/components/timer/core-timer.html b/src/components/timer/core-timer.html index 729a8803e..cb59967c6 100644 --- a/src/components/timer/core-timer.html +++ b/src/components/timer/core-timer.html @@ -1,4 +1,4 @@ - + {{ timeLeft | coreSecondsToHMS }} diff --git a/src/components/timer/timer.scss b/src/components/timer/timer.scss index 89c7b2414..c29a8ec98 100644 --- 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 { diff --git a/src/config.json b/src/config.json index 30d79ac4b..4fd352e58 100644 --- a/src/config.json +++ b/src/config.json @@ -89,5 +89,6 @@ "statusbarlighttextandroid": true, "statusbarbgremotetheme": "#000000", "statusbarlighttextremotetheme": true, - "enableanalytics": false + "enableanalytics": false, + "forceColorScheme": "" } diff --git a/src/core/block/components/block/block.scss b/src/core/block/components/block/block.scss index 4029d7ffa..2ab0c8f20 100644 --- 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 + } + } } \ No newline at end of file diff --git a/src/core/constants.ts b/src/core/constants.ts index a6f31c3a5..ccd5f9c71 100644 --- a/src/core/constants.ts +++ b/src/core/constants.ts @@ -36,6 +36,7 @@ export class CoreConstants { static SETTINGS_REPORT_IN_BACKGROUND = 'CoreSettingsReportInBackground'; // @deprecated since 3.5.0 static SETTINGS_SEND_ON_ENTER = 'CoreSettingsSendOnEnter'; static SETTINGS_FONT_SIZE = 'CoreSettingsFontSize'; + static SETTINGS_COLOR_SCHEME = 'CoreSettingsColorScheme'; static SETTINGS_ANALYTICS_ENABLED = 'CoreSettingsAnalyticsEnabled'; // WS constants. diff --git a/src/core/course/components/module/core-course-module.html b/src/core/course/components/module/core-course-module.html index eae6da52c..0b0239685 100644 --- a/src/core/course/components/module/core-course-module.html +++ b/src/core/course/components/module/core-course-module.html @@ -1,4 +1,4 @@ - +

diff --git a/src/core/course/components/module/module.scss b/src/core/course/components/module/module.scss index c08daa491..739d79166 100644 --- 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:active, - .core-not-clickable.activated { - background-color: $list-background-color; + .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: $core-dark-item-bg-color; + } } } diff --git a/src/core/grades/components/course/course.scss b/src/core/grades/components/course/course.scss index 8c0ee2091..5a3a9eb4e 100644 --- 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; + } } } diff --git a/src/core/login/login.scss b/src/core/login/login.scss new file mode 100644 index 000000000..d0bc7225b --- /dev/null +++ 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; + } +} diff --git a/src/core/login/pages/credentials/credentials.html b/src/core/login/pages/credentials/credentials.html index dcadd2e23..ee0a1c62c 100644 --- a/src/core/login/pages/credentials/credentials.html +++ b/src/core/login/pages/credentials/credentials.html @@ -36,11 +36,11 @@ -
+ - + - +