drags-and-nerds/v1-com-officielle/src/titleComponents/ColorBtn.vue

<script setup>
    import DayIcon from '../assets/icons/day.svg'
    import NightIcon from '../assets/icons/night.svg'
</script>

<template>
    <div id="colorBtnContainer">
      <NightIcon name="cyber" class="icon" :class="{checkedIcon: isChecked}"/>
      <label class="switch">
        <input type="checkbox" @click="toggleTheme">
        <span class="slider" data-tooltip="thème"></span>
      </label>
      <DayIcon 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: 7.77px;
    top: 144px;
    height: 144px;
    width: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    z-index: 0;
    background-color: var(--back-color);
    border-color: var(--main-color);
    color: var(--back-color);
    border-radius: 25px;
    border-style: solid;
    border-width: thin;
  }

  .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;
    cursor: cell;
  }

  .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%;
    cursor: cell;
  }

  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: 4.44px;
      width: 50px;
      height: 161px;
      top: 28%;
    }
  }
</style>

<script>
  export default {
    name : 'InfoContent',
    emits: ['themeDark', 'themeLight'],
    data(){
      return{
        isChecked: false
      }
    },
    methods:{
      toggleTheme(){
        if(this.isChecked){
          this.isChecked = false;
          this.$emit('themeLight');
          return document.documentElement.setAttribute("data-theme", "light")
        }else{
          this.isChecked = true;
          this.$emit('themeDark');
          return document.documentElement.setAttribute("data-theme", "dark")
        }
      }
    },
    mounted(){
      console.log("Theme button is loaded!");
    }
  };
</script>