Change Logo

Change light Logo

To change logo : packages/main/src/layouts/full/logo/LogoLight.vue
Put the logo image into the /images/logos folder.
                    
<script setup lang="ts">
import { RouterLink } from 'vue-router';
import Darklogo from '@/assets/images/logos/logo-white.svg';
</script>
<template>
  <div class="logo">
      <RouterLink to="/">
          <img :src="Darklogo" alt="home" />
      </RouterLink>
  </div>
</template>
      
                        

Change Dark Logo

To change logo : packages/main/src/layouts/full/logo/LogoDark.vue
Put the logo image into the /images/logos folder.
                    
<script setup lang="ts">
  import { RouterLink } from 'vue-router';
  import logo from '@/assets/images/logos/logo-dark.svg';
</script>
<template>
    <div class="logo">
      <RouterLink to="/">
          <img :src="logo" alt="home" />
      </RouterLink>
    </div>
</template<
      
                        

Change Light RTL Logo

To change logo : /src/layouts/full/logo/RtlLogoLight.vue
Put the logo image into the /images/logos folder.
                    
<script setup lang="ts">
  import { RouterLink } from 'vue-router';
  import RtlLightlogo from '/images/logos/dark-rtl-logo.svg';
</script>
<template>
    <div class="logo">
        <RouterLink to="/">
            <img :src="RtlLightlogo" alt="home"/>
        </RouterLink>
    </div>
</template>
      
                        

Change Dark RTL Logo

To change logo : /main/src/layouts/full/logo/RtlLogoDark.vue
Put the logo image into the /images/logos folder.
                    
<script setup lang="ts">
  import { RouterLink } from 'vue-router';
  import RtlDarklogo from '/images/logos/light-logo-rtl.svg';
</script>
<template>
    <div class="logo">
        <RouterLink to="/">
            <img :src="RtlDarklogo" alt="home"/>
        </RouterLink>
    </div>
</template>