diff --git a/src/views/Theme/Colors/Colors.js b/src/views/Theme/Colors/Colors.js
index 8857024..51498db 100644
--- a/src/views/Theme/Colors/Colors.js
+++ b/src/views/Theme/Colors/Colors.js
@@ -1,4 +1,63 @@
import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import classNames from 'classnames';
+import { Row, Col } from 'reactstrap'
+import { rgbToHex }from '@coreui/coreui/js/src/utilities/'
+
+class ThemeView extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ bgColor: 'rgb(255, 0, 0)'
+ }
+ }
+
+ componentDidMount () {
+ const elem = ReactDOM.findDOMNode(this).parentNode.firstChild
+ const color = window.getComputedStyle(elem).getPropertyValue('background-color')
+ this.setState({
+ bgColor: color
+ })
+ }
+
+ render() {
+
+ return (
+
+
+
+ HEX: |
+ { rgbToHex(this.state.bgColor) } |
+
+
+ RGB: |
+ { this.state.bgColor } |
+
+
+
+ )
+ }
+}
+
+class ThemeColor extends Component {
+ constructor(props) {
+ super(props);
+ }
+ render() {
+
+ const { className, children, ...attributes } = this.props
+
+ const classes = classNames(className, 'theme-color w-75 rounded mb-3')
+
+ return (
+
+
+ {children}
+
+
+ )
+ }
+}
class Colors extends Component {
render() {
@@ -9,32 +68,32 @@ class Colors extends Component {
Theme colors
-
+
+
+ Brand Primary Color
+
+
+ Brand Secondary Color
+
+
+ Brand Success Color
+
+
+ Brand Danger Color
+
+
+ Brand Warning Color
+
+
+ Brand Info Color
+
+
+ Brand Light Color
+
+
+ Brand Dark Color
+
+
@@ -42,19 +101,35 @@ class Colors extends Component {
Grays
-
-
-
100
-
200
-
300
-
400
-
500
-
600
-
700
-
800
-
900
-
-
+
+
+ Gray 100 Color
+
+
+ Gray 200 Color
+
+
+ Gray 300 Color
+
+
+ Gray 400 Color
+
+
+ Gray 500 Color
+
+
+ Gray 600 Color
+
+
+ Gray 700 Color
+
+
+ Gray 800 Color
+
+
+ Gray 900 Color
+
+
@@ -62,38 +137,41 @@ class Colors extends Component {
Additional colors
-
+
+
+ Blue Color
+
+
+ Light Blue Color
+
+
+ Indigo Color
+
+
+ Purple Color
+
+
+ Pink Color
+
+
+ Red Color
+
+
+ Orange Color
+
+
+ Yellow Color
+
+
+ Green Color
+
+
+ Teal Color
+
+
+ Cyan Color
+
+
diff --git a/src/views/Theme/Colors/Colors.test.js b/src/views/Theme/Colors/Colors.test.js
index c2b97ae..8cd0a01 100644
--- a/src/views/Theme/Colors/Colors.test.js
+++ b/src/views/Theme/Colors/Colors.test.js
@@ -6,4 +6,4 @@ it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(, div);
ReactDOM.unmountComponentAtNode(div);
-});
\ No newline at end of file
+});