MOBILE-4594 styles: Change html to :root as it has more specificity

src/addons/calendar/components/calendar/calendar.scss

@@ -150,6 +150,6 @@
     }
 }
 
-:host-context(html.dark) {
+:host-context(:root.dark) {
     --addon-calendar-blank-day-background-color: var(--gray-900);
 }

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

@@ -40,7 +40,7 @@
     }
 }
 
-:host-context(html.dark) ::ng-deep {
+:host-context(:root.dark) ::ng-deep {
     ion-item.submissioneditable p {
         color: var(--danger-tint);
     }

src/addons/mod/bigbluebuttonbn/components/index/index.scss

@@ -24,7 +24,7 @@
     }
 }
 
-:host-context(html.dark) {
+:host-context(:root.dark) {
     --recording-details-background: var(--gray-800);
     --recording-details-border: var(--gray-500);
 }

src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.scss

@@ -35,7 +35,7 @@
     }
 }
 
-:host-context(html.dark) {
+:host-context(:root.dark) {
     .addon-mod_h5pactivity-result-table-row.item:nth-child(even) {
         --background: var(--gray-900);
     }

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

@@ -2,7 +2,7 @@
    --background-odd: var(--light);
 }
 
-:host-context(html.dark) {
+:host-context(:root.dark) {
    --background-odd: var(--medium);
 }
 

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

@@ -25,7 +25,7 @@
     }
 }
 
-:host-context(html.dark) {
+:host-context(:root.dark) {
     --grid-background: var(--gray-900);
     --even-background: var(--medium);
 }

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

@@ -56,7 +56,7 @@ $addon-mod-wiki-toc-level-padding:    12px !default;
     }
 }
 
-:host-context(html.dark) {
+:host-context(:root.dark) {
     --addon-mod-wiki-newentry-link-color: var(--danger-tint);
     --addon-mod-wiki-toc-background-color: var(--medium);
 }

src/core/components/empty-box/empty-box.scss

@@ -38,7 +38,7 @@
     }
 }
 
-:host-context(html.dark) {
+:host-context(:root.dark) {
     &.dimmed {
         --text-color: var(--gray-300);
     }

src/core/components/mod-icon/mod-icon.scss

@@ -78,7 +78,7 @@
     --margin-end: 12px;
 }
 
-:host-context(html.dark) {
+:host-context(:root.dark) {
     &.version_40:not(.colorize),
     &.version_current {
         background-color: var(--white);

src/core/features/course/components/module-navigation/module-navigation.scss

@@ -50,6 +50,6 @@
     height: 0 !important;
 }
 
-:host-context(html.dark) {
+:host-context(:root.dark) {
     --button-color: var(--gray-100);
 }

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

@@ -198,7 +198,7 @@
 }
 
 
-:host-context(html.dark) {
+:host-context(:root.dark) {
     .activity-description-availabilityinfo {
         .core-module-availabilityinfo {
             background: var(--gray-800);

src/core/features/courses/components/course-list-item/course-list-item.scss

@@ -29,7 +29,7 @@
 }
 
 
-:host-context(html.dark) {
+:host-context(:root.dark) {
     --button-background: rgb(0 0 0 / 30%);
 }
 

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

@@ -6,7 +6,7 @@
     --background: var(--rte-editor-background);
 }
 
-:host-context(html.dark) {
+:host-context(:root.dark) {
     --color: var(--white);
     --button-color: var(--gray-200);
     --button-active-color: var(--gray-500);

src/core/features/grades/pages/course/course.scss

@@ -5,7 +5,7 @@
     --core-table-border-color: var(--stroke);
 }
 
-:host-context(html.dark) {
+:host-context(:root.dark) {
     --icon-color: var(--gray-200);
 }
 

src/core/features/login/login.scss

@@ -166,7 +166,7 @@
 
 }
 
-:host-context(html.dark) {
+:host-context(:root.dark) {
     @if ($core-login-button-outline-dark) {
         form ion-button {
             --background: white;

src/core/features/search/components/global-search-filters/global-search-filters.scss

@@ -11,6 +11,6 @@
     }
 }
 
-:host-context(html.dark) {
+:host-context(:root.dark) {
     --heading-text-color: var(--gray-400);
 }

src/core/features/search/components/global-search-result/global-search-result.scss

@@ -91,7 +91,7 @@
 
 }
 
-:host-context(html.dark) ion-item {
+:host-context(:root.dark) ion-item {
     --core-global-search-result-content-color: var(--gray-400);
     --core-global-search-result-context-color: var(--gray-500);
 }

src/core/features/usertours/components/user-tour/user-tour.scss

@@ -61,6 +61,6 @@
 
 }
 
-:host-context(html.dark) {
+:host-context(:root.dark) {
     --popover-background: var(--gray-700);
 }

src/theme/components/error-accordion.scss

@@ -143,6 +143,6 @@
 
 }
 
-html.dark .core-error-accordion {
+:root.dark .core-error-accordion {
     --background-color: var(--gray-700);
 }

src/theme/components/format-text.scss

@@ -8,7 +8,7 @@ core-format-text {
     --core-format-text-viewer-icon-background: rgb(255 255 255 / 50%);
 }
 
-html.dark core-format-text {
+:root.dark core-format-text {
     --core-format-text-viewer-icon-background: rgb(0 0 0 / 50%);
 }
 
@@ -378,7 +378,7 @@ ion-header.ios h1 core-format-text {
     }
 }
 
-html.dark core-format-text select,
+:root.dark core-format-text select,
-html.dark core-rich-text-editor .core-rte-editor select {
+:root.dark core-rich-text-editor .core-rte-editor select {
 	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
 }

src/theme/helpers/custom.mixins.scss

@@ -297,7 +297,7 @@
 @mixin darkmode() {
     $root: #{&};
 
-    @at-root #{add-root-selector($root, "html.dark")} {
+    @at-root #{add-root-selector($root, ":root.dark")} {
         @content;
     }
 }

src/theme/theme.base.scss

@@ -1,13 +1,13 @@
 @import "./globals.scss";
 
-html.force-safe-area-margins {
+:root.force-safe-area-margins {
     --ion-safe-area-left: 40px;
     --ion-safe-area-right: 40px;
     --ion-safe-area-top: 40px;
     --ion-safe-area-bottom: 40px;
 }
 
-html {
+:root {
     --zoom-level: 100%;
     zoom: var(--zoom-level);
 
@@ -21,7 +21,7 @@ a {
     cursor: pointer;
 }
 
-html[dir=rtl] {
+:root[dir=rtl] {
     --rotate-expandable: rotate(-90deg);
 }
 

src/theme/theme.custom.scss

@@ -8,7 +8,7 @@
  * Light Theme
  * -------------------------------------------
  */
-html {
+:root {
 
 }
 
@@ -16,6 +16,6 @@ html {
  * Dark Theme
  * -------------------------------------------
  */
-html.dark {
+:root.dark {
 
 }

src/theme/theme.dark.scss

@@ -5,7 +5,7 @@
  * http://ionicframework.com/docs/theming/
  */
 
-html.dark {
+:root.dark {
 
     // Ionic shades, defined for ionic internal use.
     --ion-color-step-0:    var(--black);

src/theme/theme.design-system.scss

@@ -2,7 +2,7 @@
 @import "theme.light.scss";
 @import "theme.dark.scss";
 
-html {
+:root {
     // Add serif fallback font for km language in some devices.
     --ion-font-family: var(--ion-default-font), serif;
 
@@ -243,7 +243,7 @@ html {
 }
 
 /** @deprecated since 4.3 **/
-html {
+:root {
     --small-radius: var(--mdl-shape-borderRadius-xs);
     --medium-radius: var(--mdl-shape-borderRadius-sm);
     --big-radius: var(--mdl-shape-borderRadius-lg);
@@ -251,7 +251,7 @@ html {
 }
 
 /** @deprecated since 4.4 **/
-html {
+:root {
     --font-size-normal: var(--mdl-typography-fontSize-md);
     --a11y-min-target-size: var(--a11y-sizing-minTargetSize);
     --a11y-focus-width: var(--a11y-shadow-focus-boxShadowSpread);

src/theme/theme.light.scss

@@ -5,7 +5,7 @@
  * http://ionicframework.com/docs/theming/
  */
 
-html {
+:root {
 
     // Color palette
     --black: #{$black};

src/theme/theme.scss

@@ -29,7 +29,7 @@
 @import "components/videojs.scss";
 
 /* Ionic components overrides */
-html {
+:root {
     @import "components/ion-accordion.scss";
     @import "components/ion-action-sheet.scss";
     @import "components/ion-alert.scss";