Refactored theme switcher and layout cosmetics

src/App.vue

@@ -10,9 +10,9 @@
             </div>
         </a>
 
-        <app-topbar @menubutton-click="onMenuButtonClick"/>
+        <app-topbar @menubutton-click="onMenuButtonClick" @change-theme="changeTheme" :theme="theme" />
         <app-menu :active="sidebarActive" />
-        <app-configurator />
+        <app-configurator @change-theme="changeTheme" :theme="theme" />
         <div :class="['layout-mask', {'layout-mask-active': sidebarActive}]" @click="onMaskClick"></div>
         <div class="layout-content">
             <router-view/>
@@ -35,7 +35,8 @@ export default {
     data() {
         return {
             sidebarActive: false,
-            newsActive: false
+            newsActive: false,
+            theme: 'saga-blue'
         }
     },
     watch: {
@@ -62,6 +63,41 @@ export default {
         },
         hideNews() {
             this.newsActive = false;
+        },
+        changeTheme(event) {
+            let themeElement = document.getElementById('theme-link');
+            themeElement.setAttribute('href', themeElement.getAttribute('href').replace(this.theme, event.theme));
+            this.theme = event.theme;
+
+            if (event.dark) {
+                this.addClass(document.body, event.dark);
+            }
+            else {
+                this.removeClass(document.body, 'dark-theme');
+                this.removeClass(document.body, 'dark-theme-alt');
+            }
+
+            this.activeMenuIndex = null;
+        },
+        addClass(element, className) {
+            if (!this.hasClass(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);
         }
     },
     components: {

src/AppConfigurator.vue

@@ -12,7 +12,64 @@
                 <div class="free-themes">
                     <h1 style="margin-top: 0">FREE THEMES</h1>
                     <p>Built-in component themes created by the <a href="https://www.primefaces.org/designer/primevue">PrimeVue Theme Designer</a>.</p>
+                    
                     <div class="p-grid">
+                        <div class="p-col-3">
+                            <button class="p-link">
+                                <img src="./assets/images/layouts/themeswitcher-saga-blue.png" alt="Saga Blue" @click="changeTheme($event, 'saga-blue', false)"/>
+                                <i class="pi pi-check" v-if="theme === 'saga-blue'" />
+                            </button>
+                            <span>Saga-Blue</span>
+                        </div>
+                        <div class="p-col-3">
+                            <button class="p-link">
+                                <img src="./assets/images/layouts/themeswitcher-saga-green.png" alt="Saga Green" @click="changeTheme($event, 'saga-green', false)"/>
+                                <i class="pi pi-check" v-if="theme === 'saga-green'" />
+                            </button>
+                            <span>Saga-Green</span>
+                        </div>
+                        <div class="p-col-3">
+                            <button class="p-link">
+                                <img src="./assets/images/layouts/themeswitcher-saga-purple.png" alt="Saga Purple" @click="changeTheme($event, 'saga-purple', false)"/>
+                                <i class="pi pi-check" v-if="theme === 'saga-purple'" />
+                            </button>
+                            <span>Saga-Purple</span>
+                        </div>
+                        <div class="p-col-3">
+                            <button class="p-link">
+                                <img src="./assets/images/layouts/themeswitcher-saga-orange.png" alt="Saga Orange" @click="changeTheme($event, 'saga-orange', false)"/>
+                                <i class="pi pi-check" v-if="theme === 'saga-orange'" />
+                            </button>
+                            <span>Saga-Orange</span>
+                        </div>
+                        <div class="p-col-3">
+                            <button class="p-link">
+                                <img src="./assets/images/layouts/themeswitcher-vela-blue.png" alt="Vela Blue" @click="changeTheme($event, 'vela-blue', 'dark-theme-alt')"/>
+                                <i class="pi pi-check" v-if="theme === 'vela-blue'" />
+                            </button>
+                            <span>Vela-Blue</span>
+                        </div>
+                        <div class="p-col-3">
+                            <button class="p-link">
+                                <img src="./assets/images/layouts/themeswitcher-vela-green.png" alt="Vela Green" @click="changeTheme($event, 'vela-green', 'dark-theme-alt')"/>
+                                <i class="pi pi-check" v-if="theme === 'vela-green'" />
+                            </button>
+                            <span>Vela-Green</span>
+                        </div>
+                        <div class="p-col-3">
+                            <button class="p-link">
+                                <img src="./assets/images/layouts/themeswitcher-vela-purple.png" alt="Vela Purple" @click="changeTheme($event, 'vela-purple', 'dark-theme-alt')"/>
+                                <i class="pi pi-check" v-if="theme === 'vela-blue'" />
+                            </button>
+                            <span>Vela-Purple</span>
+                        </div>
+                        <div class="p-col-3">
+                            <button class="p-link">
+                                <img src="./assets/images/layouts/themeswitcher-vela-orange.png" alt="Vela Orange" @click="changeTheme($event, 'vela-orange', 'dark-theme-alt')"/>
+                                <i class="pi pi-check" v-if="theme === 'vela-orange'" />
+                            </button>
+                            <span>Vela-Orange</span>
+                        </div>
                         <div class="p-col-3">
                             <button class="p-link">
                                 <img src="./assets/images/layouts/themeswitcher-nova-light.png" alt="Nova Light" @click="changeTheme($event, 'nova-light', false)"/>
@@ -43,28 +100,28 @@
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/layouts/themeswitcher-luna-blue.png" alt="Luna Blue" @click="changeTheme($event, 'luna-blue', false)"/>
+                                <img src="./assets/images/layouts/themeswitcher-luna-blue.png" alt="Luna Blue" @click="changeTheme($event, 'luna-blue', 'dark-theme')"/>
                                 <i class="pi pi-check" v-if="theme === 'luna-blue'" />
                             </button>
                             <span>Luna-Blue</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/layouts/themeswitcher-luna-green.png" alt="Luna Green" @click="changeTheme($event, 'luna-green', false)"/>
+                                <img src="./assets/images/layouts/themeswitcher-luna-green.png" alt="Luna Green" @click="changeTheme($event, 'luna-green', 'dark-theme')"/>
                                 <i class="pi pi-check" v-if="theme === 'luna-green'" />
                             </button>
                             <span>Luna-Green</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/layouts/themeswitcher-luna-amber.png" alt="Luna Amber" @click="changeTheme($event, 'luna-amber', false)" target="_blank"/>
+                                <img src="./assets/images/layouts/themeswitcher-luna-amber.png" alt="Luna Amber" @click="changeTheme($event, 'luna-amber', 'dark-theme')" target="_blank"/>
                                 <i class="pi pi-check" v-if="theme === 'luna-amber'" />
                             </button>
                             <span>Luna-Amber</span>
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/layouts/themeswitcher-luna-pink.png" alt="Luna Pink" @click="changeTheme($event, 'luna-pink', false)" target="_blank"/>
+                                <img src="./assets/images/layouts/themeswitcher-luna-pink.png" alt="Luna Pink" @click="changeTheme($event, 'luna-pink', 'dark-theme')" target="_blank"/>
                                 <i class="pi pi-check" v-if="theme === 'luna-pink'" />
                             </button>
                             <span>Luna-Pink</span>
@@ -130,10 +187,12 @@
 import DomHandler from './components/utils/DomHandler';
 
 export default {
+    props: {
+        theme: String
+    },
     data() {
         return {
-            active: false,
+            active: false
-            theme: 'nova-light'
         }
     },
     outsideClickListener: null,
@@ -166,20 +225,7 @@ export default {
             event.preventDefault();
         },
         changeTheme(event, theme, dark) {
-            let themeElement = document.getElementById('theme-link');
+            this.$emit('change-theme', {theme: theme, dark: dark});
-            themeElement.setAttribute('href', themeElement.getAttribute('href').replace(this.theme, theme));
-            this.theme = theme;
-            const hasBodyDarkTheme = DomHandler.hasClass(document.body, 'dark-theme');
-
-            if (dark) {
-                if (!hasBodyDarkTheme) {
-                    this.addClass(document.body, 'dark-theme');
-                }
-            }
-            else if(hasBodyDarkTheme) {
-                this.removeClass(document.body, 'dark-theme');
-            }
-
             event.preventDefault();
         },
         bindOutsideClickListener() {
@@ -200,7 +246,7 @@ export default {
         },
         isOutsideClicked(event) {
             return !(this.$el.isSameNode(event.target) || this.$el.contains(event.target));
-        },
+        }
     }
 }
 </script>

src/AppFooter.vue

@@ -1,9 +1,5 @@
 <template>
-    <div class="content-section layout-footer clearfix">
+    <div class="content-section layout-footer">
-        <span>PrimeVue 2.0.0</span>
+        <span>PrimeVue 2.0.0 by </span><a href="https://www.primetek.com.tr">PrimeTek</a>
-        <div class="footer-links">
-            <a href="https://github.com/primefaces/primevue"><i class=" icon-github fa fa-github-square"></i></a>
-            <a href="https://twitter.com/primevue"><i class="icon-twitter fa fa-twitter-square"></i></a>
-        </div>
     </div>
 </template>

src/AppTopBar.vue

@@ -85,47 +85,14 @@ export default {
     },
     data() {
         return {
-            theme: 'saga-blue',
             activeMenuIndex: null
         }
     },
     methods: {
         changeTheme(event, theme, dark) {
-            let themeElement = document.getElementById('theme-link');
+           this.$emit('change-theme', {theme: theme, dark: dark});
-            themeElement.setAttribute('href', themeElement.getAttribute('href').replace(this.theme, theme));
-            this.theme = theme;
-
-            if (dark) {
-                this.addClass(document.body, dark);
-            }
-            else {
-                this.removeClass(document.body, 'dark-theme');
-                this.removeClass(document.body, 'dark-theme-alt');
-            }
-
-            this.activeMenuIndex = null;
             event.preventDefault();
         },
-        addClass(element, className) {
-            if (!this.hasClass(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(event, index) {
             this.activeMenuIndex = (this.activeMenuIndex === index) ? null : index;
             event.preventDefault();

src/assets/styles/app.scss

@@ -12,7 +12,7 @@
     }
 }
 
-$focusBorderColor:#8dcdff;
+$focusBorderColor:#b6daf2;
 
 html {
     font-size: 14px;
@@ -44,7 +44,7 @@ input[type="number"] {
 
 a {
     text-decoration: none;
-    color: #4eafe6;
+    color: #2874A6;
 }
 
 .layout-news {
@@ -351,7 +351,7 @@ a {
     height: calc(100% - 70px);
     background-color: #ffffff;
     overflow: auto;
-    width: 280px;
+    width: 250px;
     box-shadow: 0 0 2px rgba(0,0,0,0.25);
 
     .layout-menu {
@@ -457,7 +457,7 @@ a {
 }
 
 .layout-content {
-    margin-left: 280px;
+    margin-left: 250px;
     padding-top: 70px;
 
     .content-section {
@@ -628,13 +628,9 @@ a {
             }
 
             a {
-                color: #638fb7;
+                color: #2874A6;
-                font-weight: 700;
+                font-weight: 500;
                 transition: color .2s;
-
-                &:hover {
-                    color: #82a5c5;
-                }
             }
 
             .btn-viewsource {
@@ -790,31 +786,10 @@ a {
 
 .layout-footer {
     font-size: 14px;
-    color: #84939f;
-
-    span a {
-        margin-left: 0;
-    }
-
-    .footer-links {
-        float: right;
-        font-size: 24px;
-    }
 
     a {
-        margin-left: 16px;
+        color: #495057;
-    }
+        font-weight: 600;
-
-    .icon-github {
-        width: 29.1px;
-        height: 29.1px;
-        color:#20272a
-    }
-
-    .icon-twitter {
-        width: 29.1px;
-        height: 29.1px;
-        color:#20272a
     }
 }
 
@@ -886,13 +861,9 @@ a {
     }
 
     a {
-        color: #638fb7;
+        color: #2874A6;
-        font-weight: 700;
         transition: color .2s;
-
+        font-weight: 500;
-        &:hover {
-            color: #82a5c5;
-        }
     }
 
     .layout-config-content {
@@ -953,8 +924,13 @@ a {
         color: #495057;
         background-color: #ffffff;
 
-        p {
+        img {
-            color: #727272;
+            width: 50px;
+            border-radius: 4px;
+        }
+
+        span {
+            font-size: 13px;
         }
     }
 
@@ -962,13 +938,10 @@ a {
         box-shadow: 0 0 0 0.2em $focusBorderColor;
     }
 
-    img {
-        width: 100%;
-    }
-
     button {
-        text-align: center;
         position: relative;
+        display: inline-flex;
+        justify-content: center;
         transition: box-shadow .2s;
 
         i {
@@ -1001,6 +974,10 @@ a {
         p {
             color: #d8d8d8;
         }
+
+        img {
+            width: 100%;
+        }
     }
 }
 
@@ -1030,12 +1007,9 @@ a {
         margin-bottom: 2em;
     }
     a {
-        color: #638fb7;
+        color: #2E86C1;
+        font-weight: 500;
         transition: color .2s;
-
-        &:hover {
-            color: #82a5c5;
-        }
     }
 
     .home-button {