From b1f8895b3e6a3e7526c8949aac4444281c6341bf Mon Sep 17 00:00:00 2001
From: widlam <mikolaj.widla@gmail.com>
Date: Thu, 23 Nov 2023 13:57:39 +0100
Subject: [PATCH] Created theme switcher

---
 Frontend/src/App.vue                          | 25 ++++++++++-
 .../src/components/CodeEditorComponent.vue    | 17 +++++---
 .../common/ThemeSwitcherComponent.vue         | 43 +++++++++++++++++++
 .../components/sidebar/FooterComponent.vue    |  8 +++-
 .../components/sidebar/SidebarComponent.vue   | 23 +++++++++-
 Frontend/tailwind.config.js                   |  1 +
 6 files changed, 108 insertions(+), 9 deletions(-)
 create mode 100644 Frontend/src/components/common/ThemeSwitcherComponent.vue

diff --git a/Frontend/src/App.vue b/Frontend/src/App.vue
index d532ae0..e6d4b27 100644
--- a/Frontend/src/App.vue
+++ b/Frontend/src/App.vue
@@ -1,13 +1,36 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router';
 import SidebarComponent from '@components/sidebar/SidebarComponent.vue';
+import {onMounted, provide, ref, computed } from 'vue';
 
 
+onMounted( ()=> { switch( localStorage.theme ) {
+    case "dark":{
+      document.documentElement.classList.add('dark');
+      break;
+    }
+    case "light":{
+      document.documentElement.classList.remove('dark');
+    }
+  } } )
+
+  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>
diff --git a/Frontend/src/components/CodeEditorComponent.vue b/Frontend/src/components/CodeEditorComponent.vue
index 4112d50..fdb6663 100644
--- a/Frontend/src/components/CodeEditorComponent.vue
+++ b/Frontend/src/components/CodeEditorComponent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import {  ref, onBeforeUpdate, watch, reactive, 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 :any = inject('theme') ;
+
 const props= defineProps({
   code : {
       type: String,
@@ -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"
diff --git a/Frontend/src/components/common/ThemeSwitcherComponent.vue b/Frontend/src/components/common/ThemeSwitcherComponent.vue
new file mode 100644
index 0000000..d74eaec
--- /dev/null
+++ b/Frontend/src/components/common/ThemeSwitcherComponent.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+
+    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 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>
\ No newline at end of file
diff --git a/Frontend/src/components/sidebar/FooterComponent.vue b/Frontend/src/components/sidebar/FooterComponent.vue
index 02b0ee6..58e23f6 100644
--- a/Frontend/src/components/sidebar/FooterComponent.vue
+++ b/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>
diff --git a/Frontend/src/components/sidebar/SidebarComponent.vue b/Frontend/src/components/sidebar/SidebarComponent.vue
index 51a28c4..afca887 100644
--- a/Frontend/src/components/sidebar/SidebarComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarComponent.vue
@@ -8,13 +8,32 @@ 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){
+    switch (theme){
+        case "dark":{
+            changeLogoForTheme()
+            emit('theme:changed',theme);
+            break;
+        }
+        case "light":{
+            changeLogoForTheme()
+            emit('theme:changed',theme);
+            break;
+        }
+    }
 }
 
 onMounted( () => {
@@ -55,7 +74,7 @@ onMounted( () => {
 
 
             </div>
-            <FooterComponent></FooterComponent>
+            <FooterComponent @theme="changeTheme"></FooterComponent>
         </div>
     </aside>
 </template>
\ No newline at end of file
diff --git a/Frontend/tailwind.config.js b/Frontend/tailwind.config.js
index 102b33c..529389e 100644
--- a/Frontend/tailwind.config.js
+++ b/Frontend/tailwind.config.js
@@ -11,5 +11,6 @@ export default {
       'mono': ["Sono"],
     }
   },
+  darkMode: 'class',
   plugins: [],
 }
\ No newline at end of file