Added layer features

src/App.vue

@@ -12,6 +12,8 @@ import Tabs from './components/system/Tabs';
 import TPS from './components/system/TPS';
 import themes from './data/themes';
 import { mapState } from 'vuex';
+import { player } from './store/proxies';
+import './main.css';
 
 export default {
 	name: 'App',
@@ -21,7 +23,7 @@ export default {
 	computed: {
 		...mapState([ 'showTPS' ]),
 		theme() {
-			return themes[this.$store.state.theme || "default"];
+			return themes[player.theme].variables;
 		}
 	},
 	methods: {
@@ -32,57 +34,7 @@ export default {
 };
 </script>
 
-<style>
-* {
-	transition-duration: 0.5s;
-	font-family: "Roboto Mono", monospace;
-	font-weight: bold;
-	margin: auto;
-	text-size-adjust: none;
-}
-
-*:focus {
-	outline: none;
-}
-
-body {
-	overflow: hidden;
-	min-width: 640px;
-	transition: none;
-	text-align: center;
-}
-
-html, body, #app {
-	min-height: 100%;
-	height: 100%;
-}
-
-h1, h2, h3, b, input {
-	display: inline;
-}
-
-a,
-button,
-.link {
-	display: block;
-	color: var(--link);
-	background: none;
-	border: none;
-	cursor: pointer;
-	text-decoration: none;
-}
-
-a:hover,
-button:hover,
-.link:hover {
-	text-shadow: 5px 0 10px var(--link),
-		-3px 0 12px var(--link);
-}
-
-ul {
-	list-style-type: none;
-}
-
+<style scoped>
 #app {
 	background-color: var(--background);
 	color: var(--color);