Play with the dynamic themes in Firefox [change Firefox theme by the principal colour of the website]




In this test, I play with the theming API in Firefox, I start with the small article in hacks.mozilla.org for that and making a small thing and need to the developer to make it a big theme with big number list of websites. 


For this test I start with change the theme of Firefox when the website login is in Http or https, when is in https the theme change to green and when the website protocol in HTTP the theme change to red, but after that I look to I can change the color when I change the website domine. So when I login in Blogger, Firefox change the colour to orange and when I am on Facebook, Firefox change the colour to blue :D is good I know :) 
So I need when I am the big sites Firefox change the colour to the principal colour of this website. 

For that, I use this open source project: here and you can download it like a .zip file from here 

First, you need to extract the file zip, like what I do here:

 
The Second, open about:debugging in Firefox browser, and the about:debugging page provides a single place from which you can attach the Firefox Developer Tools to a number of debugging targets. At the moment it supports three main sorts of targets: restartless add-ons, tabs, and workers.
you open it like that:



You look there is " load temporary add-on " button, so click in this button and chose any file from the extracted zip file of  theming rules, see this:


After that you get this:


When you look the Firefox change the theme, for you get what I talking about in the introduction you need to change in the config.js file. I take an example of what I change in this file (in the end). For you change the colour of firefox when we on an example in Mookhtabar blog you need to change the rules, in the rules, you can change several properties like:
  • inactive_window
  • privatebrowsing
  • container
  • domain
  • protocol
  • year
  • month
  • date
  • day
  • hour
  • minutes
  • seconds
And the rules are here:

const RULES = [
here the rules
]; 


And I changed like that: 

const RULES = [
  ["privatebrowsing", "shady"],
  ["protocol == 'http:'", "insecure"],
  ["protocol == 'https:'", "secure"],
  ["domain == 'www.facebook.com'", "facebook"],
  ["domain == 'mookhtabar.blogspot.com'", "Mookhtabar"],
  ["domain == 'www.blogger.com'", "blogger"],
  ["domain == 'www.youtube.com'", "youtube"],
  ["domain == 'web.telegram.org'", "telegram"],
  ["domain == 'www.walidamriou.com'", "walidamriou"]
];


So when we on a website with HTTP protocol we use insecure theme, and we on blogger the theme is blogger ... and in the colours theme, you look:

  blogger: {
    images: {
      headerURL: ""
    },
    colors: {
      accentcolor: "#BF360C",
      textcolor: "#ffff",
      toolbar_text: "#ffff",
      toolbar: "#212121",
    }
  },

 and you can try play with the colours for know what mean :D 

In the end, I make this full script:

// Check the rules every 5 minutes
const CHECK_PERIODICALLY = true;

// Check the rules on every tab update/switch
const CHECK_ON_TAB_CHANGE = true;

// The default theme
const DEFAULT_THEME = "bright";

// The theming rules: priority is given to the bottom-most rule.
const RULES = [
  ["privatebrowsing", "shady"],
  ["protocol == 'http:'", "insecure"],
  ["protocol == 'https:'", "secure"],
  ["domain == 'www.facebook.com'", "facebook"],
  ["domain == 'mookhtabar.blogspot.com'", "Mookhtabar"],
  ["domain == 'www.blogger.com'", "blogger"],
  ["domain == 'www.youtube.com'", "youtube"],
  ["domain == 'web.telegram.org'", "telegram"],
  ["domain == 'www.walidamriou.com'", "walidamriou"]
];

const THEMES = {
  telegram: {
    images: {
      headerURL: ""
    },
    colors: {
      accentcolor: "#006064",
      textcolor: "#ffff",
      toolbar_text: "#ffff",
      toolbar: "#C62828",
    }
  },
  youtube: {
    images: {
      headerURL: ""
    },
    colors: {
      accentcolor: "#D50000",
      textcolor: "#ffff",
      toolbar_text: "#ffff",
      toolbar: "#212121",
    }
  },
  blogger: {
    images: {
      headerURL: ""
    },
    colors: {
      accentcolor: "#BF360C",
      textcolor: "#ffff",
      toolbar_text: "#ffff",
      toolbar: "#212121",
    }
  },
  Mookhtabar: {
    images: {
      headerURL: ""
    },
    colors: {
      accentcolor: "#00dd6b",
      textcolor: "#ffff",
      toolbar_text: "#ffff",
      toolbar: "#212121",
    }
  },
  walidamriou: {
    images: {
      headerURL: ""
    },
    colors: {
      accentcolor: "#880E4F",
      textcolor: "#ffff",
      toolbar_text: "#ffff",
      toolbar: "#212121",
    }
  },
  insecure: {
    images: {
      headerURL: ""
    },
    colors: {
      accentcolor: "#B71C1C",
      textcolor: "#ffff",
      toolbar_text: "#ffff",
      toolbar: "#212121",
    }
  },
  secure: {
    images: {
      headerURL: ""
    },
    colors: {
      accentcolor: "#1B5E20",
      textcolor: "#ffff",
      toolbar_text: "#ffff",
      toolbar: "#212121",
    }
  },
  shady: {
    images: {
      headerURL: ""
    },
    colors: {
      accentcolor: "#000",
      textcolor: "#ddd",
      toolbar_text: "#ccc",
      toolbar: "#3a3a3a"
    }
  },
  facebook: {
    images: {
      headerURL: ""
    },
    colors: {
      accentcolor: "#3F51B5",
      textcolor: "#ffff",
      toolbar_text: "#ffff",
      toolbar: "#212121",
    }
  }
};



Finally, I get this:


For the project, we need to make a theme like that:


for that, we need the volunteer for chose the principal colour (we use Metrial design colour palette from here )of websites to add. You can start for that here:

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel