I am coding two themes, one dark and one light, and I want to add different background to each.
I tried importing the image to the theme page but it didn't work.
Any idea on how to do it?
LightTheme.js:
const theme = {
id: 'light',
primaryColor: '#f8049c',
secondaryColor: '#fdd54f',
bodyBackgroundColor: '#FFFFE0',
bodyFontColor: 'black',
navFontColor: 'black',
wrapperColor: "papayawhip",
};
export default theme;
You can do that by simply import your asset and add it to your theme file.
Import your image asset.
import img1 from '../assets/img1.jpg'
Add to your theme
const theme = {
id: 'light',
primaryColor: '#f8049c',
secondaryColor: '#fdd54f',
bodyBackgroundColor: '#FFFFE0',
bodyFontColor: 'black',
navFontColor: 'black',
wrapperColor: "papayawhip",
backgroundImg: img1
};
Use in some component the image.
const Content = styled.div`
background-image: ${({ theme }) => theme.backgroundImg};
`
Related
Hi just testing to see if I can render an SVG created using svg.js inside a PIXI application. Codpen here
import * as PIXI from 'https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.5.4/browser/pixi.min.mjs'
const draw = SVG().addTo('body').attr({
viewBox: '0 0 100 100',
width: '100',
height: '100',
"enable-background":"new 0 0 64 64",
style: 'display: block'
})
draw.circle(100).x(50).fill('red')
console.log(draw.node)
const app = new PIXI.Application({
resolution: window.deviceAspectRatio || 1,
resizeTo: window
})
document.body.appendChild(app.view)
const {width,height} = app.renderer.view
console.log(width,height)
PIXI.Loader.shared.onProgress.add(loadProgressHandler)
PIXI.Loader.shared.add("svg",draw.node).load(setup)
function loadProgressHandler(){
console.log('loading')
}
function setup(){
console.log("setup")
const svgCanvas = new PIXI.Sprite(PIXI.Loader.shared.resources.svg.texture)
console.log(svgCanvas)
const container = new PIXI.Container()
container.addChild(svgCanvas)
app.stage.addChild(container)
}
Not getting any errors but also not rendering svg on canvas. Thanks in advance.
i using TweenMax and pixi.js
codepen.io/nimaina/pen/aPERKO
how to remove black background?
Well the black background that you see is the default PIXI.Application setup.
Default width: 800
Default height: 600
Default backgroundColor: 0x000000 (black)
Basically there are two options, that I see, to avoid the black background.
Option 1: use exact dimensions for width and height
I see the dimensions of greensock.png are 538x173.
var app = new PIXI.Application( {
view: document.querySelector("#canvas"),
width: 538,
height: 173
});
Option 2: set transparent:true and make the background transparent
var app = new PIXI.Application( {
view: document.querySelector("#canvas"),
transparent: true
});
In my project i want to change the background-color and font of text. Both the properties are written in css file.
Project structure is:
|-myProject
|--public
|--src
|--package.json
All my css is written in public directory, and i have an api which give response of background-color and font. Now i want to change the properties background-color and font in css files according to api response.
Instead of trying to modify the base stylesheets, why not set these particular properties using the elements’ style attributes:
const divStyle = {
backgroundColor: /* Some color */,
fontFamily: /* Some font stack */,
};
function HelloWorldComponent() {
return <div style={ divStyle }>Hello World!</div>;
}
(adapted from the React docs)
I think the best way to do this would be to use inline style on the elements you want to change.
On api response -> set
const yourVar={
backgroundColor:##,
fontFamily:##
};
I believe that the answer from MTCoster is the best approach. depending on the structure of your app you could use the new Context API to make some sort of theme provider, so that you could pass custom styles that could be stored on your application state and that is loaded from your backend API. there are some tools that could help you integrate this feature more easily, like Styled-Components.
with Styled components you culd write something like:
import styled from 'styled-components'
import { YourComponentJSX } from '../somewhere'
// Wrap the component where you need your custom styles
const YourStyledComponent = styled(YourComponentJSX)`
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border-radius: 3px;
/* Color the border and text with theme.main */
// using the short-if to add a default color in case it is not connected to the ThemeProvider
color: ${props => props.theme.main ? props.theme.main : "palevioletred"};
border: 2px solid ${props => props.theme.main ? props.theme.main : "palevioletred"};
`;
// Define what props.theme will look like
const theme = {
main: "mediumseagreen"
};
render(
<div>
<ThemeProvider theme={theme}>
<App>
<YourStyledComponent>Themed</YourStyledComponent>
</App>
</ThemeProvider>
</div>
);
This way you could wrap your whole app and use custom styles saved on the app state that have been loaded from the backend and use them on really deeply nested ui components
*The code is a modification from the styled-component docs
i have been trying for some time to set an external image over the environment.
This is my index.js:
import React from 'react';
import {
AppRegistry,
StyleSheet,
Text,
asset,
View,
VrButton,
} from 'react-360';
import {Environment} from 'react-360';
// Set the background to a 360 or 180 image
Environment.setBackgroundImage(
{uri: 'https://devcdn.player360.de/dev/media-768-raw.jpg'}
// asset('media-768-raw.jpg')
);
export default class Hello360 extends React.Component {
// Our component will keep track of this state
state = {
};
componentDidMount(){
}
render() {
return (
<View style={styles.panel}>
<Text>
<Text>Hey</Text>
</Text>
</View>
);
}
};
const styles = StyleSheet.create({
panel: {
// Fill the entire surface
width: 1000,
height: 600,
backgroundColor: 'rgba(255, 255, 255, 0.4)',
justifyContent: 'center',
alignItems: 'center',
}
});
AppRegistry.registerComponent('Hello360', () => Hello360);
React seems to try to load the image but it simply cancled for some reason.
Developer Tools: Network Screenshot
Also the console output gives no indication of a CORS or any other exception:
Console Output Screenshot
The background of my scene is still black. What would be the correct way to include dynamically external images in react-360?
It was still the right way to load external images.
The problem was, that a filter was active in my console output. Therefore I was not able to see the CORS warning in the console.
It was still a CORS problem on the devcdn.player360.de server. We fixed the CORS headers and are now able to load external images.
Is there way to customize padding / position... of the burger button.
In the doc, i just can find the drawerImage parameter to override the burger image...
Saddly no option without forking. You can check the code here:
https://github.com/aksonov/react-native-router-flux/blob/master/src/NavBar.js. Padding and position is fixed.
Actually there's a parameter for it : leftButtonStyle
in my case I use react-native-vector-icons getImageSource for the burger icon
componentWillMount() {
Promise.all([Icon.getImageSource('bars', 16, 'black')])
.then((values) => {
this.setState({
menuIcon: values[0],
});
});
}
then you do something like this:
const menuIcon = {
uri: this.state.menuIcon.uri,
height: 20,
width: 20,
resizeMode: 'stretch',
color: 'white',
};
then in your tabs scene
<Scene
key="main"
type="replace"
initial
drawerImage={menuIcon}
tabs
style={{ backgroundColor: theme.navColor, justifyContent: 'center' }}
>