Skip to content

Instantly share code, notes, and snippets.

@larryfox
Last active February 22, 2022 21:27
Show Gist options
  • Save larryfox/1636338 to your computer and use it in GitHub Desktop.
Save larryfox/1636338 to your computer and use it in GitHub Desktop.

Revisions

  1. larryfox revised this gist Oct 8, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion LICENSE.txt
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
    Version 2, December 2004

    Copyright (C) 2012 Larry Fox <http://la.rryfox.us>
    Copyright (C) 2015 Larry Fox <http://larryfox.us>

    Everyone is permitted to copy and distribute verbatim or modified
    copies of this license document, and changing it is allowed as long
  2. larryfox revised this gist Oct 8, 2015. 1 changed file with 0 additions and 2 deletions.
    2 changes: 0 additions & 2 deletions lightordark.min.js
    Original file line number Diff line number Diff line change
    @@ -1,2 +0,0 @@
    // Determine if the background color of an element is light or dark.
    (function(d){d.fn.lightOrDark=function(){var b,c,a;a=this.css("background-color");a.match(/^rgb/)?(a=a.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/),b=a[1],c=a[2],a=a[3]):(a=+("0x"+a.slice(1).replace(5>a.length&&/./g,"$&$&")),b=a>>16,c=a>>8&255,a&=255);127.5<Math.sqrt(0.299*b*b+0.587*a*a+0.114*c*c)?this.addClass("light"):this.addClass("dark")}})(jQuery);
  3. larryfox revised this gist Oct 8, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions lightordark.js
    Original file line number Diff line number Diff line change
    @@ -8,8 +8,8 @@
    if (a.match(/^rgb/)) {
    a = a.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
    r = a[1];
    b = a[2];
    g = a[3];
    g = a[2];
    b = a[3];
    } else {
    a = +("0x" + a.slice(1).replace( // thanks to jed : http://gist.github.com/983661
    a.length < 5 && /./g, '$&$&'
  4. larryfox revised this gist Feb 5, 2012. 1 changed file with 24 additions and 32 deletions.
    56 changes: 24 additions & 32 deletions lightordark.js
    Original file line number Diff line number Diff line change
    @@ -2,41 +2,33 @@
    (function($){

    $.fn.lightOrDark = function(){
    var rgb,r,b,g,hsp,a
    , $this = this
    , color = this.css('background-color');
    var r,b,g,hsp
    , a = this.css('background-color');

    function rgb(a){
    if (a.match(/^rgb/)) {
    a = a.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
    r = a[1];
    b = a[2];
    g = a[3];
    } else {
    a = +("0x" + a.slice(1).replace( // thanks to jed : http://gist.github.com/983661
    a.length < 5 && /./g, '$&$&'
    )
    );
    r = a >> 16;
    b = a >> 8 & 255;
    g = a & 255;
    }
    hsp = Math.sqrt( // HSP equation from http://alienryderflex.com/hsp.html
    0.299 * (r * r) +
    0.587 * (g * g) +
    0.114 * (b * b)
    if (a.match(/^rgb/)) {
    a = a.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
    r = a[1];
    b = a[2];
    g = a[3];
    } else {
    a = +("0x" + a.slice(1).replace( // thanks to jed : http://gist.github.com/983661
    a.length < 5 && /./g, '$&$&'
    )
    );
    if (hsp>127.5) {
    // console.log('light')
    $this.addClass('light');
    } else {
    // console.log('dark')
    $this.addClass('dark');
    }
    r = a >> 16;
    b = a >> 8 & 255;
    g = a & 255;
    }
    hsp = Math.sqrt( // HSP equation from http://alienryderflex.com/hsp.html
    0.299 * (r * r) +
    0.587 * (g * g) +
    0.114 * (b * b)
    );
    if (hsp>127.5) {
    this.addClass('light');
    } else {
    this.addClass('dark');
    }

    rgb(color);

    }

    })(jQuery);
  5. larryfox revised this gist Jan 18, 2012. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions lightordark.js
    Original file line number Diff line number Diff line change
    @@ -13,15 +13,15 @@
    b = a[2];
    g = a[3];
    } else {
    a = +("0x" + a.slice(1).replace(
    a = +("0x" + a.slice(1).replace( // thanks to jed : http://gist.github.com/983661
    a.length < 5 && /./g, '$&$&'
    )
    );
    r = a >> 16;
    b = a >> 8 & 255;
    g = a & 255;
    }
    hsp = Math.sqrt(
    hsp = Math.sqrt( // HSP equation from http://alienryderflex.com/hsp.html
    0.299 * (r * r) +
    0.587 * (g * g) +
    0.114 * (b * b)
  6. larryfox revised this gist Jan 18, 2012. 2 changed files with 3 additions and 9 deletions.
    10 changes: 2 additions & 8 deletions lightordark.js
    Original file line number Diff line number Diff line change
    @@ -13,21 +13,15 @@
    b = a[2];
    g = a[3];
    } else {
    a = +("0x" + a.slice(1).replace( // thanks to jed : http://gist.github.com/983661
    a = +("0x" + a.slice(1).replace(
    a.length < 5 && /./g, '$&$&'
    )
    );
    r = a >> 16;
    b = a >> 8 & 255;
    g = a & 255;
    }

    hsp(r,g,b);

    }

    function hsp(r,g,b){
    hsp = Math.sqrt( // HSP equation from http://alienryderflex.com/hsp.html
    hsp = Math.sqrt(
    0.299 * (r * r) +
    0.587 * (g * g) +
    0.114 * (b * b)
    2 changes: 1 addition & 1 deletion lightordark.min.js
    Original file line number Diff line number Diff line change
    @@ -1,2 +1,2 @@
    // Determine if the background color of an element is light or dark.
    (function(g){g.fn.lightOrDark=function(){function d(a,b,c){d=Math.sqrt(0.299*a*a+0.587*b*b+0.114*c*c);127.5<d?f.addClass("light"):f.addClass("dark")}var b,c,e,f=this;(function(a){a.match(/^rgb/)?(a=a.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/),b=a[1],c=a[2],e=a[3]):(a=+("0x"+a.slice(1).replace(5>a.length&&/./g,"$&$&")),b=a>>16,c=a>>8&255,e=a&255);d(b,e,c)})(this.css("background-color"))}})(jQuery);
    (function(d){d.fn.lightOrDark=function(){var b,c,a;a=this.css("background-color");a.match(/^rgb/)?(a=a.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/),b=a[1],c=a[2],a=a[3]):(a=+("0x"+a.slice(1).replace(5>a.length&&/./g,"$&$&")),b=a>>16,c=a>>8&255,a&=255);127.5<Math.sqrt(0.299*b*b+0.587*a*a+0.114*c*c)?this.addClass("light"):this.addClass("dark")}})(jQuery);
  7. larryfox revised this gist Jan 18, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    Step 1: Include the script where ever you please.
    Step 1: Include the script wherever you please.

    Step 2: $('#box').lightOrDark();

  8. larryfox created this gist Jan 18, 2012.
    13 changes: 13 additions & 0 deletions LICENSE.txt
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
    Version 2, December 2004

    Copyright (C) 2012 Larry Fox <http://la.rryfox.us>

    Everyone is permitted to copy and distribute verbatim or modified
    copies of this license document, and changing it is allowed as long
    as the name is changed.

    DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
    TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

    0. You just DO WHAT THE FUCK YOU WANT TO.
    10 changes: 10 additions & 0 deletions README
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    Step 1: Include the script where ever you please.

    Step 2: $('#box').lightOrDark();

    Step 3: ????

    Step 4: PROFIT


    (Note: It depends on jQuery, but I dont see why it wouldn't work with zepto. Feel free to port it to other frameworks too!!!1!!)
    48 changes: 48 additions & 0 deletions lightordark.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,48 @@
    // Determine if the background color of an element is light or dark.
    (function($){

    $.fn.lightOrDark = function(){
    var rgb,r,b,g,hsp,a
    , $this = this
    , color = this.css('background-color');

    function rgb(a){
    if (a.match(/^rgb/)) {
    a = a.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
    r = a[1];
    b = a[2];
    g = a[3];
    } else {
    a = +("0x" + a.slice(1).replace( // thanks to jed : http://gist.github.com/983661
    a.length < 5 && /./g, '$&$&'
    )
    );
    r = a >> 16;
    b = a >> 8 & 255;
    g = a & 255;
    }

    hsp(r,g,b);

    }

    function hsp(r,g,b){
    hsp = Math.sqrt( // HSP equation from http://alienryderflex.com/hsp.html
    0.299 * (r * r) +
    0.587 * (g * g) +
    0.114 * (b * b)
    );
    if (hsp>127.5) {
    // console.log('light')
    $this.addClass('light');
    } else {
    // console.log('dark')
    $this.addClass('dark');
    }
    }

    rgb(color);

    }

    })(jQuery);
    2 changes: 2 additions & 0 deletions lightordark.min.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@
    // Determine if the background color of an element is light or dark.
    (function(g){g.fn.lightOrDark=function(){function d(a,b,c){d=Math.sqrt(0.299*a*a+0.587*b*b+0.114*c*c);127.5<d?f.addClass("light"):f.addClass("dark")}var b,c,e,f=this;(function(a){a.match(/^rgb/)?(a=a.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/),b=a[1],c=a[2],e=a[3]):(a=+("0x"+a.slice(1).replace(5>a.length&&/./g,"$&$&")),b=a>>16,c=a>>8&255,e=a&255);d(b,e,c)})(this.css("background-color"))}})(jQuery);