Use config.colors for 16 first ANSI colors

This commit is contained in:
CHaBou 2017-09-05 18:29:37 +02:00
parent 52bb0d9b3d
commit b5eb437751
2 changed files with 34 additions and 32 deletions

View file

@ -4,6 +4,7 @@ export default class StyleSheet extends React.PureComponent {
render () { render () {
const { const {
customCSS, customCSS,
colors,
cursorColor, cursorColor,
fontSize, fontSize,
fontFamily, fontFamily,
@ -199,131 +200,131 @@ export default class StyleSheet extends React.PureComponent {
} }
.terminal .xterm-color-0 { .terminal .xterm-color-0 {
color: #2e3436; color: ${colors.black};
} }
.terminal .xterm-bg-color-0 { .terminal .xterm-bg-color-0 {
background-color: #2e3436; background-color: ${colors.black};
} }
.terminal .xterm-color-1 { .terminal .xterm-color-1 {
color: #cc0000; color: ${colors.red};
} }
.terminal .xterm-bg-color-1 { .terminal .xterm-bg-color-1 {
background-color: #cc0000; background-color: ${colors.red};
} }
.terminal .xterm-color-2 { .terminal .xterm-color-2 {
color: #4e9a06; color: ${colors.green};
} }
.terminal .xterm-bg-color-2 { .terminal .xterm-bg-color-2 {
background-color: #4e9a06; background-color: ${colors.green};
} }
.terminal .xterm-color-3 { .terminal .xterm-color-3 {
color: #c4a000; color: ${colors.yellow};
} }
.terminal .xterm-bg-color-3 { .terminal .xterm-bg-color-3 {
background-color: #c4a000; background-color: ${colors.yellow};
} }
.terminal .xterm-color-4 { .terminal .xterm-color-4 {
color: #3465a4; color: ${colors.blue};
} }
.terminal .xterm-bg-color-4 { .terminal .xterm-bg-color-4 {
background-color: #3465a4; background-color: ${colors.blue};
} }
.terminal .xterm-color-5 { .terminal .xterm-color-5 {
color: #75507b; color: ${colors.magenta};
} }
.terminal .xterm-bg-color-5 { .terminal .xterm-bg-color-5 {
background-color: #75507b; background-color: ${colors.magenta};
} }
.terminal .xterm-color-6 { .terminal .xterm-color-6 {
color: #06989a; color: ${colors.cyan};
} }
.terminal .xterm-bg-color-6 { .terminal .xterm-bg-color-6 {
background-color: #06989a; background-color: ${colors.cyan};
} }
.terminal .xterm-color-7 { .terminal .xterm-color-7 {
color: #d3d7cf; color: ${colors.white};
} }
.terminal .xterm-bg-color-7 { .terminal .xterm-bg-color-7 {
background-color: #d3d7cf; background-color: ${colors.white};
} }
.terminal .xterm-color-8 { .terminal .xterm-color-8 {
color: #555753; color: ${colors.lightBlack};
} }
.terminal .xterm-bg-color-8 { .terminal .xterm-bg-color-8 {
background-color: #555753; background-color: ${colors.lightBlack};
} }
.terminal .xterm-color-9 { .terminal .xterm-color-9 {
color: #ef2929; color: ${colors.lightRed};
} }
.terminal .xterm-bg-color-9 { .terminal .xterm-bg-color-9 {
background-color: #ef2929; background-color: ${colors.lightRed};
} }
.terminal .xterm-color-10 { .terminal .xterm-color-10 {
color: #8ae234; color: ${colors.lightGreen};
} }
.terminal .xterm-bg-color-10 { .terminal .xterm-bg-color-10 {
background-color: #8ae234; background-color: ${colors.lightGreen};
} }
.terminal .xterm-color-11 { .terminal .xterm-color-11 {
color: #fce94f; color: ${colors.lightYellow};
} }
.terminal .xterm-bg-color-11 { .terminal .xterm-bg-color-11 {
background-color: #fce94f; background-color: ${colors.lightYellow};
} }
.terminal .xterm-color-12 { .terminal .xterm-color-12 {
color: #729fcf; color: ${colors.lightBlue};
} }
.terminal .xterm-bg-color-12 { .terminal .xterm-bg-color-12 {
background-color: #729fcf; background-color: ${colors.lightBlue};
} }
.terminal .xterm-color-13 { .terminal .xterm-color-13 {
color: #ad7fa8; color: ${colors.lightMagenta};
} }
.terminal .xterm-bg-color-13 { .terminal .xterm-bg-color-13 {
background-color: #ad7fa8; background-color: ${colors.lightMagenta};
} }
.terminal .xterm-color-14 { .terminal .xterm-color-14 {
color: #34e2e2; color: ${colors.lightCyan};
} }
.terminal .xterm-bg-color-14 { .terminal .xterm-bg-color-14 {
background-color: #34e2e2; background-color: ${colors.lightCyan};
} }
.terminal .xterm-color-15 { .terminal .xterm-color-15 {
color: #eeeeec; color: ${colors.lightWhite};
} }
.terminal .xterm-bg-color-15 { .terminal .xterm-bg-color-15 {
background-color: #eeeeec; background-color: ${colors.lightWhite};
} }
.terminal .xterm-color-16 { .terminal .xterm-color-16 {

View file

@ -120,6 +120,7 @@ export default class Terms extends Component {
} }
{ this.props.customChildren } { this.props.customChildren }
<StyleSheet <StyleSheet
colors={this.props.colors}
customCSS={this.props.customCSS} customCSS={this.props.customCSS}
cursorColor={this.props.cursorColor} cursorColor={this.props.cursorColor}
fontSize={this.props.fontSize} fontSize={this.props.fontSize}