how to use iOS 13 darkmode for wkwebview - ios

I was working for iOS 13 with Xcode 11 beta. Is there any way to support dark mode on web views? I have created a color set for all the other views except WKWebviews. How to change web view background and text color for dark mode?

Assuming your question is asking how to change the colors of the HTML content you are displaying in a WKWebView based on whether light or dark mode is in effect, there is nothing you do in your app's code. All changes need to be in the CSS being used by your HTML content.
I have some local HTML files I use in a WKWebView. I was able to support dark mode by updating my css file.
Let's say you currently have a css file with the following:
body {
background-color: white;
color: black;
}
a:link {
color: #0078b5;
text-decoration: none;
}
Those are fine in light mode. To also support dark mode, you can add an #media section to your css:
#media (prefers-color-scheme: dark) {
body {
background-color: rgb(38,38,41);
color: white;
}
a:link {
color: #0096e2;
}
a:visited {
color: #9d57df;
}
}
When in dark mode, the colors in this #media section will override the corresponding colors defined outside the #media section.

Swift 5
For WKWebView, below code worked for me.
extension RichTextController : WKNavigationDelegate {
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
let cssString = "#media (prefers-color-scheme: dark) {body {color: white;}a:link {color: #0096e2;}a:visited {color: #9d57df;}}"
let jsString = "var style = document.createElement('style'); style.innerHTML = '\(cssString)'; document.head.appendChild(style);"
webView.evaluateJavaScript(jsString, completionHandler: nil)
}
}

More simple, just invert all colors & style except for images :
#media (prefers-color-scheme: dark) {
html{
filter: invert(1) hue-rotate(.5turn);
}
img {
filter: invert(1) hue-rotate(.5turn);
}
}

Same challenge I faced when I was migrating my iOS app because we do login using WKWebView and when I consulted I found below example to handle this situation. Just need to create variable for the color and need to handle this in CSS.
Before
body { color: black; }
h1 { color: white; }
.header {
background-color: #FFFFFF;
color: white;
}
After
:root {
color-scheme: light dark;
--h1-color: #333;
--header-bg-clr: #FFF1FF;
--header-txt-clr: white;
}
#media (prefers-color-scheme: dark) {
:root {
color-scheme: light dark;
--h1-color: #333;
--header-bg-clr: #FFF1FF;
--header-txt-clr: white;
}
}
body { }
h1 { color: var(--h1-color); }
.header {
background-color: var (--header-bg-clr);
color: var(--header-txt-clr);
}
After Integrating this change you can use Safari to test (First you need to enable the developer menu option in Sarafi, Preferences, Advanced). Open wen inspector (using Command + Options + I) and you will see this screen with the option to toggle light/dark mode.
NOTE Just to add little more information. You can also handle different images just like colors.
BEFORE
<img src="day.jpg">
AFTER
<picture>
<source srcset="light.jpg" media="(prefers-color-scheme: light)">
<img src="day.jpg">
</picture>

Root tag will invert all the components color except the table and images will be in negative form.
To perform perfect color invert check the below CSS file
#media (prefers-color-scheme: dark) {
/* root tag inverting all the components color except the table.*/
: root {
color-scheme: light dark;
filter: invert(100%);
-webkit-filter: invert(100%)
}
/*table tag needed for inverting table content.*/
table {
filter: invert(100%);
}
/* If We do color invert in : root , images will be color inverted and it will be in negative. If we invert again these negative images, it will be positive.*/
img {
filter: invert(100%);
}
}

Related

How to disable NativescriptTheme in a specific BottomNav Tabs component?

I'm trying to style my Tabs of the BottomNavigation but I'm not being able to do it because of a Nativescript Theme globally installed.
For example, my BottomNav Tab label is being filled with a Nativescript Theme global style, probably for titles, or labels... well, I don't know.
Here is my example... The "Home", because it's selected, should be black. But it's lime because of a globally installed Nativescript Theme.
How could I effectively set this to be black when selected?
I already tried to use CSS:
TabStrip {
background-color: $primary;
color: #FFFFFF;
}
TabStripItem {
color: white;
}
TabStripItem:active {
color: black;
}
TabStripItem Label {
font-size: 12;
}
But didn't worked.
Also, I tried to set the color to this TabStripItem Label and worked but only to be always black. I wish that it could be set dynamically.
I've found it.
I needed to just set this CSS:
TabStripItem:active Label {
color: black;
}

How to remove blue border around NG-ZORRO (antd for Angular) buttons when hovering over them?

If you click this link it takes you to a few examples on their page.
https://ng.ant.design/components/button/en
I am able to access the buttons and change the color but not the actual blue border. I have tried :active, :hover, :focus, etc..
This is how I access the button for some custom css
.ant-btn-circle {
background-color: $theme-foreground !important;
color: rgb(var(--MainColor)) !important;
}
.ant-btn-circle:focus {
background-color: rgb(var(--MainColor)) !important;
color: $theme-foreground !important;
outline: 0 !important;
}
The outline portion doesn't seem to work... Any tips?
I see something like this that has the blue color but I dont know what it is. --antd-wave-shadow-color
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
--antd-wave-shadow-color: #1890ff;
}
Only solution I found so far is creating a theme.less file in your src and adding this:
#import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";
#primary-color: #6D6E70;
So I guess it is the primary color. Would be nice to set it custom. In the css.
I managed to resolve this by setting the transition period for the button's border-color property to 0ms.
So using your example:
.ant-btn-circle {
transition: border-color 0ms;
}

angular-material change checkbox color

I'm using checkbox of angular-material2. Currently the default color of checkbox is coming as purple color.
Looks like they have changed default color of checkbox from "primary" to accent.
Is there a way to get "primary"(green) color instead of purple without overriding css.
I tried giving color="primary" to but that didn't worked.
Code : <md-checkbox></md-checkbox>
Import statement:
import {MdCheckbox} from '#angular2-material/checkbox';
Plunker http://plnkr.co/edit/sFC0kfdzj7fxtUC3GXdr?p=preview
Based on feedback from comments, updated my answer by removing '::ng-deep', but please read comment by #colin-fox, and understand how this will behave in global styling and at component level, many thanks!
For Angular Material 7, works for outline color and inside filled in color
.mat-checkbox-checked.mat-accent .mat-checkbox-ripple .mat-ripple-element {
opacity: 0.03 !important;
background-color: #005691!important;
}
.mat-checkbox-checked.mat-accent .mat-checkbox-background,.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background-color: #005691;
}
You don't have to add css if you'r using theme, just add attribute color to <mat-checkbox>
<mat-checkbox color="primary">Primary</mat-checkbox>
The color of a <mat-checkbox> can be changed by using the color property. By default, checkboxes use the theme's accent color. This can be changed to 'primary' or 'warn'
Checkbox | Angular Material
One of the standard ways to do this is to utilize the /deep/ selector
mat-checkbox {
color: rgb(0,178,0);
/deep/ .mat-checkbox-background {
background-color: rgb(0,178,0);
}
/deep/ &.mat-checkbox-focused{
.mat-ink-ripple{
background-color: rgba(0, 178, 0, .26);
}
}
}
That will allow you to override styles in components where Shadow Dom is enabled.
This solution works well for me
.mat-checkbox-ripple .mat-ripple-element,
.mat-checkbox-checked.mat-accent .mat-checkbox-background {
background-color: $your-color !important;
}
Default color depends upon the theme which you #import.
But angular material also provide way to customize the theme or for customizing the components like changing the color of checkbox.
Steps of doing this as follow :-
1.) Import the _theming.scss file
#import "../node_modules/#angular/material/theming";
2.) Specify the accent color i.e. color of check box you want to apply like below :-
// customising of the mat-checkbox accordiing Theme. i am using pink indigo theme
bydefault so here I am changing the checkbox color from pink to grey.
$candy-app-primary: mat-palette($mat-indigo);
// here I am specify the grey instead of Pink.
$candy-app-accent: mat-palette($mat-grey, 600, 500, 900);
$candy-app-warn: mat-palette($mat-red);
// Create the theme object (a Sass map containing all of the palettes).
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
// here I am only calling checkbox mixin because i only want to change the checkbox color
#include mat-checkbox-theme($candy-app-theme);
Hope it will help.
Angular 7+
This will work for checkbox as well as the initial ripple color. If you just change the background for the checkbox, the initial ripple color won't update. This resolves the issue.
SCSS:
::ng-deep .mat-checkbox-checked.mat-accent {
.mat-checkbox-ripple .mat-ripple-element {
background-color: $your-color !important;
}
.mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background-color: $your-color;
}
}
::ng-deep .mat-checkbox.mat-accent {
.mat-checkbox-ripple .mat-ripple-element {
background-color: $your-color !important;
}
}
A combination of answers worked for me in angular 9
.mat-checkbox-checked.mat-accent .mat-checkbox-ripple .mat-ripple-element {
opacity: 0.03 !important;
background-color: #005691 !important;
}
.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background-color: #005691 !important;
}
.mat-checkbox-ripple .mat-ripple-element,
.mat-checkbox-checked.mat-accent .mat-checkbox-background {
background-color: #005691 !important;
}
With beta.2 of Angular Material, the color attribute should work.
There were some issues with it before beta.2
See the commit that fixed that issue.
There are two methods(that i know ) to change the background color of mat-checkbox (angular 9)-
method 1 - by using color property of the mat-checkbox .
<mat-checkbox
id="{{ subtask.name }}"
[color]="accent"
>
Check
</mat-checkbox>
Limitation - You can only use color according to the angular material theme by this method .
method 2 - If you want to give custom colors to the mat-checkbox first track down the classes till the target class you want to change color of. tracking of nested classes
after that write like this in your style.css(global) file-
1st checkbox
.l0
.mat-checkbox-checked
.mat-checkbox-layout
.mat-checkbox-inner-container
.mat-checkbox-background {
background-color: #ffbf00 !important;
}
2nd checkbox
.l1
.mat-checkbox-checked
.mat-checkbox-layout
.mat-checkbox-inner-container
.mat-checkbox-background {
background-color: #4caf50 !important;
}
Result - different color for different mat-checkbox
This should take care of the default checkbox color
md-checkbox .md-icon {
background: green;
}
md-checkbox.md-default-theme.md-checked .md-icon {
background: green;
}
read more here at Angular Material Documentation
The following will keep frame grey when unchecked but change to custom color when checked:
relevant-scss-file.scss
mat-checkbox {
&.mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background {
background: rgb(0,178,0);
}
}
Since deep is deprecated. In my view the right way to do it is using encapsulation: ViewEncapsulation.None.
ex:
#Component({
selector: '...',
templateUrl: '...',
styleUrls: ['...'],
encapsulation: ViewEncapsulation.None,
})
Then you just need to change the class
.mat-checkbox-background {
background-color: green;
}
You just need to be careful to deal with global css stuff. In SASS nested classes should handle it properly.
You can have more details here: https://stackoverflow.com/a/54672579/783364
For me what has worked is the following:
<mat-checkbox class="tn-checkbox">Check me!</mat-checkbox>
In the css (or in my case sass):
.#{$wf__ns}checkbox {
.mat-checkbox-ripple {
.mat-ripple-element {
background: $cool-blue !important;
}
}
&.mat-checkbox-checked {
.mat-checkbox-background {
background: $cool-blue;
}
.mat-checkbox-ripple {
.mat-ripple-element {
background: $cool-blue !important;
}
}
}
}
Explanation:
The checked background color is changed to mat-checkbox-background within mat-checkbox-checked. IF you want to modify the background color when it is not checked just copy that part and copy it outside of mat-checkbox-checked.
As for the ripple classes, it turns out that the material has an animation when you press the button. That class controls the color of the animation, if you don't change it it will remain the same (pink).
If you do not change it by pressing the checkbox you will see a strange pink effect.
The other answers do not work for me although I rely on the first to develop it.
It may be from my version of angular that I leave below:
Angular CLI: 8.3.25
Node: 13.3.0
Angular: 8.2.14
You can change the color of the border this way.(angular)
::ng-deep .mat-checkbox {
.mat-checkbox-ripple .mat-ripple-element {
background-color: #07abe9 !important;
}
.mat-checkbox-frame {
border-color: #07abe9 !important;
}
}
This worked for me with Angular 10:
In your styles.scss:
//Change background color
.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background-color: #1f45cc;
}
//Change the border color for both checked and unchecked cases
.mat-checkbox-frame {
border-color: #1f45cc;
}
.mat-checkbox-ripple .mat-ripple-element,.mat-checkbox-checked.mat-accent .mat-checkbox-background {
background-color: $your-color!important;
}
.mat-checkbox-checked.mat-primary .mat-checkbox-background, .mat-checkbox-indeterminate.mat-primary .mat-checkbox-background{
background-color: $your-color!important;
}
This is what works. On our JHIPSTER project, we have a global.scss. Here is what you need to do if you do have a global.
Wrap your component html with a class. Forexample:
<div class="supplier-details-container">
<!-- rest of your html here -->
</div>
In the global.scss or global.css write your css/scss like so (Im using red to test):
.supplier-details-container .mat-checkbox-ripple .mat-ripple-element,.mat-checkbox-checked.mat-accent .mat-checkbox-background {
background-color: red !important;
}
Basically using css hierarchy wrapping the native angular material css with your component class that you use to wrap your component html.
Let me know if it works or not. We can debug.
Update for Angular Material 15:
.mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background, .mdc-checkbox__ripple {
background-color: green !important;
border-color: green !important;
}
this solution works well for me
/deep/.mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background-color: #3490d3;
}

jquery mobile how remove the grey round circle on icon

I build my first phonegap Jquery Appl
Im changing my icon using this class
.ui-icon-myapp-email {
background-image: url("app-icon-email.png");
}
This custom icon is for a list view , and i try to remove the round grey background load
Also my picture is a bit big for the shape
I was playing with the .ui-icon but doesnt work
Cant find the class
I just wanna my custom arrow picture full size on a white background list no round no circle box shape
Maybe there is an attribute or via css to make that
thanks
If you are using jQuery v 1.4.0 + then you just need to add the class .ui-nodisc-icon to your link element to remove that annoying circle. You will not need to edit any css or write any overrides.
Late to the party here, but a simple answer is to add
background-color: transparent;
box-shadow: none;
to your custom class name, so:
.ui-icon-myapp-email {
background-color: transparent;
box-shadow: none;
}
is all you need.
With JQuery Mobile 1.3, now all you have to do is add the class "ui-nodisc-icon", no need to mess around with the CSS.
from JQuery Website:
"If you don’t need the dark circle behind the icons, simply add the ui-nodisc-icon to the element or its container to remove the icon background."
This should work.
.ui-icon-myapp-email {
background:transparent; /* or none */
background-image: url("app-icon-email.png");
/* The following border radius rules will override the circle around your icon */
-moz-border-radius: 0px;
-webkit-border-radius:0px;
border-radius:0px;
}
/* To fix the size issue override the .ui-icon height */
.ui-icon{
width:14px;
height:20px;
}
Overrides the icon disc color to white.
.ui-icon,
.ui-icon-searchfield:after {
background: #fff /*{global-icon-color}*/;
background: rgba(255,255,255,1) /*{global-icon-disc}*/;
background-image: url(images/icons-18-white.png) /*{global-icon-set}*/;
background-repeat: no-repeat;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
Icon size is specified in ui-icon class which defaults to 18px.
.ui-icon {
width: 19px;
height: 19px;
}
For those of you looking to have just an icon for the button - I found this article to be very useful! I followed the "Reset the button theme" and "Icon-only buttons" sections to get the effect that I needed.
http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/
I solved this issue, using:
background-color:transparent;
if you want to add color in background you can use:
background: url(yourimage.png) repeat;

iOS html5 css3 button click style

I write my application on HTML5/CSS3/JavaScript. For my button I create style (all work fine in browser), but when I start my application on iPad my active effect override standart iOS click effect.
How I can override this standart effect?
My style :
<style type="text/css">
.button {
display: inline-block;
width: 150px;
height: 50px;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.button:ACTIVE {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015) );
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015' );
}
My Button:
The answer to your problem I believe is very simple.
Add this following CSS code to your button or body tag (to affect the entire document).
body { -webkit-appearance: none; }
This will remove default styles for buttons that iOS places onto certain UI elements.
Hope that helps.
I had the same problem use the button tag and it seems to override.
<button class="button">Link</button>

Resources