Issue with replacing css in Laravel using JavaScript on non-base routes

A JavaScript function has been implemented to create a theme changer toggle switch, which switches between two different .css files - one for dark theme and the other for white theme. The theme switcher successfully works on base routes like "./routes", however, it is not functioning properly on routes such as "./routes/{id}".

var checkbox = document.getElementById("theme-changer-checkbox");
var body = document.getElementById("kt_body");
var el = document.getElementById("theme-change-styleSheet");

checkbox.onclick = function() {
    myFunction();
};

function myFunction() {
    if (checkbox.checked) {
        el.href = "css/dashboardDarkTheme.css";
        body.style.setProperty("background", "#152036", "important");
    } else {
        el.href = "css/dashboardWhiteTheme.css";
        body.style.setProperty("background", "white", "important");
    }
}

An attempt was made to add the URL before href routes in the following manner:

<link id="theme-change-styleSheet" rel="stylesheet" href="{{URL('css/dashboardWhiteTheme.css')}}"></link>
javascriptcsslaravellaravel-routing

Answer №1

When faced with the limitation of Laravel blade syntax not working in a JavaScript file, I found a simple solution. By embedding the necessary code directly within my blade file using a script tag, I was able to achieve the desired functionality seamlessly.

var checkbox = document.getElementById("theme-changer-checkbox");
var body = document.getElementById("kt_body");
var el = document.getElementById("theme-change-styleSheet");
console.log("href :" + el.href);

checkbox.onclick = function() {
    myFunction()
};

function myFunction() {

    if (checkbox.checked) {
        console.log("{{ asset('css/dashboardWhiteTheme.css') }}");
        el.href = "{{ asset('css/dashboardDarkTheme.css') }}";
        body.style.setProperty('background', '#152036', 'important');
        console.log("href checked :" + el.href);
        
    } else {
        el.href = "{{ asset('css/dashboardWhiteTheme.css') }}";
        body.style.setProperty('background', 'white', 'important');
        console.log("href !checked :" + el.href);
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Horizontally align the list items within a div that has overflow:auto

Currently, I am working on a timeline project and have the following code: $("#time-line-selector ul li a").click(function(event) { event.preventDefault(); $("#time-line-selector ul li a").removeClass("active"); ...

javascriptjqueryhtmlcss

Is there a way to retrieve the JavaScript constructor object by passing it as a parameter in an IIFE function?

In my first method, I have successfully created an object constructor called Person. Inside this constructor, I used an IIFE function expression which is functioning correctly. The property inside this function of Person is accessible! var Person = fun ...

javascriptjquery

Angular: Error when TypeScript object returns an array object value

I have encountered a strange issue where the array value returned as [object Set] when I console log it. It's unclear whether this problem is occurring in the component or the service, but the object values are not being displayed. This issue arises ...

javascriptarraysangulartypescriptangular7

Do Typescript code require the use of a constructor?

After initializing a fresh Aurelia project using the aurelia-cli and executing the au new command, I received the following app.ts: export class App { message = 'Hello World!'; } To enhance my app.ts, I replaced it with the code from a helpfu ...

javascripttypescriptvisual-studio-codeaurelia

Solving the issue of "localstorage is not defined" in NextJS Redux

Currently, I am working on implementing local storage in Next.js with Redux. In Next.js, components are initially rendered server-side, which means that localStorage or window objects are not available until the rendering occurs in a browser. This issue ...

javascriptreactjsreduxnext.jsredux-toolkit

Icons for popular social media platforms displayed at the bottom of

Take a look at my HTML code: <div class="footer-social"> <span>Get in touch:</span> <li><a href="http://www.facebook.com"> <img src='http://www.womenactionmedia.org/cms/assets/themes/crate/images/socia ...

htmlcss

What is the best way to retrieve the value of an UL LI element using jQuery

I'm struggling to retrieve the value of a ul li listbox in a function, and I can't seem to figure out how. Here is my code: <ul class="dropdown-menu" id="newloc"> <?php $res_add = DB::table('res_br')-& ...

javascriptphpjquery

Customizing Material UI tooltip styles with inline CSS formatting

Currently in the process of creating a React component that utilizes the Material UI Tooltip feature. In my component, I have the need to manually reposition the Mui Tooltip by targeting the root popper element (MuiTooltip-popper). However, the Mui Toolti ...

javascriptcssreactjsmaterial-ui

Update the directive automatically whenever a change occurs in the root scope property

I am facing an issue with a directive that generates a random number. My goal is to reload or refresh this directive when a checkbox is toggled. Below is the code I have been using, but unfortunately, it's not working as expected. var app = angular. ...

javascriptangularjs

What is the best way to break a card deck in Bootstrap 4 for optimal display?

Looking for a solution to display generated cards in rows with a fixed height and width. The current code I have only displays all the cards on a single row, making each card too thin: <div class="container"> <div class="card-de ...

htmlcssasp.netmodel-view-controllerbootstrap-4

Executing Script Functions with Additional Parameters in Selenium: A Comprehensive Guide

Whenever I try to execute a script with functions that have multiple parameters, I keep getting an error: Exception in thread "main" org.openqa.selenium.JavascriptException: ReferenceError: coords is not defined This is my script: enter code here if (d ...

javascriptselenium-webdriver

What is the best way to display a Bootstrap alert above all other elements on the page?

I need help with adjusting the placement of my bootstrap alert. Currently, when the input box value is not valid and the button is clicked, the alert shows up below the input box. I would like it to appear in the middle of the page, on top of the text box. ...

javascriptcsstwitter-bootstrapbootstrap-5alert

The looping function in Vue.js data is not functioning properly

Currently, I am developing a shopping cart system using Laravel session and Vue.js. Below is a snippet of my Vue.js code where I loop through the products and add them to the cart/session on click. <div v-for="product in products"> <div cla ...

javascriptlaravelvue.jsvuejs2

"Is it possible in Typescript to set the parameters of a returning function as required or optional depending on the parameters of the current

I am currently exploring Typescript and attempting to replicate the functionality of styled-components on a smaller scale. Specifically, I want to make children required if the user passes in 'true' for the children parameter in createStyledCompo ...

javascriptreactjstypescriptstyled-components

When attempting to display a JSON array, a variable defined as numeric transforms into NaN

I'm attempting to split a JSON array into three-column Bootstrap rows using the code below. My approach involves increasing a numeric variable to 3, adding a new row div, and then setting it back to 1. However, I am encountering an issue where the va ...

javascriptarraysjson

What is the method for implementing two-way binding on a checkbox in Angular?

Within my accordion, I have a series of options in the form of checkboxes. Users are able to select these checkboxes, but I am seeking a way to pre-select certain checkboxes based on specific conditions. The challenge arises when these conditions are deter ...

javascripthtmlarraysangulartypescript

What is the syntax for calling this in <php> tags?

Although I may not be extremely specific in my requirements, I will do my best to clarify them. I am a beginner in web development and I am looking to monetize my website. My goal is to display ads for everyone except selected individuals. I have set up m ...

javascriptphp

What are the steps for establishing a connection to Heroku using node-mongodb-native?

I'm feeling lost when it comes to connecting to MongoLab on Heroku. I came across an example that was supposed to help, but it just left me more confused. You can check it out here. After looking at both the web.js and deep.js files, I noticed they b ...

javascriptnode.jsmongodbheroku

The conflict between ESLint's object curly new line rule and Prettier's multi-line formatting

I'm brand new to the world of prettier, typescript, and eslint. Even though most of the integration is going smoothly, I am facing an issue with multi-line destructuring objects. Prettier Version 1.19.1 Playground link Input: const { ciq, draw ...

javascripttypescripteslintprettier

Trigger an event from the main js file in Electron to communicate with a Vue component

I am currently developing an electron app powered by electron version 5.0.0 The issue I'm facing is with utilizing electron's power monitor feature, which can only be accessed from the main electron js file. However, I need to communicate this i ...

javascriptvue.jselectron