changed all files to composition API

components/server/Solution.vue

@@ -32,7 +32,8 @@
         <div class="solution-data">
             <div class="additional">
                 <div class="description">
-                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description of the problem/intended use:</h3>
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description of the
+                        problem/intended use:</h3>
                     <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">...</pre>
                 </div>
             </div>
@@ -49,21 +50,17 @@
 </template>
     
     
-    
-<script>
+<script setup>
+import { ref } from 'vue';
 
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "Solution",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
-</script>
-   
-      
+};
+</script> 
       
       
 <style scoped>
@@ -149,13 +146,13 @@ export default {
 }
 
 .data-darkmode {
-  background-color: #212121;
-  color: #fff;
+    background-color: #212121;
+    color: #fff;
 }
 
 .data-lightmode {
-  background-color: #EBEBEB;
-  color: #000;
+    background-color: #EBEBEB;
+    color: #000;
 }
 
 .solution-data {
@@ -235,5 +232,4 @@ export default {
     padding: 0.625rem 1.875rem 0.625rem 1.25rem;
     padding-top: 0rem;
 }
-
 </style>