How do I make Photonic use dark mode & fix the background in stuff like the right click menu and search bar? Topic is solved
Moderator: Basilisk-Dev
-
- Apollo supporter
- Posts: 33
- 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?
(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)?
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
-
- Moonbather
- Posts: 58
- 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?
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?].)
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?].)
You do not have the required permissions to view the files attached to this post.
-
- Apollo supporter
- Posts: 33
- 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?
You were right here, GTK3 was the problem there. However,
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.
You do not have the required permissions to view the files attached to this post.
To see a portion of my specs (CPU, GPU, Laptop Model, OS, and RAM) if not said already, go to my Bio
-
- Board Warrior
- Posts: 1101
- 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?
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.
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);
-
- Apollo supporter
- Posts: 33
- 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?
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...
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
-
- Board Warrior
- Posts: 1101
- 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?
This is "prefs.js" in your profile folder.
-
- Apollo supporter
- Posts: 33
- 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?
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.
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
-
- Themeist
- Posts: 1580
- 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?
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.
You could probably create a userstyle for it though.
-
- Apollo supporter
- Posts: 33
- 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?
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.
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
-
- Moonbather
- Posts: 58
- 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?
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):
(Create the “…/chrome/userContent.css” directory and file if you haven’t yet.)
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;
}
}
-
- Moonbather
- Posts: 58
- 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?
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.
Besides the pref.js, you can create a user.js in you profile directory and put the prefs there.
-
- Pale Moon guru
- Posts: 37686
- Joined: 2011-08-28, 17:27
- Location: Motala, SE
Re: How do I make Photonic use dark mode & fix the background in stuff like the right click menu and search bar?
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).
"A dead end street is a place to turn around and go into a new direction" - Anonymous
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite
-
- Add-ons Team
- Posts: 617
- Joined: 2017-01-14, 02:40
- Location: Philippines
Re: How do I make Photonic use dark mode & fix the background in stuff like the right click menu and search bar?
Alternatively, you can also put that CSS code in Stylem. It can style the entire browser UI and internal browser pages too.