Refactor on App

src/AppTopBar.vue

@@ -56,23 +56,38 @@ export default {
             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.hideThemesMenu();
             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);
+        },
         toggleThemesMenu(event) {
             this.themesMenuVisible = !this.themesMenuVisible;
             event.preventDefault();

src/assets/styles/app.scss

@@ -649,6 +649,7 @@ body {
                 .p-tabview-panels {
                     background: transparent;
                     border: 0 none;
+                    color: #484848;
                 }
             }
         }
@@ -1133,4 +1134,17 @@ pre[class*="language-"] code {
 .p-toast.p-toast-topright,
 .p-toast.p-toast-topleft {
     top: 100px;
+}
+
+/* Dark Theme such as luna-amber, luna-blue, luna-green and luna-pink */
+.dark-theme {
+    .implementation { 
+        background-color: #3f3f3f !important; 
+        color: #dedede !important;
+
+        > h3,
+        > h4 {
+            color: #dedede !important
+        }
+    }
 }