ionic statusbar.styleDefault() isn't working on andorid - ionic-framework

I want to have a white status bar with black font in my white theme. the problem is that the styleDefault() method which is made for it does not work. But this error only happens on Android on Ios it works perfectly. Is there any way to change the font color to black on the statusbar (only for android) or to change it with css? Or how can i make styleDefault() (dark text, for light backgrounds) work again?
Here is my code:
private setStatusBarStyle(darkTheme: boolean) {
if (darkTheme) {
this.statusBar.styleLightContent();
} else {
this.statusBar.styleDefault();
}
}

Related

How to change disabled color in MRTK Interactable buttons correctly?

I am working to an application with unity3D and MRTK package for hololens2 and I am trying to change the color of a toggle when it is disabled.
The toggle has an Interactable script on it with many profiles, one of them has two themes for the selected state that are "InteractableActivateTheme" and "Interactable color children theme".
I used successfully the latter to change color of the toggle when selected using the theme field "Pressed" and "Default", but I am not able to use the "Disabled" field in any case.
Screenshot of the profile I am talking about
I disable the toggle by code setting the state to disabled in this way:
PlaceToggle.SetState(InteractableStates.InteractableStateEnum.Disabled, true);
PlaceToggle.enabled = true;
The toggle disables itself but the color remains red has set in the "Default" State Properties of the "InteractableColorChildrenTheme".
I also tried to change the color by code like this, but I had no result:
var activeThemes = PlaceToggle.ActiveThemes;
foreach (InteractableThemeBase itb in activeThemes)
{
if (itb is InteractableColorChildrenTheme)
{
Debug.Log(" changing state property");
var property = itb.StateProperties;
oldColor = itb.StateProperties[0].Values[0].Color;
itb.StateProperties[0].Values[0].Color = Color.gray;
}
}
Any idea on how could I understand what it is happening and why it is not working??
Thanks you all
Please try the following code to disable your button:
buttonInteractable = this.GetComponent<Interactable>();
buttonInteractable.IsEnabled = false;
Verified in MRTK2.7 & Unity 2019.4.22.

Case Study for Card Development Using Pseudo-Classes

While developing a card, I used a pseudo-class for a component to implement a color changing effect. However, the color cannot be restored.
For example, the original background color of a picture was yellow.See Image
This figure shows the new background color after using the pseudo-class. It is red now.
See Image
In normal cases, the card’s background color is changed upon tapping, and will return to the original color when you lift your finger. So how to achieve this?
Simply add a tap event to the component using the pseudo-class. No logic processing is needed.
Sample code:
<div class="sitetype_box" widgetid="8e4bf1ca-f716-46f8-8614-16d1b35002c5" onclick="test">
</div>
CSS style:
.sitetype_box {
flex-direction: column;
background-color:#FFBF00;
padding: dpConvert(0) dpConvert($elementsMarginHorizontalL) dpConvert(0) dpConvert($elementsMarginHorizontalL);
}
/** Pseudo-class */
.sitetype_box :active{
background-color: #E40078;
}
Method:
test(){
console.log("message");
}
For Details,check Pseudo-classes for quick apps

PDFView's effectiveAppearance not updated when switching to dark mode

PDFKit's PDFView seems to not be compatible with dark mode. It's effectiveAppearance does not get updated when user switches to dark mode.
override public func updateLayer() {
print("mode = \(effectiveAppearance.name)")
super.updateLayer()
}
// even in dark mode, always prints: mode = NSAppearanceName(_rawValue: NSAppearanceNameAqua)
Is there any reason for that? Any elegant workaround to change PDFView's background color with dark mode?

How to change swiper-pagination-bullet background in ionicv4

I am facing problem to change slider bullets in Ionic v4
.swiper-pagination-bullet {
--bullet-background: red;
}
Just use
.swiper-pagination-bullet{ background-color:red;}
or
.swiper-pagination-bullet{ background:red;}
This will work fine.

How do I change the top bar text color to white in my Ionic App?

I changed the header to a darker color using this:
<ion-nav-bar class="bar-royal">
When I run it on ios, the status bar text (time, carrier, battery, etc) at the top is black and difficult to see on the dark background. How do I make this text white?
With the plugin statusbar and ngCordova is pretty simple:
var app = angular.module('ionicApp', ['ionic', 'ngCordova']);
app.run(function($cordovaStatusbar) {
$cordovaStatusbar.overlaysWebView(true);
$cordovaStatusBar.style(1); //Light
$cordovaStatusBar.style(2); //Black, transulcent
$cordovaStatusBar.style(3); //Black, opaque
});
Take a look to the full article here:
http://learn.ionicframework.com/formulas/customizing-the-status-bar/
UPDATE - Without ngCordova:
Default Ionic project comes with the statusbar plugin installed. If you have this statement inside you run probably your project already have:
if(window.StatusBar) {
StatusBar.styleDefault();
}
So the code become:
var app = angular.module('ionicApp', ['ionic']);
app.run(function() {
if(window.StatusBar) {
StatusBar.overlaysWebView(true);
StatusBar.style(1); //Light
StatusBar.style(2); //Black, transulcent
StatusBar.style(3); //Black, opaque
}
});
UPDATE II
With a new version 2.x of the cordova-plugin-statusbar the StatusBar.style() method was substituted with these new methods:
StatusBar.styleLightContent();
StatusBar.styleBlackTranslucent();
StatusBar.styleBlackOpaque();
Check the plugin's documentation
In ionic 4 with angular app we can change the status bar color as well as its text color by following code how to change status bar's text color
this.platform.ready().then(() => {
this.splashScreen.hide();
this.statusBar.overlaysWebView(true);
this.statusBar.styleDefault();
});