Is there a way to produce a unique color using Stylus CSS?

Question

Is there a way to produce a unique color using Stylus CSS?

Currently, I'm utilizing Express for Node.js and Stylus as the CSS engine. While Stylus is great, I'm facing some challenges in passing color variables or generating random colors. Despite attempting to use the javascript API for stylus, I find myself confused and perhaps complicating things unnecessarily.

var stylus = require('stylus');

app.use(stylus.middleware({
  src: __dirname + '/public',
  compile: function (str, path) {
    var mylib = function(style) {
      style.define('randomColor', function () {
        return '#5f5'; // using a temporary color just to test functionality.
      });
    };
    return stylus(str).use(mylib);
  }
}));

In my stylus sheet, I have:

mainColor = randomColor()

Unfortunately, this results in the following error message:

RGB or HSL value expected, got a string #5f5

I am struggling to pass a color variable correctly from JavaScript to the Stylus sheet.

Edit:

Find my app.js file here: https://gist.github.com/4345823
And my Stylus file here: https://gist.github.com/4345839

javascript css node.js express stylus

Answer 1

Answer №1

Even though this response is coming in late, it's important to address valuable information - the issue at hand, as you pointed out, is that Stylus is being supplied with a string instead of an RGB or HSL color node.

In Stylus, strings are represented like this: 'text'. When these strings are compiled into CSS, they remain unchanged. What you actually need is raw CSS text, not a string.

Fortunately, Stylus provides a built-in function called unquote() to convert a string into plain CSS text:

You can simply modify the line from

mainColor = randomColor()

to

mainColor = unquote(randomColor())

However, for cleaner code in your Stylus stylesheet, consider utilizing the nodes object in the Stylus JavaScript API. When passing a function from JavaScript to Stylus, it's recommended to return a Stylus node rather than a primitive data type:

style.define('randomColor', function () {
  var randomNum = function() { return Math.floor(Math.random() * 255 + 1); },
      r = randomNum(),
      g = randomNum(),
      b = randomNum();
  return new stylus.nodes.RGBA(r, g, b, 1); // random RGB node.
});

Although documentation on Stylus Nodes may be limited, you can refer to this source for all available nodes.

Answer 2

Even though this response is coming in late, it's important to address valuable information - the issue at hand, as you pointed out, is that Stylus is being supplied with a string instead of an RGB or HSL color node.

In Stylus, strings are represented like this: 'text'. When these strings are compiled into CSS, they remain unchanged. What you actually need is raw CSS text, not a string.

Fortunately, Stylus provides a built-in function called unquote() to convert a string into plain CSS text:

You can simply modify the line from

mainColor = randomColor()

to

mainColor = unquote(randomColor())

However, for cleaner code in your Stylus stylesheet, consider utilizing the nodes object in the Stylus JavaScript API. When passing a function from JavaScript to Stylus, it's recommended to return a Stylus node rather than a primitive data type:

style.define('randomColor', function () {
  var randomNum = function() { return Math.floor(Math.random() * 255 + 1); },
      r = randomNum(),
      g = randomNum(),
      b = randomNum();
  return new stylus.nodes.RGBA(r, g, b, 1); // random RGB node.
});

Although documentation on Stylus Nodes may be limited, you can refer to this source for all available nodes.

Answer 3

Answer №2

If you're looking to create a random color, there are a few ways you can achieve this:

 var col =  rgb(' + 
              (Math.floor(Math.random() * 256)) 
             + ',' + (Math.floor(Math.random() * 256)) 
             + ','  + (Math.floor(Math.random() * 256)) + ') ;

Alternatively, you can use the following JavaScript function:

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

To convert a hex color code to RGB values, you can utilize this function:

function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

Answer 4

If you're looking to create a random color, there are a few ways you can achieve this:

 var col =  rgb(' + 
              (Math.floor(Math.random() * 256)) 
             + ',' + (Math.floor(Math.random() * 256)) 
             + ','  + (Math.floor(Math.random() * 256)) + ') ;

Alternatively, you can use the following JavaScript function:

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

To convert a hex color code to RGB values, you can utilize this function:

function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

Answer 5

Answer №3

My approach involved creating classes for a variety of color arrays and utilizing javascript to dynamically alter these classes at set intervals.

// styles.css

colors = 0 30 60 90 120 150 180 210 240 270 300 330

for hue, index in colors
  color = hsl(hue, 100%, 75%)
  .bodyColor{index}
    color: lighten(color, 55%) !important
    //background-color: darken(color, 97%) !important
  .borderColor{index}
    border-color: darken(color, 65%) !important
  a.linkColor{index}, a.linkColor{index}:visited
    color: lighten(color, 85%)
  .containerColor{index}
    background-color: color !important
  a.buttonColor{index}
    color: darken(color, 75%) !important
    background-color: lighten(color, 25%)
  a.buttonColor{index}:hover
    background-color: darken(color, 50%)
    color: lighten(color, 85%) !important

// dynamicColorScript.js

(function ($) {

  $(document).bind('initialize', function (e) {
    if (!e.firstLoad) return;

    var colorIndex = 3,
      delay = 10,
      items = [
        { element: 'body', cssClass: 'bodyColor' },
        { element: '#banner', cssClass: 'borderColor' },
        { element: 'a', cssClass: 'linkColor' },
        { element: '.translucentFrame', cssClass: 'containerColor' },
        { element: 'a.button', cssClass: 'buttonColor' }
      ];

    $(document).data('colorItems', items);

    (function changeColors() {
      items.forEach(function (item) {
        $(item.element).removeClass(item.cssClass + colorIndex);
      });

      colorIndex = Math.floor(Math.random()*11);
      $(document).data('colorIndex', colorIndex);

      items.forEach(function (item) {
        $(item.element).addClass(item.cssClass + colorIndex);
      });

      setTimeout(changeColors, delay * 1000);
    })();
  });

})(jQuery);

Answer 6

My approach involved creating classes for a variety of color arrays and utilizing javascript to dynamically alter these classes at set intervals.

// styles.css

colors = 0 30 60 90 120 150 180 210 240 270 300 330

for hue, index in colors
  color = hsl(hue, 100%, 75%)
  .bodyColor{index}
    color: lighten(color, 55%) !important
    //background-color: darken(color, 97%) !important
  .borderColor{index}
    border-color: darken(color, 65%) !important
  a.linkColor{index}, a.linkColor{index}:visited
    color: lighten(color, 85%)
  .containerColor{index}
    background-color: color !important
  a.buttonColor{index}
    color: darken(color, 75%) !important
    background-color: lighten(color, 25%)
  a.buttonColor{index}:hover
    background-color: darken(color, 50%)
    color: lighten(color, 85%) !important

// dynamicColorScript.js

(function ($) {

  $(document).bind('initialize', function (e) {
    if (!e.firstLoad) return;

    var colorIndex = 3,
      delay = 10,
      items = [
        { element: 'body', cssClass: 'bodyColor' },
        { element: '#banner', cssClass: 'borderColor' },
        { element: 'a', cssClass: 'linkColor' },
        { element: '.translucentFrame', cssClass: 'containerColor' },
        { element: 'a.button', cssClass: 'buttonColor' }
      ];

    $(document).data('colorItems', items);

    (function changeColors() {
      items.forEach(function (item) {
        $(item.element).removeClass(item.cssClass + colorIndex);
      });

      colorIndex = Math.floor(Math.random()*11);
      $(document).data('colorIndex', colorIndex);

      items.forEach(function (item) {
        $(item.element).addClass(item.cssClass + colorIndex);
      });

      setTimeout(changeColors, delay * 1000);
    })();
  });

})(jQuery);

Answer 7

Answer №4

Although I know my response comes quite delayed, I came across this information thanks to a quick search on Bing. The simplest method I established involves the following steps:

generateRandom(minimum, maximum)
  return Math.floor( Math.random() * (maximum - minimum + 1) + minimum )
randomColorChannelValue()
  return generateRandom(0, 255)
createRandomColor()
  return `rgb(${randomColorChannelValue()}, ${randomColorChannelValue()}, ${randomColorChannelValue()})`

Answer 8

Although I know my response comes quite delayed, I came across this information thanks to a quick search on Bing. The simplest method I established involves the following steps:

generateRandom(minimum, maximum)
  return Math.floor( Math.random() * (maximum - minimum + 1) + minimum )
randomColorChannelValue()
  return generateRandom(0, 255)
createRandomColor()
  return `rgb(${randomColorChannelValue()}, ${randomColorChannelValue()}, ${randomColorChannelValue()})`

Is there a way to produce a unique color using Stylus CSS?

Edit:

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

troubleshooting angular universal with HTTPS

Modifying the temp variable by assigning a new value to this.value in Javascript

Encountering a Conflict with NPM Peer Dependencies

Square-shaped arch chart utilizing Highcharts library

Activate and Deactivate Link in Bootstrap Navigation Bar

Tips for recognizing users in socket.io?

Create a single declaration in which you can assign values to multiple const variables

Foundation Framework sidebar by Zurb

How to retrieve session information in a Next.js page utilizing withIronSession()

Do we need to employ strict mode when utilizing specific ES6 functions in Node.js?

Internet Explorer struggling to function due to JavaScript errors

Interaction between index file and module instance

A simple guide on accessing a local PDF file and returning it as the response for an ExpressJS application

Secure access to the Express API with Kinde protection

Store information in Factory and retrieve it in the controller

Guide to accessing a mongoose model that is not part of your current project

Steps for converting a window to a PDF file rather than an XPS file

Having trouble with looping the CSS background using JavaScript in CodePen

Exploring Next.js nested dynamic routes: utilizing getStaticProps for data fetching and sharing data across routes

Breaking apart faces of a sphere using Three.js