Creating Custom Stylus Themes using Grunt

Is there a way to make my Stylus file dynamically accept variable input from Grunt, iterate through the variable values, and generate multiple themed CSS files?

This would allow for easy theme switching, similar to the method described in this Stack Overflow post.

Has anyone implemented this before? How would one go about setting it up?

Currently, I have Grunt compiling Stylus into my CSS. However, changing the theme requires manually adjusting the value of the themeName variable in my mainCSS.stylus file and then rebuilding with Grunt.

cssnode.jsthemesgruntjsstylus

Answer №1

Have you considered this approach?

Instead of having all the styles in one main.styl file, you can break them up into different theme files:

@import "variables"; 
//other styles and imports

You could have separate theme files like:

 themes/default.styl
 themes/pretty-theme.styl
 themes/very-pretty-theme.styl

By using grunt-contrib-copy, you can copy the content of themes/default.styl to variables.styl, compile the Stylus code into CSS styles, then repeat the process for other theme files.

copy: {
  default-theme: {
    src: 'themes/default.styl',
    dest: 'variables.styl',
  },
  pretty-theme: {
    src: 'themes/pretty-theme.styl',
    dest: 'variables.styl',
  },
  very-theme: {
    src: 'themes/very-pretty-theme',
    dest: 'variables.styl',
  },
}

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

What could be causing the Express error when this.props.param.match.id is coming up as undefined?

I am currently delving into the world of Express.js, attempting to understand how to utilize it effectively. However, I am encountering an issue where I am unable to retrieve an id value from this.props.match.params. Here is how my express route is set up ...

node.jsreactjsmongodbexpressroutes

Ensure that jquery.load is executed before the HTML content is loaded

Recently, I encountered a situation where I had a bootstrap navbar stored in a separate file, specifically named navbar.html. I utilized Jquery.load() to load this navbar into my HTML page. At the bottom of my HTML page, I included the following code: &l ...

javascriptjqueryhtmlcsstwitter-bootstrap

What steps should I take to ensure my navigation bar spans across the entire page?

I'm new to this and looking for help. I want my navigation bar to span the entire width of the page without any white spaces on the sides or top. Below is my CSS: nav ul {list-style-type: none; margin: 0; padding: 0; overflow: hidden; backgr ...

htmlcssnav

Unable to make jQuery animate top function work

I have three rectangles set up like this. I've managed to make them disappear when clicking the close button on the right side of each rectangle, but I'm struggling with getting the remaining rectangles to move upward to fill the empty space. Her ...

jqueryhtmlcss

Encountering a 404 error when attempting to access a specific route with Express parameters on an Apache Proxy server configured

I am facing an issue while setting up Apache as a reverse proxy for my Express/Node application. The application can be accessed at the correct URL, but a route with Express parameters returns a 404 not found error. Below is the configuration in my server ...

node.jsapacheexpressreverse-proxy

Guide on setting the BackColor of a table cell based on a database value dynamically

In the project I am currently working on, there is a request to change the background color of specific table cells based on their values. In order to achieve this, I am handling the RadGrid_ItemDataBound event and attempting to set the BackColor property ...

cssvb.netcellradgrid

Node.JS encountered an issue preventing the variable from being saved

I've been attempting to store the request.headers, but every time it outputs as [object Object] in the txt file. var http = require("http"); url = require("url"); fs = require("fs"); var events = require('events'); var even = new events.Ev ...

javascriptnode.js

Head styles for tinyMCE

When viewing the tinyMCE example on the official website using Firefox, you may notice the editor blinking. This issue seems to only occur in Firefox, possibly due to external CSS files for the editor. I am considering adding all CSS rules directly into th ...

javascriptcssiframetinymce

Update the node path to point to the current directory

I attempted to execute this command from my user directory NODE_ENV=~/Public/project node socket.js However, it resulted in the following error Error: Cannot find module '/home/user/socket.js' at Function.Module._resolveFilename (module.js ...

node.js

Failure to return the refresh token after receiving the authorization code

I'm currently utilizing the googleapis package within my Node application to obtain a refresh token and access token by passing an authorization code from the front-end. However, I keep encountering the following error message. { error: ...

node.jsoauthgoogle-authenticationgoogle-apis-explorerrefresh-token

What is the best way to retrieve Express app configuration asynchronously?

I am utilizing an Express app developed with the Serverless Framework, which will be hosted via AWS API Gateway and AWS Lambda. The authentication process is handled by Okta, and I am considering storing the necessary secrets in SSM. Currently, I have to f ...

node.jstypescriptexpressasync-await

Using JavaScript variables within the value section of a JSON is a common requirement for developers

var averageTemperature = req.params.rating; var destinationName = req.params.name; var query = { "results.name": destinationName }; var updateQuery = { $set: { "results.$.rating": averageTemperature } }; mach.update(query, updateQuery, function(err, res ...

javascriptjsonnode.js

Incorporate a new object within a static function in Mongoose and process the outcome using the router

I'm struggling to grasp the use of await in Node.js with mongoose and express. On my /profile page, I create a token for every get request based on the connected user: router.get('/profile', requiresLogin, (req, res, next) => { User. ...

node.jsexpressmongoose

What is the procedure for updating the database value once the time limit has been reached?

How can I update a value in the database after a certain time has passed? I implement a temporary ban by setting the ban duration and changing the banned status to true. Once the ban_expiry is past the current time, I need to change is_banned from true to ...

node.jsexpress

An irritating bug causing a 1px difference in Chrome 21

Hey there, I've encountered a strange issue with the datepicker on this website. It works perfectly fine on IE8+, Firefox 14, Chrome 20, and Opera 12. However, as soon as Chrome updated to version 21, things went haywire! I'm baffled and can&apos ...

cssgoogle-chrome

The flickering problem with HTML5 DOM

I created a HTML5 game using canvas and DOM elements, but I'm facing an issue with flickering DOM elements while playing. The problem seems to be more prevalent in mobile browsers, particularly Chrome. My game includes a full screen canvas with vario ...

javascriptjquerycsshtmldom

How about this: "Harness the power of nodeJS, express, and jqtpl

Having an issue with NodeJS as I am still new to it. Currently, I am using nodeJS, express, and JQTPL to follow a tutorial on calling the Github API. However, the problem lies in the Application configuration, specifically in the engine definition. va ...

node.jsexpress

Utilizing Page Objects to select dropdown list items in JavaScript for Protractor testing

I'm struggling with a particular issue during my testing process. The task requires selecting an item from a list as part of a form to create a new user. However, the test does not select an item from the list even though Protractor does not report an ...

javascriptangularjsnode.jsprotractorpageobjects

What is the process for persisting data in a database with mongoose/mongodb?

My project includes a server.js file for building a Node and Express server API. The file contains models I have created, along with routes using both GET and POST methods. server.js var express = require('express'); var app = express(); va ...

node.jsmongodbexpressmongoose

What is the process for installing jsawk on Node.js and executing it with shelljs on a Windows system?

software experts who specialize in JavaScript on Windows, I'm executing a curl request using shelljs and receiving JSON as a response. Here is an example of JavaScript code: var sh = require('shelljs'); sh.exec('curl -H "Accept: appl ...

jsonnode.jsshellawkmsysgit