Merge pull request #1783 from IgniteUI/sivanova/dark-toggle

Fix toggle text visibility in the dark theme

Author: zdrawku

src/app/interactions/toggle/toggle-sample-1/toggle-sample-1.component.scss

@@ -2,25 +2,38 @@
     width: 150px;
     margin-bottom: 15px;
 }
+
 .toggle-content{
     display: flex;
     width: 320px;
     height: 260px;
 }
-.toggle-section{
+
+.toggle-section {
     flex-flow: row wrap;
     display: flex;
     width: 100%;
     height: 100%;
     padding-top: 10px;
-    background-color: white;
+    background-color: white ;
     font-size: 1.7em;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+
+    .dark-theme & {
+        background-color: #111;
+    }
+
+    .custom-body & {
+        color: var(--igx-surface-500-contrast);
+        background-color: var(--igx-surface-500);
+    }
 }
-ul{
+
+ul {
     padding: 20px;
 }
-li{
+
+li {
     margin-bottom: 15px;
     list-style-type: none;
-}
+}

src/app/interactions/toggle/toggle-sample-1/toggle-sample-1.component.ts

@@ -1,7 +1,8 @@
-import { Component, OnInit, ViewChild } from "@angular/core";
+import { Component, OnInit, ViewChild, ViewEncapsulation } from "@angular/core";
 import { IgxToggleDirective } from "igniteui-angular";
 
 @Component({
+  encapsulation: ViewEncapsulation.None,
   selector: "app-toggle-sample-1",
   styleUrls: ["./toggle-sample-1.component.scss"],
   templateUrl: "./toggle-sample-1.component.html"

src/app/interactions/toggle/toggle-sample-2/toggle-sample-2.component.scss

@@ -2,11 +2,13 @@
     width: 150px;
     margin-bottom: 15px;
 }
+
 .toggle-content{
     display: flex;
     width: 320px;
     height: 260px;
 }
+
 .toggle-section{
     flex-flow: row wrap;
     display: flex;
@@ -15,9 +17,14 @@
     justify-content: center;
     align-items: center;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+
+    .dark-theme & {
+        background-color: #111;
+    }
 }
+
 img{
     width: 300px;
     height: 240px;
 
-}
+}

src/app/interactions/toggle/toggle-sample-2/toggle-sample-2.component.ts

@@ -1,7 +1,8 @@
-import { Component, OnInit, ViewChild } from "@angular/core";
+import { Component, OnInit, ViewChild, ViewEncapsulation } from "@angular/core";
 import { IgxToggleActionDirective, IgxToggleDirective } from "igniteui-angular";
 
 @Component({
+  encapsulation: ViewEncapsulation.None,
   selector: "app-toggle-sample-2",
   styleUrls: ["./toggle-sample-2.component.scss"],
   templateUrl: "./toggle-sample-2.component.html"

src/app/interactions/toggle/toggle-sample-3/toggle-sample-3.component.scss

@@ -2,11 +2,13 @@
     width: 150px;
     margin-bottom: 15px;
 }
+
 .toggle-content{
     display: flex;
     width: 320px;
     height: 260px;
 }
+
 .toggle-section{
     flex-flow: row wrap;
     display: flex;
@@ -16,7 +18,17 @@
     align-items: center;
     text-align: center;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+
+    .dark-theme & {
+        background-color: #111;
+    }
+
+    .custom-body & {
+        color: var(--igx-surface-500-contrast);
+        background-color: var(--igx-surface-500);
+    }
 }
+
 h3{
     margin: 0;
-}
+}

src/app/interactions/toggle/toggle-sample-3/toggle-sample-3.component.ts

@@ -1,6 +1,7 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, ViewEncapsulation } from "@angular/core";
 
 @Component({
+  encapsulation: ViewEncapsulation.None,
   selector: "app-toggle-sample-3",
   styleUrls: ["./toggle-sample-3.component.scss"],
   templateUrl: "./toggle-sample-3.component.html"

src/app/interactions/toggle/toggle.component.scss

@@ -16,4 +16,13 @@
     background-color: #ffffff;
     align-items: center;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-}
+
+    .dark-theme & {
+        background-color: #111;
+    }
+
+    .custom-body & {
+        color: var(--igx-surface-500-contrast);
+        background-color: var(--igx-surface-500);
+    }
+}

src/app/interactions/toggle/toggle.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewChild } from "@angular/core";
+import { Component, ElementRef, ViewChild, ViewEncapsulation } from "@angular/core";
 
 import {
     CloseScrollStrategy,
@@ -9,6 +9,7 @@ import {
 } from "igniteui-angular";
 
 @Component({
+  encapsulation: ViewEncapsulation.None,
   selector: "app-toggle",
   styleUrls: ["./toggle.component.scss"],
   templateUrl: "./toggle.component.html"