Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to use custom colors? #103

Open
ChannelJuanNews opened this issue Nov 28, 2017 · 2 comments
Open

How to use custom colors? #103

ChannelJuanNews opened this issue Nov 28, 2017 · 2 comments

Comments

@ChannelJuanNews
Copy link

Is there a color property you can set on the components to make things a little more custom? Where in the code can I set different colors?

@ChannelJuanNews
Copy link
Author

+1 anyone? lol

@AndrewKralovec
Copy link

AndrewKralovec commented Feb 23, 2019

@ChannelJuanNews , is there a specific component you are having problems changing the color to?

Examples of coloring

Button:

import React, { Component } from 'react';
import { Button } from 'react-desktop/windows';

export default class extends Component {
  static defaultProps = {
    color: '#cc7f29'
  };

  render() {
    return (
      <Button push color={this.props.color} onClick={() => console.log('Clicked!')}>
        Press me!
      </Button>
    );
  }
}

Window

import React, { Component } from 'react';
import { Window, TitleBar, Text } from 'react-desktop/windows';

export default class extends Component {
  static defaultProps = {
    color: '#cc7f29',
    theme: 'light'
  };

  render() {
    return (
      <Window
        color={this.props.color}
        theme={this.props.theme}
        chrome
        height="300px"
        padding="12px"
      >
        <TitleBar title="My Windows Application" controls/>
        <Text color={this.props.theme === 'dark' ? 'white' : '#333'}>Hello World</Text>
      </Window>
    );
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants