change CSS to dark theme

client/src/main.ts

@@ -2,7 +2,6 @@ import { createApp } from 'vue'
 import './style.scss'
 import router from './router'
 import { state } from "./state";
-import 'bulma/css/bulma.css'
 import App from './App.vue'
 
 

client/src/style.scss

@@ -0,0 +1,33 @@
+$background: hsl(0, 0%, 29%); // Bulma's $dark-grey
+$body-background-color: hsl(0, 0%, 21%); // Bulma's $grey-darker
+$text: hsl(0, 0%, 96%); // Bulma's $white-ter
+$text-light: hsl(0, 0%, 98%); // Bulma's $white-bis
+$text-strong: hsl(0, 0%, 93%); // Bulma's $grey-lightest
+
+
+// must be after assignments!
+@import '../node_modules/bulma/bulma.sass';
+
+.modal-card-body {
+    background-color: $body-background-color;
+}
+.modal-card-head {
+    border-bottom: 1px solid $primary;
+}
+
+.modal-card-foot {
+    border-top: 1px solid $primary;
+}
+
+.textarea, .table, .input {
+    background-color: $background;
+    border-color: $primary;
+}
+
+.tr, .th {
+    border: 1px solid $primary;
+}
+
+.navbar {
+    background-color: $background;
+}

client/src/views/NewTrackView.vue

@@ -31,6 +31,10 @@ const submit = async () => {
 </script>
 <template>
     <section class="section">
+        <div class=columns>
+            <div class="column is-2"></div>
+            <div class="column is-7">
+                <h1 class="title">Add a new track</h1>
                 <div class="field">
                     <label for="name" class="label">Name</label>
                     <div class="control">
@@ -40,7 +44,7 @@ const submit = async () => {
                 <div class="field">
                     <label for="description" class="label">Description</label>
                     <div class="control">
-                <textarea name="description" cols="30" rows="5" v-model="description"></textarea>
+                        <textarea class="textarea" name="description" cols="30" rows="5" v-model="description"></textarea>
                     </div>
                 </div>
                 <div class="field">
@@ -86,5 +90,8 @@ const submit = async () => {
                         Save
                     </button>
                 </div>
+            </div>
+            <div class="column"></div>
+        </div>
     </section>
 </template>