Customizing the appearance of a Vue.js Single Page Application with

Question

Customizing the appearance of a Vue.js Single Page Application with

I have a custom-built Vue.js single page application and I am interested in implementing user-switchable dynamic themes. I envision a scenario where users can easily toggle between 'light' and 'dark' themes by clicking a button, and have the entire app update instantaneously to reflect their selection. Additionally, I want all the theme scss files to be stored locally for better control.

While I came across this resource, it falls short as it does not address the issue of using local theme files.

const themes = {
  flatly: "https://bootswatch.com/4/flatly/bootstrap.min.css",
  materia: "https://bootswatch.com/4/materia/bootstrap.min.css",
  solar: "https://bootswatch.com/4/solar/bootstrap.min.css"
};

I attempted to modify the answer provided by replacing the external links with local paths:

const themes = {
  dark: "dark-theme.scss",
  light: "light-theme.scss"
};

However, this approach seems to be ineffective due to potential Webpack or compilation issues that prevent the inclusion of scss files in the project.

In my exploration, I discovered that manually linking the theme files in the index.html file allows them to appear in the client source:

<link rel="stylesheet" type="text/css" href="<%= BASE_URL %>dark-theme.scss">

Yet, I struggle with understanding how to reference these files within the application itself. For instance, referencing

http://localhost:8080/dark-theme.scss

might not work in production.

I also investigated other resources like:

this post, which encounters similar hurdles to the one mentioned above
this thread, focusing on scss variables without accommodating attribute modifications
this article, proposing an approach involving theme-aware components

Moreover, I tested importing the scss files directly in the main.ts file, which successfully added them to the head section but did not enable seamless switching between themes. The lack of identifiable classes or IDs made it challenging to manipulate them effectively.

<style type="text/css" >
  ...
</style>

javascript html css vue.js webpack

Answer 1

Answer №1

Main.ts:

import "@/path/to/dark-theme.scss"
import "@/path/to/light-theme.scss"

Dark-theme.scss:

body.dark {
  /* custom styles for dark theme */
}

Light-theme.scss:

body.light {
  /* custom styles for light theme */
}

Index.html (or loading based on local storage or OS settings):

<body class="light">

Add the following code where you want to implement the theme switch:

methods: {
  toggleTheme() {
    document.body.classList.toggle('dark')
    document.body.classList.toggle('light')
  }
}

Answer 2

Main.ts:

import "@/path/to/dark-theme.scss"
import "@/path/to/light-theme.scss"

Dark-theme.scss:

body.dark {
  /* custom styles for dark theme */
}

Light-theme.scss:

body.light {
  /* custom styles for light theme */
}

Index.html (or loading based on local storage or OS settings):

<body class="light">

Add the following code where you want to implement the theme switch:

methods: {
  toggleTheme() {
    document.body.classList.toggle('dark')
    document.body.classList.toggle('light')
  }
}

Answer 3

Answer №2

One neat little trick just popped into my head that you might find useful. Try creating two empty components for your theme in the following way:

<template><div></div></template>
<script>export default {name: 'CustomTheme'}</script>
<style>
  @import "~@/path/to/theme.scss"
</style>

Now, within your application, you can conditionally render these two components using v-if like this:

<custom-theme v-if="theme == 'custom'"/>
<default-theme v-if="theme == 'default'"/>

Note: Please keep in mind that this code has not been tested yet.

Answer 4

One neat little trick just popped into my head that you might find useful. Try creating two empty components for your theme in the following way:

<template><div></div></template>
<script>export default {name: 'CustomTheme'}</script>
<style>
  @import "~@/path/to/theme.scss"
</style>

Now, within your application, you can conditionally render these two components using v-if like this:

<custom-theme v-if="theme == 'custom'"/>
<default-theme v-if="theme == 'default'"/>

Note: Please keep in mind that this code has not been tested yet.

Customizing the appearance of a Vue.js Single Page Application with

Answer №1

Answer №2

Similar questions

Trigger a click event to alter the child div elements

Display data in Highchart legend only if it has values

I'm having trouble with my Laravel edit page not functioning properly when using vue.js. Can anyone help me troubleshoot

Ways to achieve varying border widths among multiple divs that are linked to text size

How can I eliminate whitespace from Vue's compiled output?

IE presenting problems with JQuery content loaded via Ajax

What is the best way to set up a dropdown menu in a data grid where the width matches the fields?

Method for extracting URL parameters while utilizing a hash within the URL

Converting a for loop into a fixed-size array?

Is it possible to position a border outside of the parent element's constraints?

Transforming an array into key-value pairs where the keys are odd elements and the values are even elements

Angular tutorial: Accessing individual HTML elements within the *ngFor loop

Angular directive: inability to pass ng-repeat item through isolate scope

"Utilizing JavaScript to Disable a MenuItem in ASP .NET: A Step-by-Step

Ways to conceal the lower details in DataGrid Material-UI

Guide on parsing a JavaScript file and converting the default export module to JSON with Node.js

python and html tutorial for adding text from bottom to top

Use a personalized CSS class with the Kendo Dropdown Widget

Steps for accessing specific menu div on a new tab

"Exploring the World Wide Web with Internet Explorer Driver and Webdriver