edit: theme switch button, réglages couleurs & minor bug fix

2026-03-22 05:14:51 +01:00
parent 460f7f637d
commit 4bf142a752
7 changed files with 151 additions and 5 deletions
@@ -0,0 +1,134 @@
+<script setup>
+    import CloseIcon from '../assets/icons/close.svg'
+</script>
+
+<template>
+    <div id="colorBtnContainer">
+      <CloseIcon name="cyber" class="icon" :class="{checkedIcon: isChecked}"/>
+      <label class="switch">
+        <input type="checkbox" @click="toggleTheme">
+        <span class="slider round"></span>
+      </label>
+      <CloseIcon name="solar" class="icon" :class="{checkedIcon: !isChecked}"/>
+    </div>
+</template>
+
+<style scoped>
+  /*================= Mise en page:
+    => Mobile First : par défaut, moins de 500px
+    => Tablette et PC format haut : de 500 à 1000px
+    => PC large : à partir de 1000px
+  */
+
+  /*+++++++++++++++++ COPYBOX
+      ================ PC HAUT/IPAD
+      @media(min-width:650px){}
+      ================ PC LARGE
+      @media(min-width:1300px){}
+  */
+
+  #colorBtnContainer{
+    position:absolute;
+    right: -16.1px;
+    top: 222px;
+    height: 117px;
+    width: 77px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    z-index: 333;
+  }
+
+  .checkedIcon{
+    color: var(--back-color);
+    fill: var(--accent-color);
+   }
+
+  /*==========================Toggle*/
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 34px;
+    height: 60px;
+  }
+
+  .switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--accent-color);
+    border-color: var(--main-color);
+    border-style: solid;
+    border-width: thin;
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: 34px;
+  }
+
+  .slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 3.33px;
+    bottom: 4px;
+    background-color: var(--main-color);
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: 50%;
+  }
+
+  input:checked + .slider {
+    background-color: var(--accent-color);
+  }
+
+  input:checked + .slider:before {
+    -webkit-transform: translateY(-26px);
+    -ms-transform: translateY(-26px);
+    transform: translateY(-26px);
+  }
+
+  /*================ PC LARGE*/
+  @media(min-width:1300px){
+    #colorBtnContainer{
+      right: unset;
+      left: -3.33px;
+      top: 444px;
+    }
+  }
+</style>
+
+<script>
+  export default {
+    name : 'InfoContent',
+    data(){
+      return{
+        isChecked: false
+      }
+    },
+    methods:{
+      toggleTheme(){
+        if(this.isChecked){
+          this.isChecked = false;
+          return document.documentElement.setAttribute("data-theme", "light")
+        }else{
+          this.isChecked = true;
+          return document.documentElement.setAttribute("data-theme", "dark")
+        }
+      }
+    },
+    mounted(){
+      console.log("Theme button is loaded!");
+    }
+  };
+</script>