From 716f76f9693c9a5cc19186ef80ac9b334242c303 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Tue, 17 Sep 2019 13:03:18 +0200 Subject: [PATCH 1/2] MOBILE-3144 settings: Add color scheme setting --- scripts/langindex.json | 4 ++ src/assets/lang/en.json | 4 ++ src/config.json | 3 +- src/core/constants.ts | 1 + src/core/settings/lang/en.json | 4 ++ src/core/settings/pages/general/general.html | 6 +++ src/core/settings/pages/general/general.ts | 32 +++++++++++- src/core/settings/providers/helper.ts | 52 +++++++++++++++++++- src/core/settings/settings.module.ts | 6 ++- src/providers/utils/dom.ts | 5 -- 10 files changed, 107 insertions(+), 10 deletions(-) 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/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/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/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/settings/lang/en.json b/src/core/settings/lang/en.json index f0e09d02d..32a82c6cc 100644 --- a/src/core/settings/lang/en.json +++ b/src/core/settings/lang/en.json @@ -3,6 +3,10 @@ "appready": "App ready", "cannotsyncoffline": "Cannot synchronise offline.", "cannotsyncwithoutwifi": "Cannot synchronise because the current settings only allow to synchronise when connected to Wi-Fi. Please connect to a Wi-Fi network.", + "colorscheme": "Color Scheme", + "colorscheme-auto": "Auto (based on system settings)", + "colorscheme-dark": "Dark", + "colorscheme-light": "Light", "compilationinfo": "Compilation info", "cordovadevicemodel": "Cordova device model", "cordovadeviceosversion": "Cordova device OS version", diff --git a/src/core/settings/pages/general/general.html b/src/core/settings/pages/general/general.html index 0e1418813..34f0d2376 100644 --- a/src/core/settings/pages/general/general.html +++ b/src/core/settings/pages/general/general.html @@ -20,6 +20,12 @@ + +

{{ 'core.settings.colorscheme' | translate }}

 + + {{ 'core.settings.colorscheme-' + scheme | translate }} + +

{{ 'core.settings.enablerichtexteditor' | translate }}

diff --git a/src/core/settings/pages/general/general.ts b/src/core/settings/pages/general/general.ts index 9befe638a..720e8fbdc 100644 --- a/src/core/settings/pages/general/general.ts +++ b/src/core/settings/pages/general/general.ts @@ -24,6 +24,7 @@ import { CoreDomUtilsProvider } from '@providers/utils/dom'; import { CoreLocalNotificationsProvider } from '@providers/local-notifications'; import { CorePushNotificationsProvider } from '@core/pushnotifications/providers/pushnotifications'; import { CoreConfigConstants } from '../../../../configconstants'; +import { CoreSettingsHelper } from '../../providers/helper'; /** * Page that displays the general settings. @@ -44,11 +45,13 @@ export class CoreSettingsGeneralPage { debugDisplay: boolean; analyticsSupported: boolean; analyticsEnabled: boolean; + colorSchemes = []; + selectedScheme: string; constructor(appProvider: CoreAppProvider, private configProvider: CoreConfigProvider, fileProvider: CoreFileProvider, private eventsProvider: CoreEventsProvider, private langProvider: CoreLangProvider, private domUtils: CoreDomUtilsProvider, private pushNotificationsProvider: CorePushNotificationsProvider, - localNotificationsProvider: CoreLocalNotificationsProvider) { + localNotificationsProvider: CoreLocalNotificationsProvider, private settingsHelper: CoreSettingsHelper) { // Get the supported languages. const languages = CoreConfigConstants.languages; @@ -59,6 +62,22 @@ export class CoreSettingsGeneralPage { }); } + if (!CoreConfigConstants.forceColorScheme) { + let defaultColorScheme = 'light'; + + if (window.matchMedia('(prefers-color-scheme: dark)').matches || + window.matchMedia('(prefers-color-scheme: light)').matches) { + this.colorSchemes.push('auto'); + defaultColorScheme = 'auto'; + } + this.colorSchemes.push('light'); + this.colorSchemes.push('dark'); + + this.configProvider.get(CoreConstants.SETTINGS_COLOR_SCHEME, defaultColorScheme).then((scheme) => { + this.selectedScheme = scheme; + }); + } + // Sort them by name. this.languages.sort((a, b) => { return a.name.localeCompare(b.name); @@ -126,10 +145,19 @@ export class CoreSettingsGeneralPage { return fontSize; }); - document.documentElement.style.fontSize = this.selectedFontSize + '%'; + + this.settingsHelper.setFontSize(this.selectedFontSize); this.configProvider.set(CoreConstants.SETTINGS_FONT_SIZE, this.selectedFontSize); } + /** + * Called when a new color scheme is selected. + */ + colorSchemeChanged(): void { + this.settingsHelper.setColorScheme(this.selectedScheme); + this.configProvider.set(CoreConstants.SETTINGS_COLOR_SCHEME, this.selectedScheme); + } + /** * Called when the rich text editor is enabled or disabled. */ diff --git a/src/core/settings/providers/helper.ts b/src/core/settings/providers/helper.ts index 26ffda777..8579f96e0 100644 --- a/src/core/settings/providers/helper.ts +++ b/src/core/settings/providers/helper.ts @@ -20,6 +20,9 @@ import { CoreFilepoolProvider } from '@providers/filepool'; import { CoreLoggerProvider } from '@providers/logger'; import { CoreSitesProvider } from '@providers/sites'; import { CoreUtilsProvider } from '@providers/utils/utils'; +import { CoreConstants } from '@core/constants'; +import { CoreConfigProvider } from '@providers/config'; +import { CoreConfigConstants } from '../../../configconstants'; import { TranslateService } from '@ngx-translate/core'; /** @@ -32,7 +35,8 @@ export class CoreSettingsHelper { constructor(loggerProvider: CoreLoggerProvider, private appProvider: CoreAppProvider, private cronDelegate: CoreCronDelegate, private eventsProvider: CoreEventsProvider, private filePoolProvider: CoreFilepoolProvider, - private sitesProvider: CoreSitesProvider, private utils: CoreUtilsProvider, private translate: TranslateService) { + private sitesProvider: CoreSitesProvider, private utils: CoreUtilsProvider, private translate: TranslateService, + private configProvider: CoreConfigProvider) { this.logger = loggerProvider.getInstance('CoreSettingsHelper'); } @@ -175,4 +179,50 @@ export class CoreSettingsHelper { return syncPromise; } + + /** + * Init Settings related to DOM. + */ + initDomSettings(): void { + // Set the font size based on user preference. + this.configProvider.get(CoreConstants.SETTINGS_FONT_SIZE, CoreConfigConstants.font_sizes[0].toString()).then((fontSize) => { + this.setFontSize(fontSize); + }); + + if (!!CoreConfigConstants.forceColorScheme) { + this.setColorScheme(CoreConfigConstants.forceColorScheme); + } else { + let defaultColorScheme = 'light'; + + if (window.matchMedia('(prefers-color-scheme: dark)').matches || + window.matchMedia('(prefers-color-scheme: light)').matches) { + defaultColorScheme = 'auto'; + } + + this.configProvider.get(CoreConstants.SETTINGS_COLOR_SCHEME, defaultColorScheme).then((scheme) => { + this.setColorScheme(scheme); + }); + } + } + + /** + * Set document default font size. + * + * @param fontSize Font size in percentage. + */ + setFontSize(fontSize: string): void { + document.documentElement.style.fontSize = fontSize + '%'; + } + + /** + * Set body color scheme. + * + * @param colorScheme Name of the color scheme. + */ + setColorScheme(colorScheme: string): void { + document.body.classList.remove('scheme-light'); + document.body.classList.remove('scheme-dark'); + document.body.classList.remove('scheme-auto'); + document.body.classList.add('scheme-' + colorScheme); + } } diff --git a/src/core/settings/settings.module.ts b/src/core/settings/settings.module.ts index 6098d4c91..25693befa 100644 --- a/src/core/settings/settings.module.ts +++ b/src/core/settings/settings.module.ts @@ -28,4 +28,8 @@ import { CoreSettingsHelper } from './providers/helper'; CoreSettingsHelper ] }) -export class CoreSettingsModule {} +export class CoreSettingsModule { + constructor(settingsHelper: CoreSettingsHelper) { + settingsHelper.initDomSettings(); + } +} diff --git a/src/providers/utils/dom.ts b/src/providers/utils/dom.ts index fb91e5532..9de6e424d 100644 --- a/src/providers/utils/dom.ts +++ b/src/providers/utils/dom.ts @@ -22,7 +22,6 @@ import { TranslateService } from '@ngx-translate/core'; import { CoreTextUtilsProvider } from './text'; import { CoreAppProvider } from '../app'; import { CoreConfigProvider } from '../config'; -import { CoreConfigConstants } from '../../configconstants'; import { CoreUrlUtilsProvider } from './url'; import { CoreFileProvider } from '@providers/file'; import { CoreConstants } from '@core/constants'; @@ -73,10 +72,6 @@ export class CoreDomUtilsProvider { configProvider.get(CoreConstants.SETTINGS_DEBUG_DISPLAY, false).then((debugDisplay) => { this.debugDisplay = !!debugDisplay; }); - // Set the font size based on user preference. - configProvider.get(CoreConstants.SETTINGS_FONT_SIZE, CoreConfigConstants.font_sizes[0]).then((fontSize) => { - document.documentElement.style.fontSize = fontSize + '%'; - }); } /** From 7f882a67aef3e7c2a46a313d1959c51b3e80e0de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Thu, 12 Sep 2019 16:40:42 +0200 Subject: [PATCH 2/2] MOBILE-3144 theme: Dark mode --- .../events/addon-block-timeline-events.html | 2 +- .../components/calendar/calendar.scss | 6 + .../messages/pages/discussion/discussion.scss | 9 +- .../group-conversations.scss | 3 + .../components/submission/submission.scss | 4 + src/addon/mod/data/data.scss | 11 +- .../forum/pages/discussion/discussion.scss | 3 + src/addon/mod/lesson/pages/player/player.scss | 15 +++ .../mod/quiz/components/index/index.scss | 13 ++ .../navigation-modal/navigation-modal.scss | 8 ++ .../mod/survey/components/index/index.scss | 6 + .../mod/wiki/components/index/index.scss | 14 +- .../qtype/ddmarker/component/ddmarker.scss | 1 + src/addon/qtype/ddwtos/component/ddwtos.scss | 7 + .../qtype/gapselect/component/gapselect.scss | 4 + src/app/app.ios.scss | 4 + src/app/app.md.scss | 4 + src/app/app.scss | 41 ++++++ src/app/app.wp.scss | 4 + src/components/icon/icon.scss | 6 + src/components/iframe/iframe.scss | 1 + src/components/loading/loading.scss | 3 + .../mark-required/mark-required.scss | 4 + src/components/progress-bar/progress-bar.scss | 7 + .../rich-text-editor/rich-text-editor.scss | 26 ++++ .../send-message-form/send-message-form.scss | 5 + src/components/split-view/split-view.scss | 4 + src/components/timer/core-timer.html | 2 +- src/components/timer/timer.scss | 4 +- src/core/block/components/block/block.scss | 6 + .../components/module/core-course-module.html | 2 +- src/core/course/components/module/module.scss | 43 +++++- src/core/grades/components/course/course.scss | 14 ++ src/core/login/login.scss | 74 +++++++++++ .../login/pages/credentials/credentials.html | 6 +- .../login/pages/credentials/credentials.scss | 41 ------ src/core/login/pages/init/init.scss | 2 + src/core/login/pages/reconnect/reconnect.html | 6 +- src/core/login/pages/reconnect/reconnect.scss | 46 +------ src/core/login/pages/site/site.scss | 36 +---- src/core/mainmenu/pages/more/more.scss | 43 +++++- src/core/user/pages/profile/profile.scss | 13 +- src/theme/dark.scss | 123 ++++++++++++++++++ src/theme/variables.scss | 46 +++++++ 44 files changed, 586 insertions(+), 136 deletions(-) create mode 100644 src/core/login/login.scss create mode 100644 src/theme/dark.scss 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/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/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/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 @@ -
+ - + - +