Refactor on app css

primefaces · Oct 18, 2019 · d8ab5d6 · d8ab5d6
1 parent 6734f7d
commit d8ab5d6
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 8 deletions.
diff --git a/src/App.js b/src/App.js
@@ -166,18 +166,15 @@ export class App extends Component {
         let themeElement = document.getElementById('theme-link');
         themeElement.setAttribute('href', themeElement.getAttribute('href').replace(this.theme, theme));
         this.theme = theme;
+        const hasBodyDarkTheme = this.hasClass(document.body, 'dark-theme');
 
         if (dark) {
-            if (!this.darkDemoStyle) {
-                this.darkDemoStyle = document.createElement('style');
-                this.darkDemoStyle.type = 'text/css';
-                this.darkDemoStyle.innerHTML = '.implementation { background-color: #3f3f3f !important; color: #dedede !important} .implementation > h3, .implementation > h4{ color: #dedede !important}';
-                document.body.appendChild(this.darkDemoStyle);
+            if (!hasBodyDarkTheme) {
+                this.addClass(document.body, 'dark-theme');
             }
         }
-        else if(this.darkDemoStyle) {
-            document.body.removeChild(this.darkDemoStyle);
-            this.darkDemoStyle = null;
+        else if(hasBodyDarkTheme) {
+            this.removeClass(document.body, 'dark-theme');
         }
 
         this.setState({
@@ -187,6 +184,27 @@ export class App extends Component {
         event.preventDefault();
     }
 
+    addClass(element, className) {
+        if (element.classList)
+            element.classList.add(className);
+        else
+            element.className += ' ' + className;
+    }
+
+    removeClass(element, className) {
+        if (element.classList)
+            element.classList.remove(className);
+        else
+            element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+    }
+
+    hasClass(element, className) {
+        if (element.classList)
+            return element.classList.contains(className);
+        else
+            return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
+    }
+
     toggleMenu() {
         this.setState({
             mobileMenuActive: !this.state.mobileMenuActive

diff --git a/src/sass/App.scss b/src/sass/App.scss
@@ -645,6 +645,7 @@ body {
                 .p-tabview-panels {
                     background: transparent;
                     border: 0 none;
+                    color: #333333;
                 }
             }
         }
@@ -1538,4 +1539,36 @@ pre[class*="language-"] {
     .p-col-m {
         display: inline-block;
     }
+}
+
+/* Dark Theme such as luna-amber, luna-blue, luna-green and luna-pink */
+.dark-theme {
+    #layout-content {        
+        .content-section {
+            &.implementation {
+                background-color: #3f3f3f !important; 
+                color: #dedede !important;
+
+                > h3,
+                > h4 {
+                    color: #dedede !important
+                }
+            }
+        }
+
+        .carousel-demo {
+            .p-carousel {
+                .p-carousel-content {
+                    .p-carousel-item {
+                        .car-details {
+                            > .p-grid {
+                                border: 1px solid #191919;
+                                background-color: #323232;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
 }