I try to change the status bar in the safari browser, I search it and it was a lot's question about it but none of them fixed my issue.
I tried change-status-bar-color and how-to-change-chrome-header-color.
This blue area is around iPhone's notches, and I want to change the color in the whole app.
thanks for your attention.
You want to change the value for theme-color. The default color you're seeing is defined in your web/manifest.json file.
You could also set it, for example to white for your light-theme and to black for your dark-theme, by adding following lines to your web/index.html:
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#FFFFFF">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000">
You could also change it dynamically via dart:js by adding a script to your web/index.html:
<script>
function setMetaThemeColor(color) {
document.querySelector('meta[name="theme-color"]').setAttribute("content", color);
}
</script>
Then call it via dart:js:
import 'package:flutter/material.dart';
import 'dart:js' as js;
extension ColorString on Color {
String toHexString() {
return '#${(value & 0xFFFFFF).toRadixString(16).padLeft(6, '0').toUpperCase()}';
}
}
void setMetaThemeColor(Color color) {
js.context.callMethod("setMetaThemeColor", [color.toHexString()]);
}
Please try to use the below code:
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.red,
));
Related
Is there any way to change the status bar color via Flutter Web in an installed PWA?
You want to change the value for theme-color. The default color is defined in your web/manifest.json file.
You could also set it, for example to white for your light-theme and to black for your dark-theme, by adding following lines to your web/index.html:
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#FFFFFF">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000">
You could also change it dynamically via dart:js by adding a script to your web/index.html:
<script>
function setMetaThemeColor(color) {
document.querySelector('meta[name="theme-color"]').setAttribute("content", color);
}
</script>
Then call it via dart:js:
import 'package:flutter/material.dart';
import 'dart:js' as js;
extension ColorString on Color {
String toHexString() {
return '#${(value & 0xFFFFFF).toRadixString(16).padLeft(6, '0').toUpperCase()}';
}
}
void setMetaThemeColor(Color color) {
js.context.callMethod("setMetaThemeColor", [color.toHexString()]);
}
I think I have a very basic problem but I can't resolve it. So what I am trying to do is to implement a button in Ionic that when pressed change the style of a style. To keep it simple for now I try and change the background color of a div. However, it does not work neither does it give an error. (I use console page of browser to view changes, look for errors etc)
The code in the card.page.html page is
<ion-button
(click)="setStyle('red')"
[style.--background]="'pink'"
>
Some Button
</ion-button>
The code in the card.page.ts is
setStyle(value: string): void {
console.log('read More Works');
this.aColor = '#yellow';
console.log('read More still Works');
}
and that is it. Clicking on 'Some Button' button does not do anything except the logging but I am pretty sure it is not two way binding that is the issue as I tried just using for example trying with just some text as being the 'variable' I want to change and that worked fine.
I do appreciate any help :(
Thanks
You can use pre defined CSS styles for that. Something like this:
card.page.scss
#somediv {
&.initial-style {
background: #000;
}
&.dinamic-style {
background: #fff;
}
}
card.page.html
<div id="somediv" [class]="apply_styles ? 'dinamic-style' : 'initial-style'">
styles applied: {{ apply_styles }}
</div>
<ion-button (click)="changeStyle()">Change Style</ion-button>
card.page.ts
apply_styles: boolean = false;
changeStyle() {
this.apply_styles = !this.apply_styles;
}
Of course this is very simple. But I hope it can put you in the right direction.
There are lines over all the multiline Text tags in the app.Lines only shows on iPhone Plus not on iPad, tab, android or any other device.
Any idea how to fix it? Lines over Text similar to the image below:
import React, {Component} from "react";
import {
Image,
View,
StatusBar,
TouchableOpacity,
WebView,
Dimensions,
Linking,
ScrollView,
NetInfo,
Alert
} from "react-native";
import {
Container,
Header,
Title,
Content,
Text,
H3,
Button,
Icon,
Footer,
FooterTab,
Left,
Right,
Body
} from "native-base";
class Test extends Component {
constructor() {
super();
}
render() {
return (
<Container style={styles.container}>
<View>
<Text> test test test test test test </Text>
</View>
</Container>
);
}
}
export default Test;
iPhone 7 Plus show lines on text component background, this is react native known issue already reported on github as well. To resolve this add this in style:
backgroundColor: 'transparent',
I'm trying to update the title of the document in a React app. I have very simple needs for this. The title is essentially used to put the Total component on display even when you're on a different tab.
This was my first instinct:
const React = require('react');
export default class Total extends React.Component {
shouldComponentUpdate(nextProps) {
//otherstuff
document.title = this.props.total.toString();
console.log("Document title: ", document.title);
return true;
}
render() {
document.title = this.props.total;
return (
<div className="text-center">
<h1>{this.props.total}</h1>
</div>
);
}
}
I thought this would just update the document.title every time this component was rendered, but it doesn't appear to do anything.
Not sure what I'm missing here. Probably something to do with how React runs this function - maybe somewhere that the document variable isn't available?
EDIT:
I'm starting a bounty for this question, as I still haven't found any solution. I've updated my code to a more recent version.
A weird development is that the console.log does print out the title I'm looking for. But for some reason, the actual title in the tab isn't updating. This issue is the same across Chrome, Safari, and Firefox.
I now use react-helmet for this purpose, as it allows to customize different meta tags and links, and it also supports SSR.
import { Helmet } from 'react-helmet'
const Total = () => (
<div className="text-center">
<Helmet>
<meta charSet="utf-8" />
<title>{this.props.total}</title>
</Helmet>
<h1>{this.props.total}</h1>
</div>
)
Original answer: there's actually a package by gaeron for this purpose, but in a declarative way:
import React, { Component } from 'react'
import DocumentTitle from 'react-document-title'
export default class Total extends Component {
render () {
return (
<DocumentTitle title={this.props.total}>
<div className='text-center'>
<h1>{this.props.total}</h1>
</div>
</DocumentTitle>
)
}
}
Inside your componentDidMount() function in App.js (or wherever), simply have:
componentDidMount() {
document.title = "Amazing Page";
}
The reason this works is anywhere in your react project you have access to the Js global scope. Go ahead and type window in your sites console. Basically everything there you will be able to access in your React project.
I think webpack-dev-server runs in an iframe mode by default:
https://webpack.github.io/docs/webpack-dev-server.html#iframe-mode
So that might be why your attempts to set the title are failing. Try setting the inline option to true on webpack-dev-server, if you haven't already.
If the react-document-title package isn't working for you, the quick'n'dirty way to do that would be in a lifecycle method, probably both componentDidMount and componentWillReceiveProps (you can read more about those here):
So you would do something like:
const React = require('react');
export default class Total extends React.Component {
// gets called whenever new props are assigned to the component
// but NOT during the initial mount/render
componentWillReceiveProps(nextProps) {
document.title = this.props.total;
}
// gets called during the initial mount/render
componentDidMount() {
document.title = this.props.total;
}
render() {
return (
<div className="text-center">
<h1>{this.props.total}</h1>
</div>
);
}
}
There is a better way of dynamically changing document title with react-helmet package.
As a matter of fact you can dynamically change anything inside <head> tag using react-helmet from inside your component.
const componentA = (props) => {
return (
<div>
<Helmet>
<title>Your dynamic document/page Title</title>
<meta name="description" content="Helmet application" />
</Helmet>
.....other component content
);
}
To change title, meta tags and favicon dynamically at run time react-helmet provides a simple solution. You can also do this in componentDidMount using the standard document interface. In the example below I am using the same code for multiple sites, so helmet is looking for favicon and title from an environment variable
import { Helmet } from "react-helmet";
import { getAppStyles } from '../relative-path';
import { env } from '../relative-path';
<Helmet>
<meta charSet="utf-8" />
<title>{pageTitle[env.app.NAME].title}</title>
<link rel="shortcut icon" href={appStyles.favicon} />
</Helmet>
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();
});