White theme

[Madis0]

I prefer white backgrounds on my browser, so would be nice if reStyle had an option to toggle the theme.

[NiklasGollenstede]

reStyle can theme itself. All the colors in the main UI are specified in this file.

If you create a copy of that as a user style, wrap it in a @document block and replace all the color, you should be able to build a light theme rather quickly.

@-moz-document
    regexp("moz-extension://[\w-]+/reStyle(?!#panel).*")
{
    /* modified theme */
}

If the result looks decent I am happy to include it in the extension itself (and would then also change the panel and a bit of other stuff accordingly).

[NiklasGollenstede]

Dammit. I just realized this this won't work. the "tabs" in the main UI are about:blank frames, so the above won't apply. I've been meaning to change that, but for now the only way to change the style is by forking the extension. The path to the theme style is specified in re-style/views/index.js line 5.

[NiklasGollenstede]

I just fixed that in the latest beta. Now my initial suggestion should work. The URL of the inner frames now mostly matches the one of the outer window.

[Madis0]

You could add an additional detection though, so that one could restyle reStyle without having to restart the browser repeatedly.

[Madis0]

So far I have done this:

White theme for reStyle

```css /** ==UserStyle== * @name White theme for reStyle * @author Madis0 * @license MIT * @description White theme for reStyle */ @-moz-document regexp("moz-extension://[\w-]+/reStyle(?!#panel).*") { /* general */ ::selection { background-color: #f9f9fa; color: #0C0C0D; fill: #0C0C0D; } ::-moz-selection { background-color: #f9f9fa; color: #0C0C0D; fill: #0C0C0D; } html, body { background-color: #f9f9fa; color: #0C0C0D; fill: #0C0C0D; } ::-webkit-scrollbar { background-color: #000; } ::-webkit-scrollbar-thumb { background-color: #666; } /* inputs */ textarea, input, select, .checkbox-wrapper>label { color: white; border-color: white; background-color: black; } textarea:focus, input:focus, select:focus, .checkbox-wrapper>input:focus ~ label { border-color: #7d7dff; box-shadow: 0 0 6px 0 #4444ff; } textarea:active:focus, input:active:focus, select:active:focus, .checkbox-wrapper>input:active:focus ~ label { border-color: #0000f0; box-shadow: 0 0 2px 1px blue; } textarea::selection, input::selection { background-color: #39f; color: white; } textarea::-moz-selection, input::-moz-selection { background-color: #39f; color: white; } .checkbox-wrapper>label::after { text-shadow: 0 0 5px green, 0 0 5px green, 0 0 5px green; } .checkbox-wrapper>input:not(:checked) ~ label::after { color: black; text-shadow: 0 0 5px red, 0 0 5px red, 0 0 5px red; } .checkbox-wrapper>input:not([disabled]) ~ label:hover, input[type="button"]:not([disabled]):hover, button:not([disabled]):hover { border-color: #7d7dff; } .checkbox-wrapper>input[disabled] ~ label, textarea[disabled], input[disabled], select[disabled] { color: hsl( 0, 0%, 65%); border-color: hsl( 0, 0%, 65%); background-color: hsl( 0, 0%, 10%); -webkit-user-select: none; user-select: none; } select:not(:hover), _:-moz-tree-row(hover) { /* firefox only */ -moz-appearance: none; padding-right: 24px; } input[type="number"]:not(:hover) { /* firefox only */ -moz-appearance: textfield; } /* context menu */ .popup-menu, .submenu { background-color: black; border-color: white; } .menu-item:hover { background-color: white; } /* invalid inputs */ input.invalid, .invalid input, select.invalid, .invalid select, textarea.invalid, .invalid textarea { color: white; border-color: red; background-color: #210006; border-color: red; box-shadow: 0 0 15px 0 red; } /* special elements */ code { background-color: #666; color: #ebf5ff; box-shadow: 0 0 1px 0px white inset; } a:link { color: #009705; } a:link:visited { color: #004386; } } ```

Notably I can't find the proper elements for sidebar and inputs, or the ones I found just don't work.

[NiklasGollenstede]

^{I've put your code as CSS in a <details> tag.}

The colors for the input elements are below the /* inputs */ comment.

Yes. This does not include the selectors for the tab sidebar (but the style is still applied to that page so it will look totally messed up). I'd ask you to just ignore that for now, or additional selectors at the bottom (but that may be difficult to isolate against the rest of the styles and to pick apart later).

[NiklasGollenstede]

Some weird exception how the styles are applied for this extension compared to all others would be ..., well weird.

Besides, the "Chrome debugging" mechanism works if you edit the page from the extension debugger (about:debugging):

[Madis0]

This is what I have now.

[NiklasGollenstede]

I took your version, took care of some rules you missed, adjusted a few others and also slightly modified the styles in general (especially the checkboxes).

The result looks pretty similar to Firefox' light (default) theme. It can currently be toggled in the Internal section on the options page and should apply immediately to all open views (but only to the "main" views, not to the panel and some other things).

I guess I'll move the option to toggle it to a more prominent location together with some other UI improvements I am planning (some of which sou suggested as well). As for the panel, I could probably just not invert its colors for the light theme (and maybe pick a different background). But that is subject to changes anyway. Unfortunately I don't think that there is currently a way to detect which of the pre-installed Firefox themes is active. I would be nice to have an "auto" (default) option.

If you have any additional suggestions, please feel fee to comment. Otherwise you could close this.

[Madis0]

The result looks pretty similar to Firefox' light (default) theme.

Yup, that's what I was aiming for.

As for the panel, I could probably just not invert its colors for the light theme (and maybe pick a different background). But that is subject to changes anyway.

Yeah, would make sense to change it before theming it.

Unfortunately I don't think that there is currently a way to detect which of the pre-installed Firefox themes is active. I would be nice to have an "auto" (default) option.

I think this is it: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/theme/getCurrent

I'll check the theme out later today and let you know if there are any problems with it.

[NiklasGollenstede]

I think this is it: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/theme/getCurrent

Yeah, event though I didn't see it on MDN, I read somewhere that is only works for themes added to Firefox, i.e. not for the three default themes. And in my short test with the dark theme enabled it did indeed just return an empty object.

I expect that to be the most common dark theme, so this API is actually rather useless.

[Madis0]

Tested the theme now, and it looks great!