Skip to content

Commit e387576

Browse files
BlariBlari
committed
Add theme switcher and themes
1 parent 945c32b commit e387576

File tree

16 files changed

+286
-79
lines changed

16 files changed

+286
-79
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"bootstrap": "^5.1.3",
2929
"bootstrap-vue": "2.22.0",
3030
"chart.js": "^2.9.4",
31+
"chroma-js": "^2.1.1",
3132
"cross-env": "^7.0.2",
3233
"css-loader": "^1.0.1",
3334
"echarts": "4.9.0",

‎src/components/Colorpicker/Colorpicker.scss

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@import "../../styles/app";
2+
3+
.colors-list {
4+
display: flex;
5+
flex-wrap: wrap;
6+
justify-content: space-between;
7+
8+
.color-box {
9+
min-width: 30px;
10+
height: 30px;
11+
border: 1px solid $border-color;
12+
cursor: pointer;
13+
margin: 3px;
14+
transition: $transition-base;
15+
16+
&:hover {
17+
border-color: darken($border-color, 30%);
18+
}
19+
20+
&.active {
21+
border-color: darken($primary, 10%);
22+
}
23+
}
24+
}

‎src/components/Colorpicker/Colorpicker.vue

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<ul class="colors-list">
3+
<li
4+
v-for="[colorName, colorValue] in colors"
5+
:key="colorValue"
6+
class="color-box"
7+
:class="{'active': activeColor === colorName}"
8+
:style="{backgroundColor: colorValue}"
9+
@click="$emit('change', [colorName, colorValue])"
10+
></li>
11+
</ul>
12+
</template>
13+
14+
<script>
15+
export default {
16+
name: 'Colorpicker',
17+
props: {
18+
colors: {type: Array, default: () => []},
19+
activeColor: {type: String, default: "#000000"}
20+
}
21+
}
22+
</script>
23+
24+
<style src="./Colorpicker.scss" lang="scss" scoped></style>

‎src/components/Helper/Helper.scss

Lines changed: 33 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,25 @@
11
@import '../../styles/app';
22

33
.theme-helper {
4-
width: 220px;
4+
width: $helper-width;
55
position: fixed;
6-
right: -220px;
7-
top: $navbar-height * 2;
8-
z-index: 100;
6+
right: -$helper-width;
7+
top: 20px;
8+
bottom: 20px;
9+
z-index: 101;
10+
background-color: theme-color(inverse);
911
@include transition(right $sidebar-transition-time ease-in-out);
1012

1113
&.theme-helper-opened {
1214
right: 0;
1315
}
1416

1517
.theme-helper-toggler {
16-
width: 55px;
17-
margin-left: -55px;
18+
position: absolute;
19+
right: 100%;
20+
top: 15%;
21+
width: $sidebar-width-open / 4;
22+
margin-left: -($sidebar-width-open / 4);
1823
cursor: pointer;
1924

2025
i {
@@ -42,24 +47,22 @@
4247
font-size: $font-size-lg * 1.4;
4348
line-height: initial;
4449
box-shadow: $widget-shadow-designated;
45-
background: opacify($widget-bg, .1);
46-
}
47-
48-
.theme-helper-header {
49-
padding-top: 0;
50-
51-
h6 {
52-
margin: auto;
53-
}
5450
}
5551

5652
.theme-helper-content {
53+
border-radius: $border-radius 0 0 $border-radius;
54+
overflow: auto;
5755
box-shadow: $widget-shadow-designated;
58-
border-radius: 0;
59-
background: opacify($widget-bg, .1);
56+
height: 100%;
6057
}
6158

62-
.theme-sharing, .theme-switcher {
59+
.theme-settings {
60+
.form-group, .colors-list {
61+
margin-bottom: $spacer * 2;
62+
}
63+
}
64+
65+
.theme-sharing {
6366
font-size: $font-size-lg;
6467
cursor: pointer;
6568
}
@@ -72,6 +75,18 @@
7275
background-color: theme-color('secondary');
7376
}
7477

78+
.abc-radio {
79+
& > label {
80+
padding-left: 25px;
81+
82+
&:before, &:after {
83+
outline: none !important;
84+
transition: $transition-base;
85+
margin-left: 4px;
86+
}
87+
}
88+
}
89+
7590
@keyframes spin {
7691
0% {
7792
transform:rotate(0deg);

‎src/components/Helper/Helper.vue

Lines changed: 48 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,66 @@
11
<template>
2-
<div :class="{ 'theme-helper': true, 'theme-helper-opened': opened }">
2+
<div :class="{ 'theme-helper': true, 'theme-helper-opened': helperOpened }">
3+
<div class="theme-helper-toggler" @click="toggleHelper(!helperOpened)" id="v-step-3">
4+
<div class="theme-helper-spinner bg-primary text-white">
5+
<i class="la la-cog"></i>
6+
<i class="la la-cog fs-smaller"></i>
7+
</div>
8+
</div>
39
<section class="widget theme-helper-content">
4-
<header class="theme-helper-header d-flex p-0">
5-
<div class="theme-helper-toggler" @click="toggle">
6-
<div class="theme-helper-spinner text-white">
7-
<i class="la la-cog"></i>
8-
<i class="la la-cog"></i>
9-
</div>
10-
</div>
11-
<h6>Links</h6>
12-
</header>
1310
<div class="widget-body mt-3">
14-
<div class="mt-4">
15-
<a href="https://flatlogic.com/templates/light-blue-vue/"
11+
<h3 class="mb-3">Theme</h3>
12+
<div class="theme-settings">
13+
14+
<h5 id="v-step-7">Theme Color</h5>
15+
<colorpicker
16+
:colors="appConfig.themeColors"
17+
:activeColor="sidebarColorName"
18+
@change="updateLayoutComponentColor({component: 'layoutComponent', color: $event})"
19+
></colorpicker>
20+
</div>
21+
<div class="d-grid mt-4">
22+
<a href="https://flatlogic.com/templates/light-blue-vue"
23+
id="v-step-8"
1624
target="_blank"
1725
role="button"
18-
class="btn btn-warning btn-rounded-f btn-block fs-mini text-white">
26+
class="btn btn-info btn-rounded-f fs-mini text-white">
1927
Purchase
2028
</a>
21-
<router-link
22-
to="/documentation"
23-
class="btn btn-inverse btn-rounded-f btn-block fs-mini">
24-
Documentation
25-
</router-link>
26-
<a href="https://flatlogic.com/generator"
27-
target="_blank"
28-
role="button"
29-
class="btn btn-primary btn-rounded-f btn-block fs-mini text-white">
30-
Generate web app
31-
</a>
29+
<a href="https://demo.flatlogic.com/light-blue-vue/#/documentation/"
30+
target="_blank"
31+
role="button"
32+
class="btn btn-primary btn-rounded-f mt-4 fs-mini">
33+
Documentation
34+
</a>
3235
</div>
3336
<div class="d-flex justify-content-between mt-lg">
3437
<a role="button"
3538
target="_blank"
3639
href="https://flatlogic.com/forum"
3740
class="btn btn-outline-default btn-rounded-f fs-mini text-muted d-flex align-items-center">
38-
<i class="glyphicon glyphicon-headphones me-1 mt-n-sm"></i>
41+
<i class="glyphicon glyphicon-headphones mr-xs"></i>
3942
Support
4043
</a>
4144
<a role="button"
4245
target="_blank"
43-
href="https://github.com/flatlogic/light-blue-vue-admin"
46+
href="https://github.com/flatlogic/light-blue-dashboard"
4447
class="btn btn-outline-default btn-rounded-f fs-mini text-muted d-flex align-items-center">
45-
<i class="fa fa-github me-1"></i>
48+
<i class="fa fa-github mr-xs"></i>
4649
Github
4750
</a>
4851
</div>
4952
<div class="mt-lg d-flex flex-column align-items-center theme-sharing">
5053
<span class="fs-sm">
5154
Thank you for sharing!
5255
</span>
53-
<div class="d-flexjustify-content-center text-light mt-2 h2 mb-0">
56+
<div class="d-flexjustify-content-center text-light mt-2">
5457
<a target="_blank"
55-
href="https://twitter.com/intent/tweet?text=Amazing%20admin%20dashboard%20template%20built%20with%20%23VueJS%20and%20%23Bootstrap%204!&url=https://flatlogic.com/templates/light-blue-vue/demo&via=flatlogic">
56-
<i class="fa fa-twitter mx-3"></i>
58+
href="https://twitter.com/intent/tweet?text=Admin%20dashboard%20template%20built%20with%20NodeJS,%20React%20and%20Bootstrap%204!&url=https://demo.flatlogic.com/sing-app/html-bs4/&via=flatlogic">
59+
<i class="fa fa-twitter pr-1"></i>
5760
</a>
58-
<a href="https://www.facebook.com/sharer/sharer.php?u=https://flatlogic.com/templates/light-blue-vue/demo"
61+
<a href="https://www.facebook.com/sharer/sharer.php?u=https://demo.flatlogic.com/sing-app/html-bs4/"
5962
target="_blank">
60-
<i class="fa fa-facebook mx-3"></i>
63+
<i class="fa fa-facebook pl-1"></i>
6164
</a>
6265
</div>
6366
</div>
@@ -67,19 +70,20 @@
6770
</template>
6871

6972
<script>
73+
import { createNamespacedHelpers } from 'vuex';
74+
import Colorpicker from '../Colorpicker/Colorpicker';
75+
const { mapState, mapActions } = createNamespacedHelpers('layout');
76+
7077
export default {
71-
name: 'Helper',
72-
data() {
73-
return {
74-
opened: false,
75-
}
76-
},
77-
methods: {
78-
toggle() {
79-
this.opened = !this.opened;
80-
}
81-
}
78+
name: 'Helper',
79+
components: { Colorpicker },
80+
computed: {
81+
...mapState(['navbarColorName', 'sidebarColorName', 'helperOpened'])
82+
},
83+
methods: {
84+
...mapActions(['updateLayoutComponentColor', 'toggleHelper'])
85+
}
8286
};
8387
</script>
8488

85-
<style src="./Helper.scss" lang="scss" scoped />
89+
<style src="./Helper.scss" lang="scss"></style>

‎src/components/Layout/Layout.vue

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div :class="{root: true, sidebarClose}">
2+
<div :class="{root: true}">
33
<Helper />
44
<Header />
55
<Sidebar />
@@ -15,7 +15,9 @@
1515
</template>
1616

1717
<script>
18-
import { mapState, mapActions } from 'vuex';
18+
19+
import { createNamespacedHelpers } from 'vuex';
20+
const { mapState, mapActions } = createNamespacedHelpers('layout');
1921
2022
import Sidebar from '@/components/Sidebar/Sidebar';
2123
import Header from '@/components/Header/Header';
@@ -30,13 +32,18 @@ export default {
3032
...mapActions(
3133
'layout', ['switchSidebar', 'changeSidebarActive'],
3234
),
35+
setTheme(){
36+
let theme = localStorage.getItem("theme")
37+
document.querySelector('body').setAttribute("class", `light-blue ${'theme--' + (theme || 'dark')}`)
38+
}
3339
},
3440
computed: {
3541
...mapState('layout', {
36-
sidebarClose: state => state.sidebarClose,
42+
3743
}),
3844
},
3945
created() {
46+
this.setTheme()
4047
},
4148
mounted() {
4249
this.$refs.content.addEventListener('animationend', () => {

‎src/components/Sidebar/NavLink/NavLink.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
.headerLink {
44
width: 100%;
55
overflow-x: hidden;
6+
font-weight: $font-weight-semi-bold;
7+
font-size: 13px;
68

79
@media (min-width: map_get($grid-breakpoints, lg))
810
and (min-height: $screen-lg-height), (max-width: map_get($grid-breakpoints, md) - 1px) {
@@ -75,6 +77,8 @@
7577
}
7678

7779
.nav-link-nested > a {
80+
font-size: $font-size-sm;
81+
font-weight: $font-weight-normal;
7882
line-height: 32px !important;
7983
}
8084

‎src/components/Sidebar/Sidebar.vue

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,6 @@
2828
link="/app/ecommerce"
2929
iconName="flaticon-diamond"
3030
index="ecommerce"
31-
label="NodeJS"
32-
labelColor="danger"
3331
:childrenLinks="[
3432
{ header: 'Product Management', link: '/app/ecommerce/management' },
3533
{ header: 'Products Grid', link: '/app/ecommerce/products' },

‎src/components/Widget/Widget.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
position: relative;
1313
margin-bottom: $grid-gutter-width;
1414
padding: $widget-padding-vertical $widget-padding-horizontal;
15-
background: $widget-bg;
15+
background: var(--widget-bg);
1616
border-radius: $widget-border-radius;
1717
box-shadow: $widget-shadow;
1818

‎src/config.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,35 @@ const colors = {
1818
gridLineColor: '#040620'
1919
};
2020

21+
22+
23+
const app = {
24+
themeColors: [
25+
['dark', "#333964"],
26+
['light', "#0A0417"],
27+
['sea', "#4A4657"],
28+
['sky', "#3A3847"],
29+
['rain', "#3846AA"],
30+
['middle', "#3390C3"],
31+
32+
// ['default','#002B49'],
33+
// ['white', '#FFFFFF'],
34+
// ['first','#004472'],
35+
// ['second','#e9ebef'],
36+
// ['third','#d1e7f5'],
37+
// ['fourth','#ccdde9'],
38+
// ['fifth','#d6dfe6'],
39+
// ['sixth','#13191d'],
40+
// ['seventh','#20ae8c'],
41+
],
42+
}
43+
2144
export default {
2245
colors: {
2346
...colors,
2447
white: "#fff"
2548
},
49+
app,
2650
hostApi,
2751
portApi,
2852
baseURLApi,

0 commit comments

Comments
 (0)