feat: add more options to theme

Author: RomanHotsiy

src/common-elements/fields.ts

@@ -13,20 +13,21 @@ export const FieldLabel = styled.span`
 `;
 
 export const TypePrefix = FieldLabel.extend`
-  color: ${props => transparentize(0.4, props.theme.colors.text)};
+  color: ${props => transparentize(0.2, props.theme.schemaView.typeNameColor)};
 `;
 
 export const TypeName = FieldLabel.extend`
-  color: ${props => transparentize(0.8, props.theme.colors.text)};
+  color: ${props => props.theme.schemaView.typeNameColor};
 `;
+
 export const TypeTitle = FieldLabel.extend`
-  color: ${props => transparentize(0.5, props.theme.colors.text)};
+  color: ${props => props.theme.schemaView.typeTitleColor};
 `;
 
 export const TypeFormat = TypeName;
 
 export const RequiredLabel = FieldLabel.withComponent('div').extend`
-  color: #e53935;
+  color: ${props => props.theme.schemaView.requireLabelColor};
   font-size: 11px;
   font-weight: normal;
   margin-left: 20px;

src/theme.ts

@@ -1,4 +1,4 @@
-import { adjustHue, desaturate, lighten } from 'polished';
+import { adjustHue, desaturate, lighten, transparentize } from 'polished';
 
 const defaultTheme: ThemeInterface = {
   spacingUnit: 20,
@@ -29,6 +29,9 @@ const defaultTheme: ThemeInterface = {
   schemaView: {
     linesColor: theme => lighten(0.25, desaturate(0.35, theme.colors.main)),
     defaultDetailsWidth: '75%',
+    typeNameColor: theme => transparentize(0.8, theme.colors.text),
+    typeTitleColor: theme => theme.schemaView.typeNameColor,
+    requireLabelColor: theme => theme.colors.error,
   },
   baseFont: {
     size: '14px',
@@ -129,6 +132,9 @@ export interface ResolvedThemeInterface {
   schemaView: {
     linesColor: string;
     defaultDetailsWidth: string;
+    typeNameColor: string;
+    typeTitleColor: string;
+    requireLabelColor: string;
   };
   baseFont: {
     size: string;