CODEWITHSUNDEEP
javascriptcsscolors
Sergey
Sergey

Reputation: 77

Pulling colors out of a CSS file using Javascript

I'm uploading a css file from which I hope to log every color that is referenced.

So if the css file has {background-color:#ffffff; color:#000000;} , I hope to be able to create a list consisting of: #ffffff, #000000.

What would be the best way of doing this?
The project I am working on is on GitHub if you would like some reference: https://github.com/yeremenko/farbe

Thank you in advance for any help you might provide!

function getFileContents () {
    var reader = new FileReader();

    reader.onload = function(contents) {
        var fileContents = contents.target.result;  //Stores file contents
        var singleColor  = /*magic*/;

    };

    reader.readAsText(selectedFile);            //Gets file contents into string

};

getFileContents();

Upvotes: 2

Views: 87

Answers (1)

Dropout
Dropout

Reputation: 13866

I'm not sure if this answers your question completely, but if you have the CSS file and you can read it's content, then you can simply parse out the colors. Just keep in mind that there are more types of color specifications inside CSS.

Examples:

  • #FFFFFF or #FFF as hexadecimal specification;

regexes: #[0-9aA-fF]{3} and #[0-9aA-fF]{6}

  • (255,255,255) or (255,255,255,1) as RGB or RGBA specification

regex: \([0-9]{1,3}( *, *)[0-9]{1,3}( *, *)[0-9]{1,3}( *, *[0-1]{1}(\.[0-9]*)?)\)

  • white as a color name specification

This might be a bit difficult - finding these would be probably easiest by forming a list of the available color names in CSS and looking for them separately.

With this in mind you can for example execute

var cssContent = cssFile.readContent(); // get the file into a String
firstPattern = "/`#[0-9aA-fF]{3}/g";
var matches = firstPattern.exec(cssContent);
while(matches!=null){
    // append to your output
}
//and so on for other patterns

Hope it helps at least a bit!

Upvotes: 1

Related Questions