The page returns the default theme when refreshing the page : LocalStaorage value = 'undifined'

I would like to set up a multiple theme color switcher with Vue 3. I created this function (code bellow) which works and changes the colors well, but when I refresh the page, the page returns the default theme color, but I would like that it keeps the previously selected theme color. I have looked in the localStorage of my browser, I see that the value of the default theme when the page is displayed is undifined, what have I done that is not working well ?

here is my code

function setColors (color) {
  // const root = document.documentElement
  // root.style.setProperty('--color-primary', `var(--color-${color})`)
  // root.style.setProperty('--color-primary-50', `var(--color-${color}-50)`)
  // root.style.setProperty('--color-primary-100', `var(--color-${color}-100)`)
  // root.style.setProperty('--color-primary-light', `var(--color-${color}-light)`)
  // root.style.setProperty('--color-primary-lighter', `var(--color-${color}-lighter)`)
  // root.style.setProperty('--color-primary-dark', `var(--color-${color}-dark)`)
  // root.style.setProperty('--color-primary-darker', `var(--color-${color}-darker)`)
  // window.localStorage.setItem('color', color)
	// this.getColor = localStorage.getItem('color')
  // return this.selectedColor = 'massado'

  const root = document.documentElement
  root.style.setProperty('--color-primary', `var(--color-${color})`)
  root.style.setProperty('--color-primary-25', `var(--color-${color}-25)`)
  root.style.setProperty('--color-primary-50', `var(--color-${color}-50)`)
  root.style.setProperty('--color-primary-100', `var(--color-${color}-100)`)
  root.style.setProperty('--color-primary-light', `var(--color-${color}-light)`)
  root.style.setProperty('--color-primary-lighter', `var(--color-${color}-lighter)`)
  root.style.setProperty('--color-primary-dark', `var(--color-${color}-dark)`)
  root.style.setProperty('--color-primary-darker', `var(--color-${color}-darker)`)
  // this.selectedColor = color
  window.localStorage.setItem('color', color)
  return {
    selectedColor: 'massado',
    setColors,
  }
  //
}

Thank you in advance for your help.

LaryAI

3 years ago

Best Answer

Level 58

The issue is that the localStorage value is not being retrieved and applied when the page is loaded. To fix this, you can add a check to see if a color has been previously selected and apply it on page load. Here's an example:

function setColors(color) {
  const root = document.documentElement;
  root.style.setProperty("--color-primary", `var(--color-${color})`);
  root.style.setProperty("--color-primary-25", `var(--color-${color}-25)`);
  root.style.setProperty("--color-primary-50", `var(--color-${color}-50)`);
  root.style.setProperty("--color-primary-100", `var(--color-${color}-100)`);
  root.style.setProperty("--color-primary-light", `var(--color-${color}-light)`);
  root.style.setProperty("--color-primary-lighter", `var(--color-${color}-lighter)`);
  root.style.setProperty("--color-primary-dark", `var(--color-${color}-dark)`);
  root.style.setProperty("--color-primary-darker", `var(--color-${color}-darker)`);
  window.localStorage.setItem("color", color);
}

// Check if a color has been previously selected and apply it
const selectedColor = window.localStorage.getItem("color");
if (selectedColor) {
  setColors(selectedColor);
}

This code retrieves the color value from localStorage and applies it using the setColors function if it exists. This way, the previously selected color will be applied on page load instead of the default color.

1 like

Rod2rick

3 years ago

Level 1

@LaryAI Thanks a lot for your help. I deleted all the codes and started over and used your code and it works fine.

MaverickChan

3 years ago

Level 47

move these outside your function

return {
    selectedColor: 'massado',
    setColors,
  }

Rod2rick

3 years ago

Level 1

@MaverickChan I have remove the return outside the function and i get this error [plugin:vite:vue] [@vue/compiler-sfc] 'return' outside of function.

MaverickChan

3 years ago

Level 47

show more codes inside <script> tag

Please or to participate in this conversation.