Dynamic Themes in Firefox
I am Potch, and I am the developer of Mozilla. I want to talk to you about a new extension of Firefox, called dynamic theme. Browsers have long supported themes that allow you to customize the UI look and feel of your browser, change colors, and apply textures.
This is an interesting way to customize and personalize things. Firefox now supports the so-called dynamic theme. These allowed subjects actually respond to changes in browsers. It allows programmatic expansion to change all aspects of the topic currently being applied.
They are neat. You can make interesting things, you can make useful things, you can customize according to the weather or your location. It is programmed control of browser topics. So I want to show you a simple dynamic theme. It lets people know what is possible and wants to make people more excited.
We are looking at static themes. This is called quantum. This is where the Firefox theme becomes one of our designers. As you can see, if you click on it, it will apply this beautiful color, in fact, the text flips from a darker color to a lighter color to match.
So all of these are basic customization. All of these can be programmed in a dynamic theme. I want to show you a simple dynamic theme that I created to show you what is possible and hopefully excite people to make more of it.
My topic responds to whether the currently selected tags are in the reader mode. If you are not familiar with reader mode, you can use it on several different browsers. It needs the content of an article and is formatted as the attraction of independent reading.
So this is a normal hacker post. You can see all the text and images. If we click on the little icon or page here, it will go into reader mode, and now you can see the same content of the article. The pure white background is very simple.
You can customize its appearance. I am not talking about reader mode, but about topic, text reader mode. So this is what the reader mode looks like. The browser view has not changed, and then install my reader mode topic.
I am currently in debug view, which allows me to load extensions temporarily. I have the theme extension of my readers. Now, if we switch back to the label, you will see that the browser displays the open page of the book.
The current tab is a light font color, and the rest tabs fade into the background. It is not necessarily what you want, but it is a neat effect. I want to tell you how it works. Let’s pull the code up.
First, each extension starts with a list. This tells the browser what the extension will do and what permissions it requires. For us, we need to know if the tag is in reader mode, and we need to be able to change the theme.
So we have requested theme permissions and tag permissions. The tab will let us listen to the changes in the current tab or activity tab. The theme lets us modify the theme aspect of browsers.
In addition, we need a script to let us monitor these things and then listen to events. So I registered a background script here. I will show you the script. This is not a very large amount of code. This is about 40 lines of formatted code.
We will first define the theme we want to apply. Obviously, I’ve defined this as a large JS object, but you can easily compute these things dynamically. So you can see we’re applying some images, we’re adjusting them, we’re applying some colors.
First, you will see this header address here. At present, all topics need headline addresses. But the title URL is usually a standard theme graph, usually docked in the upper right-hand corner of browser UI. However, I want my image to be centered. So you can see that I have this little thing here. It says bg.svg, if we look at it, it is a blank image, beautiful and compact.
The browser will use it and draw transparency in the browser’s UI. Unfortunately, these are necessary for backward compatibility, but we can also apply other images. So you can see that this theme has other backgrounds, of which only one is a book.
This is the image of this book. You can see that it is a clipped image of an open book and displayed on the page. You can see that it’s mostly light, a little dark, but mostly light background, which means we might need some way to set up some text.
We have background color. Browsers widen and our images are used up. We will show this background color, which is dark brown in this case. Label text color. I will make the text of the current label white. All other text and other tabs will be black.
So you can see that it has a high contrast appearance here. There is also a toolbar. So, if you return to the theme when you apply the theme, you can see that the current tab and toolbar are translucent black, which is overlaid with it to add some extra contrast.
This is the text color and toolbar color you see. This is a translucent black. In addition, we have these properties. A CSS ISH. Additional background allows custom repeating patterns and image alignment.
The desired image is parked in the upper right corner. We are here to adjust our first picture, which is the only one. Up to the top. This means that it will become the center, and the top of the image will match the top of browser UI.
I hope that when the window widens, I do not want this book to repeat. I want to reveal the background color. So I set it for no repetition. We have a theme. How do we apply it? First, we need to see whether we are in the reader mode or whether we have changed the reader mode.
We have set up several add listeners. The tag has been activated. An event occurs when the activity label changes. It returns an event object, and one of the attributes is which tab. In addition, if the tab changes state but does not necessarily change activation state, the updated event is obtained.
This enables us to monitor whether the current tag is in or out of the reader mode. As you can see, in any case, we grab the ID of the tab and pass it to this function for update. So what’s the function of update? This is very easy. I get information about all the tabs from the ID of the tab.
If it’s not the currently active tab, I’m not interested, because I just change the theme when the active tab is in non-reader mode. Then we check. The tag is in the reader mode. We will update the current window with our theme or static computer theme.
If we are not, we will reset. This is very simple. We are looking for changes in the current tab. If the current tab goes into reader mode, we want to react to it, and we will apply it to the currently selected window.
Let’s turn around and look at that one. You can see that this dynamic theme is currently in progress. If I leave the reader mode, the theme will disappear. Now let’s go back to the default Firefox theme. If I enter the reader mode and switch to another tab, you can also see it.