How do I make Photonic use dark mode & fix the background in stuff like the right click menu and search bar? Topic is solved

[Kxeon]

(This is a 2-in-1 because this seems to be somewhat worthy of being the same topic, pls split if you disagree)
I want to use Photonic as that's the theme I like the most, and is closest to my PC's theme.
However, Photonic is broken; it doesn't use Dark Mode even though it's supposed to, and the address bar's suggestions are transparent.
I have a feeling something updated that changed a variable and broke every theme except the default. That would explain how every theme seems broken.
How do I make it so that Photonic uses Dark Mode (Where are the variables that allow you to change the colour{s} of Photonic), and how do I add a background colour to the (until i get told what it is called i will call it the third background colour)?

[gabrgv]

I just installed Photonic, and I couldn’t notice any issue with the right click menu and the search bar. I guess it may be caused by the GTK theme you’re using.

I successfully set Photonic to use dark mode just by switching to the dark variant of the GTK theme I’m using.

I think you should try switching your GTK theme or using the GTK2 (or GTK3) version of Basilisk.


(Edit: about transparency I can’t tell anything as I don’t use any compositor [which would render this things, right?].)

[Kxeon]

I think you should try switching your GTK theme or using the GTK2 (or GTK3) version of Basilisk.

You were right here, GTK3 was the problem there. However,

I successfully set Photonic to use dark mode just by switching to the dark variant of the GTK theme I’m using.

That doesn't quite work for me. It worked for the taskbar, just as in GTK3, however, it STILL isn't using Dark Mode elsewhere.

[Kris_88]

I once dealt with the colors that UXP assigns based on the OS theme. I don’t remember all the details, but there are many preferences that override the automatic color assignment.

Here is the complete list, you can try some preferences from this list and use the RGB color values ​​you need.

Code: Select all

user_pref("ui.use_native_colors",   false);

user_pref("ui.windowBackground",                    "#ffffff");
user_pref("ui.windowForeground",                    "#ffffff");
user_pref("ui.widgetBackground",                    "#ffffff");
user_pref("ui.widgetForeground",                    "#ffffff");
user_pref("ui.widgetSelectBackground",              "#ffffff");
user_pref("ui.widgetSelectForeground",              "#ffffff");
user_pref("ui.widget3DHighlight",                   "#ffffff");
user_pref("ui.widget3DShadow",                      "#ffffff");
user_pref("ui.textBackground",                      "#ffffff");
user_pref("ui.textForeground",                      "#ffffff");
user_pref("ui.textSelectBackground",                "#ffffff");
user_pref("ui.textSelectForeground",                "#ffffff");
user_pref("ui.textSelectForegroundCustom",          "#ffffff");
user_pref("ui.textSelectBackgroundDisabled",        "#ffffff");
user_pref("ui.textSelectBackgroundAttention",       "#ffffff");
user_pref("ui.textHighlightBackground",             "#ffffff");
user_pref("ui.textHighlightForeground",             "#ffffff");
user_pref("ui.IMERawInputBackground",               "#ffffff");
user_pref("ui.IMERawInputForeground",               "#ffffff");
user_pref("ui.IMERawInputUnderline",                "#ffffff");
user_pref("ui.IMESelectedRawTextBackground",        "#ffffff");
user_pref("ui.IMESelectedRawTextForeground",        "#ffffff");
user_pref("ui.IMESelectedRawTextUnderline",         "#ffffff");
user_pref("ui.IMEConvertedTextBackground",          "#ffffff");
user_pref("ui.IMEConvertedTextForeground",          "#ffffff");
user_pref("ui.IMEConvertedTextUnderline",           "#ffffff");
user_pref("ui.IMESelectedConvertedTextBackground",  "#ffffff");
user_pref("ui.IMESelectedConvertedTextForeground",  "#ffffff");
user_pref("ui.IMESelectedConvertedTextUnderline",   "#ffffff");
user_pref("ui.SpellCheckerUnderline",               "#ffffff");
user_pref("ui.activeborder",                        "#ffffff");
user_pref("ui.activecaption",                       "#ffffff");
user_pref("ui.appworkspace",                        "#ffffff");
user_pref("ui.background",                          "#ffffff");
user_pref("ui.buttonface",                          "#ffffff");
user_pref("ui.buttonhighlight",                     "#ffffff");
user_pref("ui.buttonshadow",                        "#ffffff");
user_pref("ui.buttontext",                          "#ffffff");
user_pref("ui.captiontext",                         "#ffffff");
user_pref("ui.graytext",                            "#ffffff");
user_pref("ui.highlight",                           "#ffffff");
user_pref("ui.highlighttext",                       "#ffffff");
user_pref("ui.inactiveborder",                      "#ffffff");
user_pref("ui.inactivecaption",                     "#ffffff");
user_pref("ui.inactivecaptiontext",                 "#ffffff");
user_pref("ui.infobackground",                      "#ffffff");
user_pref("ui.infotext",                            "#ffffff");
user_pref("ui.menu",                                "#ffffff");
user_pref("ui.menutext",                            "#ffffff");
user_pref("ui.scrollbar",                           "#ffffff");
user_pref("ui.threeddarkshadow",                    "#ffffff");
user_pref("ui.threedface",                          "#ffffff");
user_pref("ui.threedhighlight",                     "#ffffff");
user_pref("ui.threedlightshadow",                   "#ffffff");
user_pref("ui.threedshadow",                        "#ffffff");
user_pref("ui.window",                              "#ffffff");
user_pref("ui.windowframe",                         "#ffffff");
user_pref("ui.windowtext",                          "#ffffff");
user_pref("ui.-moz-buttondefault",                  "#ffffff");
user_pref("ui.-moz-field",                          "#ffffff");
user_pref("ui.-moz-fieldtext",                      "#ffffff");
user_pref("ui.-moz-dialog",                         "#ffffff");
user_pref("ui.-moz-dialogtext",                     "#ffffff");
user_pref("ui.-moz-dragtargetzone",                 "#ffffff");
user_pref("ui.-moz-cellhighlight",                  "#ffffff");
user_pref("ui.-moz_cellhighlighttext",              "#ffffff");
user_pref("ui.-moz-html-cellhighlight",             "#ffffff");
user_pref("ui.-moz-html-cellhighlighttext",         "#ffffff");
user_pref("ui.-moz-buttonhoverface",                "#ffffff");
user_pref("ui.-moz_buttonhovertext",                "#ffffff");
user_pref("ui.-moz_menuhover",                      "#ffffff");
user_pref("ui.-moz_menuhovertext",                  "#ffffff");
user_pref("ui.-moz_menubartext",                    "#ffffff");
user_pref("ui.-moz_menubarhovertext",               "#ffffff");
user_pref("ui.-moz_eventreerow",                    "#ffffff");
user_pref("ui.-moz_oddtreerow",                     "#ffffff");
user_pref("ui.-moz-mac-buttonactivetext",           "#ffffff");
user_pref("ui.-moz_mac_chrome_active",              "#ffffff");
user_pref("ui.-moz_mac_chrome_inactive",            "#ffffff");
user_pref("ui.-moz-mac-defaultbuttontext",          "#ffffff");
user_pref("ui.-moz-mac-focusring",                  "#ffffff");
user_pref("ui.-moz-mac-menuselect",                 "#ffffff");
user_pref("ui.-moz-mac-menushadow",                 "#ffffff");
user_pref("ui.-moz-mac-menutextdisable",            "#ffffff");
user_pref("ui.-moz-mac-menutextselect",             "#ffffff");
user_pref("ui.-moz_mac_disabledtoolbartext",        "#ffffff");
user_pref("ui.-moz-mac-secondaryhighlight",         "#ffffff");
user_pref("ui.-moz-win-mediatext",                  "#ffffff");
user_pref("ui.-moz-win-communicationstext",         "#ffffff");
user_pref("ui.-moz-nativehyperlinktext",            "#ffffff");
user_pref("ui.-moz-comboboxtext",                   "#ffffff");
user_pref("ui.-moz-combobox",                       "#ffffff");

user_pref("browser.display.use_system_colors", false);
user_pref("browser.display.document_color_use, 0");
user_pref("browser.display.foreground_color", "#000000");
user_pref("browser.display.background_color", "#ffffff");
user_pref("browser.anchor_color", "#0000ee");
user_pref("browser.active_color", "#ee0000");
user_pref("browser.visited_color", "#551A8B");
user_pref("browser.display.focus_text_color", "#ffffff");
user_pref("browser.display.focus_background_color", "#117722");
user_pref("browser.display.use_focus_colors, false");

user_pref("browser.display.prefers_color_scheme", 1);
user_pref("reader.color_scheme", "light");
user_pref("ui.color_scheme", 1);

[Kxeon]

Alrighty, thanks!
Uh... so where in the world do I even use these? They don't appear in about:config and I can't seem to find a file for it in the files for basilisk...

[Kris_88]

This is "prefs.js" in your profile folder.

[Kxeon]

Hmm... seems like every one I try that seems to change the background doesn't budge Photonic. Infact, most of the modifiers don't budge it.
I've tried editing the extension, but Basilisk absolutely hated when I tried, and refused to accept the modified theme.
Either I'll have to just live with it being inconsistent, or I'd have to find some type of way to actually change the background.

[Lootyhoof]

Photonic doesn't have a dark mode, except where it tries to use the OS styling (in toolbars for example). The in-content pages like about:addons use specific colours instead of OS styles.

You could probably create a userstyle for it though.

[Kxeon]

Photonic doesn't have a dark mode, except where it tries to use the OS styling (in toolbars for example). The in-content pages like about:addons use specific colours instead of OS styles.

Well that explains it. I was thinking there might have been something in either the extension or the browser that makes Photonic's background dark and other items white.

You could probably create a userstyle for it though.

Well if I knew how to code in CSS and I actually started learning maybe then I would be able to make a userstyle but right now.. I don't. So I guess I'll be stuck with it for now.

[gabrgv]

So, if you want the pages you visit to use a dark theme (if possible), you’ll have to change browser.display.prefers_color_scheme to 2 in about:config (there will be an option to change this in the next release, under Preferences > Content > Colors…).

Now, most web pages don’t offer a dark theme by default, so you’ll have to use a userstyle, but you won’t have to write them, you can just choose one from this site, for instance. You’ll need an extension to add them to Basilisk, like Stylem.

For pages like about:addons, about:preferences, etc., I quickly wrote this ugly CSS (someone please fix it!) you should put in your userContent.css (~/.basilisk-dev/basilisk/[your.profile]/chrome/userContent.css):

Code: Select all

@-moz-document url(about:home),url(about:newtab),url(about:privatebrowsing),url(about:blank),url(about:addons),url(about:preferences),url(about:config) {
  window, page, dialog, wizard, prefwindow, html {
      -moz-appearance: window !important;
      background-color: -moz-Dialog !important;
      color: -moz-DialogText !important;
  }
  * textbox {
    -moz-appearance: textfield !important;
  }
}

(Create the “…/chrome/userContent.css” directory and file if you haven’t yet.)

[gabrgv]

Infact, most of the modifiers don't budge it.

There are typos in the quotes of Kris_88’s list in lines 97 and 105, which prevent the next prefs to be read. But I don’t think this will touch the pages themselves, other than the one pref I mentioned above. Anyway, you’ll have to change the prefs’ values as well, "#ffffff" (white) to "#000000" (black), for instance.

Uh... so where in the world do I even use these?

Besides the pref.js, you can create a user.js in you profile directory and put the prefs there.

[Moonchild]

Besides the pref.js, you can create a user.js in you profile directory and put the prefs there.

Do note that user.js and prefs.js are handled differently. Only use user.js if you want its specific behaviour (i.e. its permanent/locking behaviour).

[FranklinDM]

For pages like about:addons, about:preferences, etc., I quickly wrote this ugly CSS (someone please fix it!) you should put in your userContent.css (~/.basilisk-dev/basilisk/[your.profile]/chrome/userContent.css):

Alternatively, you can also put that CSS code in Stylem. It can style the entire browser UI and internal browser pages too.