diff --git a/src/client/app/admin/views/ap-log.vue b/src/client/app/admin/views/ap-log.vue
index 175a8c1117f93ab0d1d52f14f36dbe3882293e1b..6bc4a2f92daefdab1636a4c1c32a3ec4d37b6202 100644
--- a/src/client/app/admin/views/ap-log.vue
+++ b/src/client/app/admin/views/ap-log.vue
@@ -67,7 +67,7 @@ export default Vue.extend({
height 250px
overflow auto
box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
- background var(--face)
+ background var(--adminDashboardCardBg)
border-radius 8px
> table
@@ -76,10 +76,11 @@ export default Vue.extend({
overflow auto
border-spacing 0
border-collapse collapse
- color #555
+ color var(--adminDashboardCardFg)
+ font-size 15px
thead
- border-bottom solid 2px #eee
+ border-bottom solid 2px var(--adminDashboardCardDivider)
tr
th
@@ -89,7 +90,7 @@ export default Vue.extend({
tbody
tr
&:nth-child(odd)
- background #fbfbfb
+ background rgba(0, 0, 0, 0.025)
th, td
padding 8px 16px
diff --git a/src/client/app/admin/views/charts.vue b/src/client/app/admin/views/charts.vue
index 0527840f6d04597afb8fd71412bd6db1f3035c34..041f419cf5f105c9b0018cbefa734c78541851b5 100644
--- a/src/client/app/admin/views/charts.vue
+++ b/src/client/app/admin/views/charts.vue
@@ -39,6 +39,7 @@
<script lang="ts">
import Vue from 'vue';
+import * as tinycolor from 'tinycolor2';
import * as ApexCharts from 'apexcharts';
const limit = 90;
@@ -147,7 +148,7 @@ export default Vue.extend({
this.chartInstance.destroy();
}
- this.chartInstance = new ApexCharts(this.$refs.chart, Object.assign({
+ this.chartInstance = new ApexCharts(this.$refs.chart, {
chart: {
type: 'area',
height: 300,
@@ -168,17 +169,41 @@ export default Vue.extend({
},
grid: {
clipMarkers: false,
+ borderColor: 'rgba(0, 0, 0, 0.1)'
},
stroke: {
curve: 'straight',
width: 2
},
+ legend: {
+ labels: {
+ color: tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--text')).toRgbString()
+ },
+ },
xaxis: {
- type: 'datetime'
+ type: 'datetime',
+ labels: {
+ style: {
+ colors: tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--text')).toRgbString()
+ }
+ },
+ axisBorder: {
+ color: 'rgba(0, 0, 0, 0.1)'
+ },
+ axisTicks: {
+ color: 'rgba(0, 0, 0, 0.1)'
+ },
},
yaxis: {
- }
- }, this.data));
+ labels: {
+ formatter: this.data.bytes ? v => Vue.filter('bytes')(v, 0) : v => Vue.filter('number')(v),
+ style: {
+ color: tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--text')).toRgbString()
+ }
+ }
+ },
+ series: this.data.series
+ });
this.chartInstance.render();
},
@@ -286,6 +311,7 @@ export default Vue.extend({
driveChart(): any {
return {
+ bytes: true,
series: [{
name: 'All',
data: this.format(
@@ -314,6 +340,7 @@ export default Vue.extend({
driveTotalChart(): any {
return {
+ bytes: true,
series: [{
name: 'Combined',
data: this.format(sum(this.stats.drive.local.totalSize, this.stats.drive.remote.totalSize))
@@ -396,6 +423,7 @@ export default Vue.extend({
networkUsageChart(): any {
return {
+ bytes: true,
series: [{
name: 'Incoming',
data: this.format(this.stats.network.incomingBytes)
@@ -424,8 +452,8 @@ export default Vue.extend({
margin 0 8px
padding 0 0 8px 0
font-size 1em
- color #555
- border-bottom solid 1px #eee
+ color var(--adminDashboardCardFg)
+ border-bottom solid 1px var(--adminDashboardCardDivider)
> b
margin-right 8px
diff --git a/src/client/app/admin/views/cpu-memory.vue b/src/client/app/admin/views/cpu-memory.vue
index beb452a360124a4355be8c3320a81116eeab2a84..f76f3de305a1a27b57c4acc0276b67e0785e256c 100644
--- a/src/client/app/admin/views/cpu-memory.vue
+++ b/src/client/app/admin/views/cpu-memory.vue
@@ -79,6 +79,7 @@ export default Vue.extend({
},
grid: {
clipMarkers: false,
+ borderColor: 'rgba(0, 0, 0, 0.1)'
},
stroke: {
curve: 'straight',
@@ -153,7 +154,7 @@ export default Vue.extend({
display flex
padding 0 8px
margin-bottom -16px
- color #555
+ color var(--adminDashboardCardFg)
font-size 14px
> span
diff --git a/src/client/app/admin/views/dashboard.vue b/src/client/app/admin/views/dashboard.vue
index dde11f72f722277683cada62b48110d6dea3fd01..4b271b398c3f15e23d885685d4ce7162756c94b5 100644
--- a/src/client/app/admin/views/dashboard.vue
+++ b/src/client/app/admin/views/dashboard.vue
@@ -128,8 +128,8 @@ export default Vue.extend({
display flex
margin-bottom 16px
padding-bottom 16px
- border-bottom solid 1px #ccc
- color #777
+ border-bottom solid 1px var(--adminDashboardHeaderBorder)
+ color var(--adminDashboardHeaderFg)
font-size 14px
> p
@@ -154,9 +154,9 @@ export default Vue.extend({
flex 1
max-width 300px
margin-right 16px
- color var(--text)
+ color var(--adminDashboardCardFg)
box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
- background var(--face)
+ background var(--adminDashboardCardBg)
border-radius 8px
&:last-child
@@ -192,7 +192,7 @@ export default Vue.extend({
> div:last-child
display flex
padding 6px 16px
- border-top solid 1px #eee
+ border-top solid 1px var(--adminDashboardCardDivider)
> span
font-size 70%
diff --git a/src/client/theme/dark.json5 b/src/client/theme/dark.json5
index 7942f64576bc2b526758dd976e6dc2e775c6566a..150b6f599766c894fc74237c3c322bfa8be833bd 100644
--- a/src/client/theme/dark.json5
+++ b/src/client/theme/dark.json5
@@ -215,5 +215,11 @@
reversiGameEmptyCell: ':lighten<2<$secondary',
reversiGameEmptyCellMyTurn: ':lighten<5<$secondary',
reversiGameEmptyCellCanPut: ':lighten<4<$secondary',
+
+ adminDashboardHeaderFg: ':alpha<0.9<$text',
+ adminDashboardHeaderBorder: 'rgba(0, 0, 0, 0.3)',
+ adminDashboardCardBg: '$secondary',
+ adminDashboardCardFg: '$text',
+ adminDashboardCardDivider: 'rgba(0, 0, 0, 0.3)',
},
}
diff --git a/src/client/theme/light.json5 b/src/client/theme/light.json5
index 353c9847e047dc1210da606ca0a059aefae5d25e..28b9ba7834d1a574d1f700744b50bd0fb533f98f 100644
--- a/src/client/theme/light.json5
+++ b/src/client/theme/light.json5
@@ -215,5 +215,11 @@
reversiGameEmptyCell: 'rgba(0, 0, 0, 0.06)',
reversiGameEmptyCellMyTurn: 'rgba(0, 0, 0, 0.12)',
reversiGameEmptyCellCanPut: 'rgba(0, 0, 0, 0.9)',
+
+ adminDashboardHeaderFg: ':alpha<0.9<$text',
+ adminDashboardHeaderBorder: 'rgba(0, 0, 0, 0.1)',
+ adminDashboardCardBg: '$secondary',
+ adminDashboardCardFg: '$text',
+ adminDashboardCardDivider: 'rgba(0, 0, 0, 0.082)',
},
}