So, I have a problem and am not sure where to start. I am working static site project
built using nuxt, vue, and vuetify. Everything works great and looks good, until I run nuxt generate. After that when I go to view the final static site, I lose my styling on my font-awesome icons. The first image below is what I have when running on my localhost.
In the photo, you can see the size of the magnifying glass and star. This is perfect. However, the next photo is after I run nuxt generate
I am at a loss here as to what would be causing this, and any direction would be greatly appreciated.
EDIT
After looking at the devtools again from a comment, the icons have the same CSS styles, and I do not see a difference. However, further back in the elements I have a div that is getting rendered differently, which could be breaking things.
The CSS circled at the top is my local environment. You can see that .evidenceReview{} has the active background, which is overriding .theme--light.v-card{}.
In the bottom circled CSS is what I get from my deployment. Here you can see that the same classes exist, it's just that the presence is switched and .theme--light.v-card{} is overriding .evidenceReview{}.
As workaround, importing the font-awesome css at the top of my css file worked.
#import '#fortawesome/fontawesome-svg-core/styles.css';
Workaround taken from FontAwesome GitHub issue:
https://github.com/FortAwesome/Font-Awesome/issues/18666#issuecomment-1090686913
I've built an app using Ionic, Angular and Capacitor and I'm facing some UI issues when dark mode is enabled in certain cases and devices. More specifically i faced the issue in Xiaomi android devices (Redmi note 9). After some research I found out that Xiaomi is using MIUI which is forcing the dark mode when is available to be applied in the App no matter what. I found some solutions but they didn't work for me.
The one solution suggests to add in index.html the following meta tag in order to always force the app tho use the light theme.
<meta name="color-scheme" content="light" />
The other solution i found is to edit variables.scss and comment out the media query referring to dark mode as follows:
// #media (prefers-color-scheme: dark) {
.
.
.}
Neither solutions work. I am open to any solutions out there :)
Thanks in advance!
I am trying to use Tabler icons in my project React typescript project via classNames and for some unknown reasons, some icons appear filled. Please note that my CSS skills are not so good.
The library comes with
Font icons
PNG icons
And SVG icons
When I check the font icons some icons appear completely filled and because of this when I try to access them like className="ti ti-discount" I get icons that look like while the SVG and PNG counterparts look like , am confused, how can I resolve this?
For anyone who sees this question, the poster created a GitHub issue here: https://github.com/tabler/tabler-icons/issues/102. According to the project's maintainer, the problem should be solved in the near future (I'd guess early 2021): https://github.com/tabler/tabler-icons/pull/92.
I have a website with css styling. When I view in certain browsers when dark mode is enabled the css is absolutely destroyed and the colours which have changed in my site look absolutely hideous. How can I prevent my css/colourschemes being changed because of dark mode?
When I opened my url via a link sent on whatsapp on my android device the default browser - Android's 'internet' application automatically restyles the CSS because I have dark mode active. If other users go to my page and have dark mode active I would prefer them to see the original styling not the dark mode edited version.
I found out that you can use this media query to set css for dark mode: #media (prefers-color-scheme: dark) {. I could duplicate my whole css file which is currently 3000 lines long with dark and light with the same code between the parentheses but this seems nonsensical. Is there any other methods which would work?
As it turns out, Samsung Internet — the default web browser for a very large number of devices and the one featured in your screenshot — silently applies a filter that transforms colors on websites in a non-trivial way when the user enables dark mode on their device. See this blog post for more information.
The gist of it is that, as of Samsung Internet version 13.0.1.64, this filter is undetectable with javascript or CSS.
The only thing you can do as a web developer is to warn users and urge them to switch to a better browser:
<script>
if (navigator.userAgent.match(/samsung/i)) {
alert("Your browser (Samsung Internet) may not show this website" +
"correctly. Please consider using a standards-compliant" +
"browser instead. \n\n" +
"We recommend Firefox, Microsoft Edge, or Google Chrome.");
}
</script>
Had the same issue. Here's what I found.
I added this meta tag to the header tag:
<meta name="color-scheme" content="light only">
The meta tag above indicates that the color scheme is only supported by light mode.
Another option is the scheme preferred in light mode, but it supports dark mode as well:
<meta name="color-scheme" content="light dark">
Tested on Safari, Chrome, Samsung, Facebook in-app browser and Firefox.
Another method is to use CSS:
:root {
color-scheme: light only;
}
The above indicates that the styling only uses the light version only.
If I understood, you want users to see the so-called light version even if their browser is set to prefer the dark one. What I’m going to suggest is far from being perfect… I mean, I wouldn’t do so, but I think it should work. Simply copy and paste the CSS you wrote under a #media (prefers-color-scheme: dark) query and manually change what doesn’t work there, without changing the code outside its brackets. Users should see the original, light version of your website no matter what they selected in their browser setting. TBH, I don’t know why you want to do this: the ideal approach IMHO would be to provide both a light and a dark theme with a default fallback.
I did some testing and the solution I found is using the !important declaration after the property value that you want to have when browser darkmode is on.
Think about this though, if you are using browser darkmode and go on a website and it stays the same as the lightmode, how would you feel? Personally I get really pissed and leave immediately from a website like that. So I would actually recommend not changing the colors. Users want darkmode for a reason, probably because they don't want bright colourful things hurting their eyes. If they want to use browser darkmode, they understand what will happen to the colors of websites.
The only use case I can see for changing things would be if elements disappear because of darkmode.
That being said, if your elements are disappearing because of this darkmode, look into the root cause first. Understand why they are changing before slapping !important on everything. That is lazy and does not look good on you as a developer.
Before You do all that, please check if you did not do the mistake, that I did -
We're talking here about forced dark theme on mobile, that You think your browser, most probably Chrome, is forcing on every website making it's background black and text white.
What I had was a manually set chrome flag for forcing dark mode.
Go to Chrome and type address chrome://flags then search for "dark"
You'll find "Force Dark Mode for Web Contents" flag. If it's not already - set if to "default".
Hope it saves some time anybody, I've wasted 1h over this.
You will face this issue in Samsung internet browser only. if the user has enabled dark mode In "Samsung internet browser(mobile)", the browser automatically changes the css of website to suit to dark mode. no matter if you applied the same css you applied for light mode/default within #media (prefers-color-scheme: dark){}
So if you want to make your website look better in Samsung internet browser, you can detect the samsung browser using this javascript line navigator.userAgent.match(/samsung/i) and apply separate CSS class for Samsung browser.
Does anybody know how I can style the Firefox built-in Web Developer (devtools) theme? I am using the Dark theme, and need to make a small change in the way line numbers/column numbers are shown in the console output.
The default color, which is a shade of orange, to my eyes is totally unreadable.
I searched the web but all I get is stuff about theming of code that is displayed and analyzed by Web Developer.
Btw., I have to use the dark theme because the lighter themes are even more of a strain on my eyes.
I think this might be what you're looking for. It's the main CSS file for the dev tools. The dark theme is defined here and the used orange is defined here.
I'm not sure if that color can be changing without rebuilding Firefox or creating a browser extension for that.