diff --git a/src/client/app/common/views/widgets/server.cpu.vue b/src/client/app/common/views/widgets/server.cpu.vue
index 596c856da..b9748bdf7 100644
--- a/src/client/app/common/views/widgets/server.cpu.vue
+++ b/src/client/app/common/views/widgets/server.cpu.vue
@@ -38,7 +38,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.cpu
+root(isDark)
 	> .pie
 		padding 10px
 		height 100px
@@ -52,7 +52,7 @@ export default Vue.extend({
 		> p
 			margin 0
 			font-size 12px
-			color #505050
+			color isDark ? #a8b4bd : #505050
 
 			&:first-child
 				font-weight bold
@@ -65,4 +65,10 @@ export default Vue.extend({
 		display block
 		clear both
 
+.cpu[data-darkmode]
+	root(true)
+
+.cpu:not([data-darkmode])
+	root(false)
+
 </style>
diff --git a/src/client/app/common/views/widgets/server.disk.vue b/src/client/app/common/views/widgets/server.disk.vue
index 2af1982a9..5c7e9678d 100644
--- a/src/client/app/common/views/widgets/server.disk.vue
+++ b/src/client/app/common/views/widgets/server.disk.vue
@@ -46,7 +46,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.disk
+root(isDark)
 	> .pie
 		padding 10px
 		height 100px
@@ -60,7 +60,7 @@ export default Vue.extend({
 		> p
 			margin 0
 			font-size 12px
-			color #505050
+			color isDark ? #a8b4bd : #505050
 
 			&:first-child
 				font-weight bold
@@ -73,4 +73,10 @@ export default Vue.extend({
 		display block
 		clear both
 
+.disk[data-darkmode]
+	root(true)
+
+.disk:not([data-darkmode])
+	root(false)
+
 </style>
diff --git a/src/client/app/common/views/widgets/server.memory.vue b/src/client/app/common/views/widgets/server.memory.vue
index 834a62671..9212f2271 100644
--- a/src/client/app/common/views/widgets/server.memory.vue
+++ b/src/client/app/common/views/widgets/server.memory.vue
@@ -46,7 +46,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.memory
+root(isDark)
 	> .pie
 		padding 10px
 		height 100px
@@ -60,7 +60,7 @@ export default Vue.extend({
 		> p
 			margin 0
 			font-size 12px
-			color #505050
+			color isDark ? #a8b4bd : #505050
 
 			&:first-child
 				font-weight bold
@@ -73,4 +73,10 @@ export default Vue.extend({
 		display block
 		clear both
 
+.memory[data-darkmode]
+	root(true)
+
+.memory:not([data-darkmode])
+	root(false)
+
 </style>
diff --git a/src/client/app/common/views/widgets/server.pie.vue b/src/client/app/common/views/widgets/server.pie.vue
index ce2cff1d0..16859fe07 100644
--- a/src/client/app/common/views/widgets/server.pie.vue
+++ b/src/client/app/common/views/widgets/server.pie.vue
@@ -45,7 +45,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-svg
+root(isDark)
 	display block
 	height 100%
 
@@ -56,6 +56,12 @@ svg
 
 	> text
 		font-size 0.15px
-		fill rgba(0, 0, 0, 0.6)
+		fill isDark ? rgba(#fff, 0.6) : rgba(0, 0, 0, 0.6)
+
+svg[data-darkmode]
+	root(true)
+
+svg:not([data-darkmode])
+	root(false)
 
 </style>