Created theme switcher (#270)

Reviewed-on: #270
Reviewed-by: Adam Bem <bema@noreply.example.com>
Co-authored-by: widlam <mikolaj.widla@gmail.com>
Co-committed-by: widlam <mikolaj.widla@gmail.com>

Frontend/src/App.vue

@@ -1,13 +1,38 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router';
 import SidebarComponent from '@components/sidebar/SidebarComponent.vue';
+import {onMounted, provide, ref } from 'vue';
+
+
+onMounted( ()=> { 
+  switch( localStorage.theme ) {
+    case "dark":{
+      document.documentElement.classList.add('dark');
+      break;
+    }
+    case "light":{
+      document.documentElement.classList.remove('dark');
+    }} 
+    theme.value = localStorage.theme; 
+})
+
+  const theme = ref( getTheme() );
+  provide('theme', theme );
+
+  function setTheme(newTheme : string){
+    theme.value = newTheme;
+  }
+
+  function getTheme(){
+    return localStorage.theme;
+  }
   
 
 </script>
 
 <template>
   <div id="layout" class="font-sans flex h-screen bg-gradient-to-br from-sky-200 to-indigo-200 dark:from-sky-950 dark:to-indigo-950">
-    <SidebarComponent />
+    <SidebarComponent @theme:changed="setTheme" />
     <div class="relative p-4 w-full m-4 ml-0 bg-blue-50 dark:bg-gray-700 rounded-2xl overflow-hidden shadow-lg">
       <RouterView></RouterView>
     </div>

Frontend/src/components/common/CodeEditorComponent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { onBeforeUpdate, inject } from 'vue'
 import { Codemirror } from 'vue-codemirror'
 import { oneDark } from '@codemirror/theme-one-dark'
 import { espresso } from 'thememirror';
@@ -8,9 +8,11 @@ import {json} from '@codemirror/lang-json'
 import {html} from '@codemirror/lang-html'
 
 function isDarkModeSet(){
-  return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+  return localStorage.theme == "dark";
 }
 
+const theme : string = inject('theme')! ;
+
 const props= defineProps({
   code : {
       type: String,
@@ -28,7 +30,7 @@ const emit = defineEmits(
   ]
 )
 
-function dataUpdated(newData:String, viewUpdate : any){
+function dataUpdated(newData:String){
   emit('update:updatedCode',newData)
 }
 
@@ -41,13 +43,15 @@ function selectTheme() {
   }
 }
 
-const extensions = computed( ()=> {
+let extensions = parseExtensions();
+
+
+function parseExtensions(){
   return  [
       selectTheme(),
       parseLanguage(props.config.language),
   ]
-
-} )
+}
 
 function parseLanguage(name: String){
   switch(name.toUpperCase()){
@@ -64,12 +68,15 @@ function parseLanguage(name: String){
 }
 
 
+onBeforeUpdate( () => { extensions = parseExtensions(); } )
+
 </script>
 
 <template>
   <div class="editor w-full h-full rounded-2xl overflow-x-auto">
     
     <codemirror
+      :key="theme"
       style="height: 100%; width: 100%; padding:1rem ; border-radius: 1rem; font-size: large;"
       :model-value="code"
       @update:model-value="dataUpdated"

Frontend/src/components/common/ThemeSwitcherComponent.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+
+import lightThemeIcon from '@/assets/light_theme.svg';
+import darkThemeIcon from '@/assets/dark_theme.svg';
+
+    const emit = defineEmits([
+        "theme",
+    ]);
+
+
+    function toDarkMode(){
+        localStorage.theme = "dark";
+        document.documentElement.classList.add('dark');
+        emit('theme',"dark");
+
+    }
+
+    function toLightMode(){
+        localStorage.theme = "light";
+        document.documentElement.classList.remove('dark');
+        emit('theme',"light");
+
+    }
+
+    
+
+
+
+</script>
+
+<template>
+    <div class="mb-4 flex flex-row gap-8">
+    <button id="header__moon" @click="toDarkMode()" title="Switch to dark mode" class="w-full h-10 focus:outline-none focus:shadow-outline text-gray-500">
+        <svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z" />
+        </svg>
+    </button>
+    <button id="header__indeterminate" @click="toLightMode()" title="Switch to light mode" class="w-full h-10 focus:outline-none focus:shadow-outline text-gray-500">
+        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-sun" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+            <circle cx="12" cy="12" r="4"></circle>
+            <path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path>
+        </svg>
+    </button>
+</div>
+</template>

Frontend/src/components/formatter/FormatterComponent.vue

@@ -4,7 +4,7 @@ import JsonButtonFormatterComponent from '@/components/formatter/JsonButtonForma
 import HtmlButtonFormatterComponent from '@/components/formatter/HtmlButtonFormatterComponent.vue';
 
 import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
-import CodeEditorComponent from '@/components/CodeEditorComponent.vue';
+import CodeEditorComponent from '@/components/common/CodeEditorComponent.vue';
 import { ref } from 'vue';
 
 

Frontend/src/components/mock/BodyDetailComponent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import CodeEditorComponent from '../CodeEditorComponent.vue';
+import CodeEditorComponent from '@/components/common/CodeEditorComponent.vue';
 
 
 const props = defineProps(

Frontend/src/components/mock/RestMockMessageComponent.vue

@@ -2,7 +2,7 @@
 import {ref, type Ref} from 'vue';
 import HeadersComponent from './HeadersComponent.vue';
 import SaveComponent from './SaveComponent.vue';
-import CodeEditorComponent from '../CodeEditorComponent.vue';
+import CodeEditorComponent from '@/components/common/CodeEditorComponent.vue';
 
 const clientUUID = ref('');
 const host = window.location.protocol + "//" + window.location.hostname + "/mock";

Frontend/src/components/sidebar/FooterComponent.vue

@@ -1,10 +1,16 @@
 <script setup lang="ts">
+import ThemeSwitcherComponent from '../common/ThemeSwitcherComponent.vue';
+
+const emit = defineEmits([
+        "theme",
+    ]);
 
 
 </script>
 
 <template>
-   <div class="flex flex-col gap-4 text-center font-thin text-slate-600 dark:text-slate-400 ">
+   <div class="flex flex-col gap-4 items-center text-center font-thin text-slate-600 dark:text-slate-400 ">
+        <ThemeSwitcherComponent @theme="(theme)=>emit('theme',theme)"></ThemeSwitcherComponent>
         <div class="flex flex-col">
             <a href="mailto:bugs@release11.com">Found a bug?</a>
             <a href="#" class="hidden">Privacy Policy</a>

Frontend/src/components/sidebar/SidebarComponent.vue

@@ -8,15 +8,24 @@ import logoWhite from '@assets/logo_czarne.svg';
 
 const logoR11 = ref( logoDark );
 
+const emit = defineEmits([
+    'theme:changed'
+])
+
 
 function changeLogoForTheme(){
     logoR11.value = isDarkModeSet() ? logoDark : logoWhite;
 }
 
 function isDarkModeSet(){
-    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    return localStorage.theme == "dark";
 }
 
+function changeTheme(theme:string){
+            changeLogoForTheme()
+            emit('theme:changed',theme);
+    }
+
 onMounted( () => {
     changeLogoForTheme();
 })
@@ -55,7 +64,7 @@ onMounted( () => {
 
 
             </div>
-            <FooterComponent></FooterComponent>
+            <FooterComponent @theme="changeTheme"></FooterComponent>
         </div>
     </aside>
 </template>

Frontend/src/components/xml/XmlInputFieldComponent.vue

@@ -2,7 +2,7 @@
 import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue'
 import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
 import { ref } from 'vue'
-import CodeEditor from '../CodeEditorComponent.vue'
+import CodeEditor from '@/components/common/CodeEditorComponent.vue'
 
 const data = ref('')
 const inputFile = ref()

Frontend/src/components/xml/XmlOutputFieldComponent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
-import CodeEditor from '../CodeEditorComponent.vue';
+import CodeEditor from '@/components/common/CodeEditorComponent.vue';
 
 
 const props = defineProps(

Frontend/src/views/Base64EncoderView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import CodeEditorComponent from '@/components/CodeEditorComponent.vue'
+import CodeEditorComponent from '@/components/common/CodeEditorComponent.vue'
 import EncoderButton from '@/components/encoder/EncoderButtonComponent.vue'
 import { ref } from 'vue'
 

Frontend/src/views/UrlEncoderView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import EncodeUriButton from '@components/encoder/EncodeUriButtonComponent.vue'
-import CodeEditorComponent from '@/components/CodeEditorComponent.vue';
+import CodeEditorComponent from '@/components/common/CodeEditorComponent.vue';
 
 
 const uri = ref("")

Frontend/tailwind.config.js

@@ -11,5 +11,6 @@ export default {
       'mono': ["Sono"],
     }
   },
+  darkMode: 'class',
   plugins: [],
 }