Is possible to set the default value of layoutMode to dark?

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
tech.admin
Posts: 16
Joined: 19 Apr 2021, 02:41

25 Oct 2021, 05:55

I changed the layoutMode to dark in AppWrapper.vue. But it does not work. What do I have to do?

Code: Select all

	export default {
        data() {
            return {
                theme: 'blue',
                layoutMode: 'dark',
                topbarTheme: 'blue',
                menuTheme: 'light',
            }
        },

tugce.kucukoglu
Posts: 560
Joined: 23 Oct 2020, 09:28

25 Oct 2021, 08:22

You need to also changed layoutMode from light to dark in src/main.js

and

href attribute needs to be chanaged from layout-light.css to layout-dark.css in public/index.html.

tech.admin
Posts: 16
Joined: 19 Apr 2021, 02:41

31 Oct 2021, 06:03

Hi Dear,

I wrote the following code, the css: "layout-css" can be replaced, but not "'theme-css". Do you have ideas?

Code: Select all

# config.js

export default {
  layoutMode: 'dark' 
}

# AppWrapper.vue

<script>
import configs from '@/configs'

const { layoutMode } = configs

export default {
  data() {
    return {            
      layoutMode: layoutMode
    }
  },
  mounted : {
	this.onLayoutChange(layoutMode)
	this.onLayoutModeChange(layoutMode)
	
  },
  methods: {
    onLayoutChange(layout) {
      this.layoutMode = layout
      this.$appState.layoutMode = layout
      this.menuTheme = layout

      const logo = document.getElementById('logo')
      logo.src = 'assets/layout/images/logo-light.svg'
            
      if (layout === 'dark') {
        this.topbarTheme = 'dark'
      }
      else {
        this.topbarTheme = 'blue'
      }
    },
    onLayoutModeChange(menuColor) {      

      const layoutLink = document.getElementById('layout-css')
      const layoutHref = 'assets/layout/css/layout-' + menuColor + '.css'
      this.replaceLink(layoutLink, layoutHref)

      const themeLink = document.getElementById('theme-css')
      const urlTokens = themeLink.getAttribute('href').split('/')
      urlTokens[urlTokens.length - 1] = 'theme-' + menuColor + '.css'
      const newURL = urlTokens.join('/')

      this.replaceLink(themeLink, newURL, () => {
        this.$appState.isNewThemeLoaded = true
      })
    },
    replaceLink(linkElement, href, callback) {
      const id = linkElement.getAttribute('id')
      const cloneLinkElement = linkElement.cloneNode(true)

      cloneLinkElement.setAttribute('href', href)
      cloneLinkElement.setAttribute('id', id + '-clone')

      linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling)

      cloneLinkElement.addEventListener('load', () => {
        linkElement.remove()
        cloneLinkElement.setAttribute('id', id)

        if (callback) {
          callback()
        }
      })
    },
  }
}

tugce.kucukoglu
Posts: 560
Joined: 23 Oct 2020, 09:28

01 Nov 2021, 08:30

For changing theme-css, you need to change href attribute from theme-light.css to theme-dark.css in public/index.html.

tech.admin
Posts: 16
Joined: 19 Apr 2021, 02:41

02 Nov 2021, 03:22

Can I change "'theme-css" through the configuration file?

tugce.kucukoglu
Posts: 560
Joined: 23 Oct 2020, 09:28

02 Nov 2021, 14:13

Sure, you could change according to your theme choice.

Post Reply

Return to “Ultima - PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest