I have a site which already is overall dark (https://spacetrace.org), but since the new dark mode in Firefox exists, if it is selected, some colours and image transparencies are then changed somehow, which breaks the overall style.
I couldn't find an official document that explains the automatic changes.
How do I find out what was changed and revert those unexpected changes?
Note: I would like to enhance the site so it does what the user wants, and serve a working dark version using media query:
#media (prefers-color-scheme: dark) {
/* css */
}
But I cannot find the CSS options that were changed, so I can adapt them
I guess you are talking about this.
http://kb.mozillazine.org/index.php?title=UserChrome.css&printable=yes#Editing;
https://developer.mozilla.org/en-US/docs/Web/CSS/#media/prefers-color-scheme;
All you need is to add userChrome.css file with some code like this:
:root:not(:-moz-lwtheme) {
background-color: #e3e4e6 !important;
color: #18191a !important;
}
Related
I want to view a plaintext file in light color theme in Firefox. Firefox is showing the file in dark mode by default (I am using Firefox dark mode, and I don't want to change that). I could see the css code setting the theme, but could not edit it permanently (it changed back when I reopened the text file). Is there a solution to this?
Yes, you can use something like this in a user-stylesheet:
#-moz-document plain-text-document() {
:root {
background-color: initial !important;
color: initial !important;
}
}
Though we could add a pref for that if you file a bug for it :)
I'm building a webapp that has a dark and light theme. I want to serve either based on the OS/browser preference of the user. However, in my webapp their will be a setting to override that. So let's say a user has dark-mode preference according to his OS/browser, then he can still choose to use light-mode. My initial idea was to set a data-attribute on the body-tag with JS when a user chooses this mode.
I'm using CSS variables for my colour schemes. Now, the question is: can I combine this in one sort-of query, without writing duplicate code? My current implementation with duplicate code is, simplified, as follows:
:root {
--background: white;
--text: black;
}
body[data-theme='dark'] {
--background: black;
--text: white;
}
#media (prefers-color-scheme: dark) {
body:not[data-theme='light'] {
--background: black;
--text: white;
}
}
So:
Default I serve a light-theme
When your browser/OS says you prefer dark, you get dark
When you pick light or dark in the webapp, it will override your browser/OS preference
The problem here is of course that I have duplicate code to set the dark theme variables. Is there any CSS-approach to fix this (so no SCSS/Less etc.)?
The ChromeVox extension for Google Chrome browser places an orange outline around content when selected on the screen.
This orange outline is also printed when printing a web page. See how button below is selected with orange outline and then also appears on print preview.
How do I disable this orange focus ring when printing?
Solved it with print css media-queries!
The ChromeVox injects markup and styles into the body of the page that looks like this:
<div aria-hidden="true" class="cvox_indicator_container ...more classes...">
...more html markup...
</div>
So I updated my global CSS stylesheet to include the following:
#media print {
.cvox_indicator_container {
display: none;
}
}
Which worked great.
Then I got to thinking that I wanted to make sure this never changed even if ChromeVox changed their css to have greater specificity.
Then, I updated the css to:
#media print {
html body div.cvox_indicator_container {
display: none !important;
}
}
Note: This may be overkill, but certainly has more specificity.
Ideally the ChomeVox team would add something like this solution to their code. I tried to find their open-source repo… got close but failed. Halp?
I am using the Firefox Developer Edition theme on MacOS to reduce eye strain while programming.
However, results while typing in the location bar still pop up bright white.
Does anyone know of CSS to have these results use a dark background and light text?
Generally, if you are looking for an add-on which will change this, then a theme would be appropriate. At least one of the themes I use does style the URL Bar's auto-complete results. An extension could also change the styling, if desired. However, given that you are not wanting a completely different theme, just a minor modification to the Developer Edition theme, it is easier to do this yourself by applying CSS to the profile's chrome by placing the CSS in userChrome.css.
To do it for yourself, you need to determine the appropriate elements to style. As is often the case, the add-ons DOM Inspector combined with Element Inspector are quite useful in determining the appropriate elements to style. With those add-ons installed, opening the auto-complete drop-down and Shift-Right-Click results in seeing the DOM for what we want to change:
Thus, we can put the following in the profile's userChrome.css, which needs to be located in the [profile directory]/chrome directory:
/*
* Edit this file and copy it as userChrome.css into your
* profile-directory/chrome/
*/
/*
* This file can be used to customize the look of Mozilla's user interface
* You should consider using !important on rules which you want to
* override default settings.
*/
/*
* Do not remove the #namespace line -- it's required for correct functioning
*/
/* set default namespace to XUL */
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#PopupAutoCompleteRichResult {
background-color:black !important;
-moz-border-top-colors:black !important;
-moz-border-top-colors:black !important;
-moz-border-left-colors:black !important;
-moz-border-right-colors:black !important;
}
#PopupAutoCompleteRichResult .autocomplete-richlistbox {
background-color:black !important;
}
#PopupAutoCompleteRichResult .ac-title-text,
#PopupAutoCompleteRichResult .ac-tags-text,
/*#PopupAutoCompleteRichResult .ac-url-text,*/
#PopupAutoCompleteRichResult .ac-action-text {
color:white;
}
This results in the URL Bar auto-complete having a black background with white text:
Ok, after doing quite a bit of Internet digging, I found probably the only solution, which also isn't really one.
As of writing this, there is no such Plugin/Add-on/Mod for changing the style of the search bar.
However, you could change the source code of Firefox itself. To do so start here: Mozilla Dev GUide. Its mainly written in C & C++. I mean, there really is no option for that.
There are settings, somewhere deep down in Firefox, where you can actually get such an add-on, I couldn't find it tho.
You can turn off the search bar completely, so you get your results on google, after hitting enter.
A thrid option would be, to try another browser. Just check, which browser allows you to style the search bar and apply all the other Dark Themes to that browser later on.
Hope, I didn't make it worse :/
My goal is to style a kendo-ui mobile app in Icenium to look the same on each device it's used on. Current targets include Android and IOS.
My stylesheet is the last link in the head section, to ensure that it overrides any other styles in the app. It hasn't helped, though, as telerik's specificity nightmare has me jumping through an insane number of hoops and getting very little accomplished.
I am at my wits end- I have followed the tutorial on http://www.icenium.com/mobile-app-platform/videos-demos/video/kendo-ui-mobile-and-icenium, and so far, have been able to override very few styles.
for instance:
.km-ios #tabstrip-scan .km-navbar
{
background-image:none;
}
should be all I need to override for the default ios titlebar, according to Telerik's tutorial. However, it gets rid of the background image, but leaves me with a background color, which it will not allow me to override (it also will not allow me to alter the text color). In other words:
.km-ios #tabstrip-scan .km-navbar
{
background-image:none; // works
background-color: #d9d1ba; //doesn't work
color: #333333; //doesn't work either
}
I have the same problems with their button classes:
.km-ios .km-button
{
height: 32px; // works
width: 100% // doesn't work;
background-image: none; // doesn't work
}
and with inputs:
.km-ios input[type=text]
{
width:100% // doesn't work
border-radius: 3px; // doesn't work
-webkit-border-radius: 3px // also doesn't work;
}
At one point, I even commented out the entire kendo default stylesheet, and was still getting the kendo default styles when I ran the app in the virtual machine.
How can I override the kendo-ui-mobile defaults and style the app how I want it to look (the same on every device), rather than how Telerik thinks it should look (closer to native ui)?
Force the platform to a specific one and style it with the Kendo UI Mobile ThemeBuilder here:
http://demos.kendoui.com/mobilethemebuilder/index.html
You might reference my post here Kendo mobile template styling/formatting not working - i was having a similar issue and my post might help.