Hi Shri
I think you actually have the right idea there, if you want the effect to be applied to the whole scene.
Back in the day (almost 20 years ago :O ) I made a simple game where I changed the palette to blue-ish tones to simulate a "night" effect. It worked really well for the time, and it was possible because at that time you could only have "palettized" 256-colors graphics, that's what the top video cards supported back then.
These days things are different, but there would be nothing wrong with using the same sort of idea.
The problem is, drawing pixels into the canvas is a very expensive operation (especially on mobile platforms). It doesn't matter too much if you're drawing a simple rectangle or a complex scene, if you're drawing lots of pixels into the canvas, that's always going to be slow on mobile. So simply drawing a big rectangle every frame on top of everything is not really an option.
Luckily, with WADE you can do this in a much (much!) faster way. First of all, you could draw this rectangle on a separate layer, and change the resolution factor of that layer (with wade.setLayerResoluctionFactor()). For example, you could set it to 0.1, so it contains only 1% of the pixels of a regular layer.
Additionally, with WADE 1.3 you can use wade.fadeOutLayer() that, internally, makes use of hardware-accelerated CSS for the transition (withouth having to redraw your rectangle to change the alpha).
If you do it that way, it would be extremely fast, and may even look pretty good (but I'd make the rectangle blue rather than grey).
The tricky bit is getting this effect on the right layer. It has to be on top of everything else, except objects that emit lights. So if you have a fire, or a torch light, they should be drawn on a different layer, over the night effect layer. And of course UI should be on top of everyything else.
