update color

src/constants/theme.ts

@@ -11,7 +11,7 @@ export const darkTheme: DefaultTheme = {
   CRIMSON: "#DC143C",
   DARK_SALMON: "#E9967A",
   DANGER: "#F26522",
-  SEAGREEN: "#3BA55D",
+  LIGHTGREEN: "#90EE90",
   ORANGE: "#FAA81A",
   SILVER: "#B9BBBE",
   SILVER_DARK: "#4D4D4D"

src/containers/LiveEditor/CustomNode/styles.tsx

@@ -1,49 +1,53 @@
 import styled from "styled-components";
 
 export const StyledTextWrapper = styled.div`
-position: absolute;
-display: flex;
-justify-content: center;
-align-items: center;
-font-size: 12px;
-width: 100%;
-height: 100%;
-overflow: hidden;
-cursor: pointer;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 12px;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  cursor: pointer;
 `;
 
-export const StyledText = styled.pre<{ width: number; height: number }>`
-display: flex;
-justify-content: center;
-flex-direction: column;
-width: ${({ width }) => width};
-height: ${({ height }) => height};
-color: ${({ theme }) => theme.SILVER};
+export const StyledText = styled.pre<{
+  width: number;
+  height: number;
+}>`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  width: ${({ width }) => width};
+  height: ${({ height }) => height};
+  color: ${({ theme }) => theme.SILVER};
 `;
 
 export const StyledForeignObject = styled.foreignObject<{
-width: number;
-height: number;
+  width: number;
+  height: number;
 }>`
-position: "relative" !important;
-pointer-events: "none" !important;
-width: ${({ width }) => width + "px"};
-height: ${({ height }) => height + "px"};
+  position: "relative" !important;
+  pointer-events: "none" !important;
+  width: ${({ width }) => width + "px"};
+  height: ${({ height }) => height + "px"};
 `;
 
 export const StyledKey = styled.span<{
-bond?: boolean;
-arrayValue?: boolean;
+  objectKey?: boolean;
+  parent?: boolean;
 }>`
-color: ${({ theme, bond, arrayValue }) =>
-  bond ? theme.SEAGREEN : arrayValue ? theme.ORANGE : theme.BLURPLE};
+  font-style: ${({ parent, objectKey }) => !(parent || objectKey) && "italic"};
+  color: ${({ theme, objectKey, parent }) =>
+    parent ? theme.ORANGE : objectKey ? theme.BLURPLE : theme.LIGHTGREEN};
 `;
 
 export const StyledRow = styled.div<{ width: number }>`
-height: fit-content;
-overflow: hidden;
-text-overflow: ellipsis;
-white-space: nowrap;
-padding: 0 auto;
-width: ${({ width }) => `${width - 20}px`};
-`;
+  height: fit-content;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 auto;
+  width: ${({ width }) => `${width - 20}px`};
+`;