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

Board for discussions around the Basilisk web browser.

Moderator: Basilisk-Dev

User avatar
Kxeon
Hobby Astronomer
Hobby Astronomer
Posts: 24
Joined: 2024-05-09, 20:04

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

Unread post by Kxeon » 2024-07-09, 22:35

(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)?
To see a portion of my specs (CPU, GPU, Laptop Model, OS, and RAM) if not said already, go to my Bio

gabrgv
Apollo supporter
Apollo supporter
Posts: 34
Joined: 2023-10-28, 18:59

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

Unread post by gabrgv » 2024-07-11, 19:36

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?].)
Attachments
photonic-dark.png

User avatar
Kxeon
Hobby Astronomer
Hobby Astronomer
Posts: 24
Joined: 2024-05-09, 20:04

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

Unread post by Kxeon » 2024-07-12, 12:47

gabrgv wrote:
2024-07-11, 19:36
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,
gabrgv wrote:
2024-07-11, 19:36
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.
Attachments
Screenshot_20240712_074227.png
To see a portion of my specs (CPU, GPU, Laptop Model, OS, and RAM) if not said already, go to my Bio

User avatar
Kris_88
Keeps coming back
Keeps coming back
Posts: 982
Joined: 2021-01-26, 11:18

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

Unread post by Kris_88 » 2024-07-12, 13:35

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);

User avatar
Kxeon
Hobby Astronomer
Hobby Astronomer
Posts: 24
Joined: 2024-05-09, 20:04

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

Unread post by Kxeon » 2024-07-12, 14:07

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...
To see a portion of my specs (CPU, GPU, Laptop Model, OS, and RAM) if not said already, go to my Bio

User avatar
Kris_88
Keeps coming back
Keeps coming back
Posts: 982
Joined: 2021-01-26, 11:18

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

Unread post by Kris_88 » 2024-07-12, 14:10

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

User avatar
Kxeon
Hobby Astronomer
Hobby Astronomer
Posts: 24
Joined: 2024-05-09, 20:04

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

Unread post by Kxeon » 2024-07-12, 15:13

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.
To see a portion of my specs (CPU, GPU, Laptop Model, OS, and RAM) if not said already, go to my Bio

User avatar
Lootyhoof
Themeist
Themeist
Posts: 1575
Joined: 2012-02-09, 23:35
Location: United Kingdom

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

Unread post by Lootyhoof » 2024-07-12, 15:20

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.

User avatar
Kxeon
Hobby Astronomer
Hobby Astronomer
Posts: 24
Joined: 2024-05-09, 20:04

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

Unread post by Kxeon » 2024-07-12, 17:52

Lootyhoof wrote:
2024-07-12, 15:20
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.
Lootyhoof wrote:
2024-07-12, 15:20
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.
To see a portion of my specs (CPU, GPU, Laptop Model, OS, and RAM) if not said already, go to my Bio

gabrgv
Apollo supporter
Apollo supporter
Posts: 34
Joined: 2023-10-28, 18:59

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

Unread post by gabrgv » 2024-07-12, 19:06

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
Apollo supporter
Apollo supporter
Posts: 34
Joined: 2023-10-28, 18:59

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

Unread post by gabrgv » 2024-07-12, 19:50

Kxeon wrote:
2024-07-12, 15:13
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.
Kxeon wrote:
2024-07-12, 14:07
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.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 36067
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

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

Unread post by Moonchild » 2024-07-12, 20:16

gabrgv wrote:
2024-07-12, 19:50
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).
"Just because you are offended doesn't mean you are right." -- unknown
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

User avatar
FranklinDM
Add-ons Team
Add-ons Team
Posts: 593
Joined: 2017-01-14, 02:40
Location: Philippines
Contact:

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

Unread post by FranklinDM » 2024-07-13, 03:04

gabrgv wrote:
2024-07-12, 19:06
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.

Locked