gabrielbull / react-desktop

React UI Components for macOS High Sierra and Windows 10
http://reactdesktop.js.org
MIT License
9.52k stars 462 forks source link

How to use custom colors? #103

Open ChannelJuanNews opened 6 years ago

ChannelJuanNews commented 6 years ago

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 commented 6 years ago

+1 anyone? lol

AndrewKralovec commented 5 years ago

@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>
    );
  }
}