The user has chosen a CSS stylesheet in Rails

Currently, I am developing a Rails website and I want to give users the option to switch between light and dark CSS themes.

In my view file, I have included the following code snippet to use a variable for the stylesheet:

<%= stylesheet_link_tag @current_stylesheet %>

I attempted to update this variable by adding a link in the view like this:

<%= link_to 'Light Theme', :action => "set_light", :id => @projects %>

This link triggers the following function in my Projects Controller:

class ProjectsController < ApplicationController
  def set_light
    @current_stylesheet = 'light'
  end
end

However, when attempting this approach, an error stating that the template projects/set_light is missing. My goal is to change the theme stylesheet without creating new templates, simply by calling set_light and refreshing the current page. Any recommendations on how to achieve this or possibly a more effective method?

Answer №1

In order to prevent Rails from searching for a 'set_light' template, you can simply include a render statement at the end of your action pointing to an existing template. For example, you can add:

render :action => 'theme_selector'

or

render :template => 'theme_selector'

where theme_selector is the name of the view that is being presented to the user or where the style is being changed.

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

Tips on maintaining and hiding the vertical scrollbar when a popup is open, alongside the navigation bar positioned at the top of the page

After reviewing this pen, my goal is to create a popup that maintains access to the navigation bar (hence avoiding Bootstrap's Modal). However, I am facing the challenge of keeping the scrollbar visible while preventing scrolling in the background whe ...

Several adhesive panels on a dynamic webpage

In the content area of my page, a dynamic number of rows are generated. Each row consists of two columns: a side block and a content area. The goal is to have the side block stick while the page scrolls down until the next block appears and pushes the prev ...

Inconsistencies with Colorbox behavior in an external HTML document

Encountering a strange issue with colorbox while attempting to display a "div" element from another HTML file. The code functions perfectly, except for the final "div" in the external file. The structure of my external file is as follows; div1 img par ...

"Accessing and updating the current navigation state using jQuery/ajax when clicked

Currently, I'm working on a website project where I am using a jquery/ajax script to dynamically pull in content from another page with a fade effect when clicking on a tab in the navigation menu. You can check out the effect on the page here. Only th ...

Learn the trick to make this floating icon descend gracefully and stick around!

I'm trying to create a scrolling effect for icons on my website where they stay fixed after scrolling down a certain number of pixels. I've managed to make the header fixed after scrolling, but I'm unsure how to achieve this specific effect. ...

Whenever I attempt to adjust a CSS value to a negative number, the jquery functionality suddenly ceases to operate

Here is the code that I'm currently using: $(document).ready(function() { $("h1").delay(1000).animate({ top: (0 px), opacity: 1, }, 700, function() {}); }); I'd like to modify it to this: $(document).ready(function() { ...

Generating CSS styles based on an HTML document

I have a file with numerous HTML elements: <div> <div id="imgElt11289447233738dIi15v" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; Z-INDEX: 1; LEFT: 795px; BORDER-LEFT: 0px; WIDTH: 90px; CURSOR: auto; BORDER-BOTTOM: 0px; POSITION: absolute; TOP ...

I'm experiencing an issue where the links in my dropdown button are not showing when I hover over it. What could

I have been attempting to include a dropdown button that reveals several links when the mouse hovers over it. Despite successfully implementing the CSS for this feature, I am encountering an issue where the links are not displayed beneath the button. Afte ...

Modifying jQuery CSS causes certain CSS rules from a file to be deleted

When using jQuery to change the css of an element, I've noticed that it can remove some previously specified css rules for that element. For example, .className, .className2, etc... { background-color: black; color : silver; } .className: ...

Is there a way for me to increment the value of 'sessionStorage.fgattempt' whenever either 'fgMade()' or 'threeMade()' are called?

Currently, I am developing a basketball game stat tracker and need to update the field goal attempts every time I make a field goal or three-pointer. Additionally, I am looking for ways to optimize the javascript code provided. The main requirement is to ...

How do you position items in the center and lower right corner of a flexbox that takes up the entire

One feature on my website is a flex box that takes up the entire window with a width of 100% and a height of 100vh. Within this flex box, I've centered text and a button, but now I'd like to add a footer to the page. If I simply place the footer ...

The scripts do not allow the image to be resized

Struggling to resize an image while implementing a hover effect with css and javascript. The code I have so far is: HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equ ...

TranslateY animation glitching

I need help with expanding a box to 100% height after click, then collapsing and sticking to the bottom. I created a function in Vue framework to handle the animation, but it's not working smoothly. How can I make it less buggy? Check out the demo her ...

Creating a unique CSS style sheet tailored specifically for Internet Explorer and Microsoft Edge – here's how!

Struggling with internet explorer acting up and causing glitches on my website? Check out my problem here. The Issue: An interactive image on my website is not functioning properly in IE & Edge. The image should expand when hovered over, but glitches ...

CSS: The sub-class functionality is not functioning as intended

Having trouble with this HTML element : <span class="item-menu-notif non-lue" onclick="dosomething(2150)"> TEXT </span> These are the CSS classes : .item-menu-notif{ display: block; cursor: pointer; padding: 0 0.4em 0 0.4em; } s ...

Attempting to implement scroll-based animation on my webpage

Having trouble integrating this animation (from codepen) into my website. It works fine on its own, but when I try to add it to my site, it doesn't show up. I want it to appear in the middle at the bottom of the background image. Check out the codepe ...

Tips for maintaining a consistent height for elements in HTML

As the content of td increases, the height of th also increases. How can we ensure a fixed height for th. This is the HTML code: <table id="depts"> <tr> <th>Topic Title</th> <th><a href="create.php?id= ...

Increase the spacing around the content in a textfield

I'm trying to figure out how to prevent text in a textfield from extending all the way to the end of the field. My setup includes a textfield with a background image and a button positioned on the right side of the textfield. I want to ensure that the ...

Issues with jQuery Sliders

Hello there! I am currently in the process of creating a basic jQuery slideshow. The specific requirement for this slideshow is quite simple - I want the images to continuously slide to the left. I have come across numerous tutorials online, but most of th ...

Utilize Flexbox to arrange elements in a grid layout based on specified number of columns and rows

My div is currently empty. <div id="container"></div> I have applied the following styling with CSS: #container{ display: flex; position: relative; flex-flow: row wrap; width: 100%; } The goal is to add more divs to the cont ...