diff --git a/app/components/Viewer/Generic/Model/BlocksOptions.vue b/app/components/Viewer/Generic/Model/BlocksOptions.vue
index 551b2d8b..b594b9f8 100644
--- a/app/components/Viewer/Generic/Model/BlocksOptions.vue
+++ b/app/components/Viewer/Generic/Model/BlocksOptions.vue
@@ -44,28 +44,24 @@ const blocksColor = computed({
 const blockColor = computed({
   get: () => dataStyleStore.modelBlockColor(modelId, blockId),
   set: async (color) => {
-    if (blockId) {
-      await dataStyleStore.setModelBlocksColor(modelId, [blockId], color);
-      hybridViewerStore.remoteRender();
-    }
+    await dataStyleStore.setModelBlocksColor(modelId, [blockId], color);
+    hybridViewerStore.remoteRender();
   },
 });
 
-const blocksColorMode = computed({
-  get: () => dataStyleStore.getModelComponentTypeColorMode(modelId, "Block"),
-  set: async (colorMode) => {
-    await dataStyleStore.setModelComponentTypeColorMode(modelId, "Block", colorMode);
+const blocksActiveColoring = computed({
+  get: () => dataStyleStore.getModelComponentTypeActiveColoring(modelId, "Block"),
+  set: async (coloringType) => {
+    await dataStyleStore.setModelComponentTypeActiveColoring(modelId, "Block", coloringType);
     hybridViewerStore.remoteRender();
   },
 });
 
-const blockColorMode = computed({
-  get: () => dataStyleStore.modelBlockColorMode(modelId, blockId),
-  set: async (colorMode) => {
-    if (blockId) {
-      await dataStyleStore.setModelComponentColorMode(modelId, blockId, colorMode);
-      hybridViewerStore.remoteRender();
-    }
+const blockActiveColoring = computed({
+  get: () => dataStyleStore.modelBlockActiveColoring(modelId, blockId),
+  set: async (coloringType) => {
+    await dataStyleStore.setModelBlocksActiveColoring(modelId, [blockId], coloringType);
+    hybridViewerStore.remoteRender();
   },
 });
 
@@ -211,7 +207,7 @@ const polyhedronSchema = back_schemas.opengeodeweb_back.model_component_polyhedr
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
       :componentId="targetBlockIds[0]"
-      v-model:coloring_style_key="blocksColorMode"
+      v-model:coloring_style_key="blocksActiveColoring"
       v-model:color="blocksColor"
       v-model:vertex_attribute_name="blocksVertexAttributeName"
       v-model:vertex_attribute_range="blocksVertexAttributeRange"
@@ -230,7 +226,7 @@ const polyhedronSchema = back_schemas.opengeodeweb_back.model_component_polyhedr
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
       :componentId="blockId"
-      v-model:coloring_style_key="blockColorMode"
+      v-model:coloring_style_key="blockActiveColoring"
       v-model:color="blockColor"
       v-model:vertex_attribute_name="vertexAttributeName"
       v-model:vertex_attribute_range="vertexAttributeRange"
diff --git a/app/components/Viewer/Generic/Model/CornersOptions.vue b/app/components/Viewer/Generic/Model/CornersOptions.vue
index 872bf2b9..4e7686e7 100644
--- a/app/components/Viewer/Generic/Model/CornersOptions.vue
+++ b/app/components/Viewer/Generic/Model/CornersOptions.vue
@@ -44,28 +44,24 @@ const cornersColor = computed({
 const cornerColor = computed({
   get: () => dataStyleStore.modelCornerColor(modelId, cornerId),
   set: async (color) => {
-    if (cornerId) {
-      await dataStyleStore.setModelCornersColor(modelId, [cornerId], color);
-      hybridViewerStore.remoteRender();
-    }
+    await dataStyleStore.setModelCornersColor(modelId, [cornerId], color);
+    hybridViewerStore.remoteRender();
   },
 });
 
-const cornersColorMode = computed({
-  get: () => dataStyleStore.getModelComponentTypeColorMode(modelId, "Corner"),
-  set: async (colorMode) => {
-    await dataStyleStore.setModelComponentTypeColorMode(modelId, "Corner", colorMode);
+const cornersActiveColoring = computed({
+  get: () => dataStyleStore.getModelComponentTypeActiveColoring(modelId, "Corner"),
+  set: async (coloringType) => {
+    await dataStyleStore.setModelComponentTypeActiveColoring(modelId, "Corner", coloringType);
     hybridViewerStore.remoteRender();
   },
 });
 
-const cornerColorMode = computed({
-  get: () => dataStyleStore.modelCornerColorMode(modelId, cornerId),
-  set: async (colorMode) => {
-    if (cornerId) {
-      await dataStyleStore.setModelComponentColorMode(modelId, cornerId, colorMode);
-      hybridViewerStore.remoteRender();
-    }
+const cornerActiveColoring = computed({
+  get: () => dataStyleStore.modelCornerActiveColoring(modelId, cornerId),
+  set: async (coloringType) => {
+    await dataStyleStore.setModelCornersActiveColoring(modelId, [cornerId], coloringType);
+    hybridViewerStore.remoteRender();
   },
 });
 
@@ -148,7 +144,7 @@ const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attri
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
       :componentId="targetCornerIds[0]"
-      v-model:coloring_style_key="cornersColorMode"
+      v-model:coloring_style_key="cornersActiveColoring"
       v-model:color="cornersColor"
       v-model:vertex_attribute_name="cornersVertexAttributeName"
       v-model:vertex_attribute_range="cornersVertexAttributeRange"
@@ -164,7 +160,7 @@ const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attri
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
       :componentId="cornerId"
-      v-model:coloring_style_key="cornerColorMode"
+      v-model:coloring_style_key="cornerActiveColoring"
       v-model:color="cornerColor"
       v-model:vertex_attribute_name="vertexAttributeName"
       v-model:vertex_attribute_range="vertexAttributeRange"
diff --git a/app/components/Viewer/Generic/Model/LinesOptions.vue b/app/components/Viewer/Generic/Model/LinesOptions.vue
index ea471903..fe9a0a27 100644
--- a/app/components/Viewer/Generic/Model/LinesOptions.vue
+++ b/app/components/Viewer/Generic/Model/LinesOptions.vue
@@ -44,28 +44,24 @@ const linesColor = computed({
 const lineColor = computed({
   get: () => dataStyleStore.modelLineColor(modelId, lineId),
   set: async (color) => {
-    if (lineId) {
-      await dataStyleStore.setModelLinesColor(modelId, [lineId], color);
-      hybridViewerStore.remoteRender();
-    }
+    await dataStyleStore.setModelLinesColor(modelId, [lineId], color);
+    hybridViewerStore.remoteRender();
   },
 });
 
-const linesColorMode = computed({
-  get: () => dataStyleStore.getModelComponentTypeColorMode(modelId, "Line"),
-  set: async (colorMode) => {
-    await dataStyleStore.setModelComponentTypeColorMode(modelId, "Line", colorMode);
+const linesActiveColoring = computed({
+  get: () => dataStyleStore.getModelComponentTypeActiveColoring(modelId, "Line"),
+  set: async (coloringType) => {
+    await dataStyleStore.setModelComponentTypeActiveColoring(modelId, "Line", coloringType);
     hybridViewerStore.remoteRender();
   },
 });
 
-const lineColorMode = computed({
-  get: () => dataStyleStore.modelLineColorMode(modelId, lineId),
-  set: async (colorMode) => {
-    if (lineId) {
-      await dataStyleStore.setModelComponentColorMode(modelId, lineId, colorMode);
-      hybridViewerStore.remoteRender();
-    }
+const lineActiveColoring = computed({
+  get: () => dataStyleStore.modelLineActiveColoring(modelId, lineId),
+  set: async (coloringType) => {
+    await dataStyleStore.setModelLinesActiveColoring(modelId, [lineId], coloringType);
+    hybridViewerStore.remoteRender();
   },
 });
 
@@ -207,7 +203,7 @@ const edgeSchema = back_schemas.opengeodeweb_back.model_component_edge_attribute
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
       :componentId="targetLineIds[0]"
-      v-model:coloring_style_key="linesColorMode"
+      v-model:coloring_style_key="linesActiveColoring"
       v-model:color="linesColor"
       v-model:vertex_attribute_name="linesVertexAttributeName"
       v-model:vertex_attribute_range="linesVertexAttributeRange"
@@ -226,7 +222,7 @@ const edgeSchema = back_schemas.opengeodeweb_back.model_component_edge_attribute
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
       :componentId="lineId"
-      v-model:coloring_style_key="lineColorMode"
+      v-model:coloring_style_key="lineActiveColoring"
       v-model:color="lineColor"
       v-model:vertex_attribute_name="vertexAttributeName"
       v-model:vertex_attribute_range="vertexAttributeRange"
diff --git a/app/components/Viewer/Generic/Model/ModelStyleCard.vue b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
index e415744c..040e8797 100644
--- a/app/components/Viewer/Generic/Model/ModelStyleCard.vue
+++ b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
@@ -1,6 +1,6 @@
 <script setup>
 import OptionsSection from "@ogw_front/components/Viewer/Options/OptionsSection.vue";
-import ViewerOptionsColorPicker from "@ogw_front/components/Viewer/Options/ColorPicker.vue";
+import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
 import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
@@ -86,43 +86,36 @@ const modelVisibility = computed({
   },
 });
 
-const colorModes = [
-  { title: "Constant", value: "constant" },
-  { title: "Random", value: "random" },
-];
-
-const modelComponentsColorMode = ref("constant");
-
-const modelComponentsColor = computed({
-  get: () => {
-    if (selection.value.length > 0) {
-      return dataStyleStore.getModelComponentColor(modelId.value, selection.value[0]);
-    }
-    return { red: 255, green: 255, blue: 255 };
-  },
-  set: async (color) => {
-    if (selection.value.length > 0) {
-      await dataStyleStore.setModelComponentsColor(
-        modelId.value,
-        selection.value,
-        color,
-        modelComponentsColorMode.value,
-      );
-      hybridViewerStore.remoteRender();
-    }
+const modelComponentsActiveColoring = computed({
+  get: () => dataStyleStore.getModelActiveColoring(modelId.value),
+  set: async (coloringType) => {
+    await dataStyleStore.mutateStyle(modelId.value, {
+      coloring: { active: coloringType },
+    });
+    await dataStyleStore.setModelComponentsColor(
+      modelId.value,
+      selection.value,
+      modelComponentsColor.value,
+      coloringType,
+    );
+    hybridViewerStore.remoteRender();
   },
 });
 
-watch(modelComponentsColorMode, async (colorMode) => {
-  if (colorMode === "random" && selection.value.length > 0) {
+const modelComponentsColor = computed({
+  get: () => dataStyleStore.getModelColor(modelId.value),
+  set: async (color) => {
+    await dataStyleStore.mutateStyle(modelId.value, {
+      coloring: { constant: color },
+    });
     await dataStyleStore.setModelComponentsColor(
       modelId.value,
       selection.value,
-      undefined,
-      colorMode,
+      color,
+      modelComponentsActiveColoring.value,
     );
     hybridViewerStore.remoteRender();
-  }
+  },
 });
 </script>
 
@@ -133,20 +126,13 @@ watch(modelComponentsColorMode, async (colorMode) => {
     </OptionsSection>
 
     <OptionsSection v-if="!componentType && !componentId" title="Components Options" class="mt-4">
-      <v-label class="text-caption mb-1 mt-2">Color Mode</v-label>
-      <v-select
-        v-model="modelComponentsColorMode"
-        :items="colorModes"
-        density="compact"
-        hide-details
-        class="mb-3"
-        variant="outlined"
+      <ViewerOptionsColoringTypeSelector
+        :id="modelId"
+        v-model:coloring_style_key="modelComponentsActiveColoring"
+        v-model:color="modelComponentsColor"
+        :capabilities="{ color: { available: true } }"
+        :allowRandom="true"
       />
-
-      <template v-if="modelComponentsColorMode === 'constant'">
-        <v-label class="text-caption mb-1">Color</v-label>
-        <ViewerOptionsColorPicker v-model="modelComponentsColor" />
-      </template>
     </OptionsSection>
 
     <BlocksOptions
diff --git a/app/components/Viewer/Generic/Model/SurfacesOptions.vue b/app/components/Viewer/Generic/Model/SurfacesOptions.vue
index f5e6d5d8..4e725b27 100644
--- a/app/components/Viewer/Generic/Model/SurfacesOptions.vue
+++ b/app/components/Viewer/Generic/Model/SurfacesOptions.vue
@@ -44,28 +44,24 @@ const surfacesColor = computed({
 const surfaceColor = computed({
   get: () => dataStyleStore.modelSurfaceColor(modelId, surfaceId),
   set: async (color) => {
-    if (surfaceId) {
-      await dataStyleStore.setModelSurfacesColor(modelId, [surfaceId], color);
-      hybridViewerStore.remoteRender();
-    }
+    await dataStyleStore.setModelSurfacesColor(modelId, [surfaceId], color);
+    hybridViewerStore.remoteRender();
   },
 });
 
-const surfacesColorMode = computed({
-  get: () => dataStyleStore.getModelComponentTypeColorMode(modelId, "Surface"),
-  set: async (colorMode) => {
-    await dataStyleStore.setModelComponentTypeColorMode(modelId, "Surface", colorMode);
+const surfacesActiveColoring = computed({
+  get: () => dataStyleStore.getModelComponentTypeActiveColoring(modelId, "Surface"),
+  set: async (coloringType) => {
+    await dataStyleStore.setModelComponentTypeActiveColoring(modelId, "Surface", coloringType);
     hybridViewerStore.remoteRender();
   },
 });
 
-const surfaceColorMode = computed({
-  get: () => dataStyleStore.modelSurfaceColorMode(modelId, surfaceId),
-  set: async (colorMode) => {
-    if (surfaceId) {
-      await dataStyleStore.setModelComponentColorMode(modelId, surfaceId, colorMode);
-      hybridViewerStore.remoteRender();
-    }
+const surfaceActiveColoring = computed({
+  get: () => dataStyleStore.modelSurfaceActiveColoring(modelId, surfaceId),
+  set: async (coloringType) => {
+    await dataStyleStore.setModelSurfacesActiveColoring(modelId, [surfaceId], coloringType);
+    hybridViewerStore.remoteRender();
   },
 });
 
@@ -215,7 +211,7 @@ const polygonSchema = back_schemas.opengeodeweb_back.model_component_polygon_att
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
       :componentId="targetSurfaceIds[0]"
-      v-model:coloring_style_key="surfacesColorMode"
+      v-model:coloring_style_key="surfacesActiveColoring"
       v-model:color="surfacesColor"
       v-model:vertex_attribute_name="surfacesVertexAttributeName"
       v-model:vertex_attribute_range="surfacesVertexAttributeRange"
@@ -234,7 +230,7 @@ const polygonSchema = back_schemas.opengeodeweb_back.model_component_polygon_att
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
       :componentId="surfaceId"
-      v-model:coloring_style_key="surfaceColorMode"
+      v-model:coloring_style_key="surfaceActiveColoring"
       v-model:color="surfaceColor"
       v-model:vertex_attribute_name="vertexAttributeName"
       v-model:vertex_attribute_range="vertexAttributeRange"
diff --git a/app/components/Viewer/Options/AttributeSelector.vue b/app/components/Viewer/Options/AttributeSelector.vue
index ebddff69..62e8a35d 100644
--- a/app/components/Viewer/Options/AttributeSelector.vue
+++ b/app/components/Viewer/Options/AttributeSelector.vue
@@ -4,7 +4,12 @@ import { useBackStore } from "@ogw_front/stores/back";
 
 const backStore = useBackStore();
 
-const name = defineModel("name", { type: String });
+const name = defineModel("name", {
+  type: String,
+  default: undefined,
+  set: (value) => value ?? name.value,
+});
+
 const range = defineModel("range", { type: Array });
 const colorMap = defineModel("colorMap", { type: String });
 
diff --git a/app/components/Viewer/Options/ColoringTypeSelector.vue b/app/components/Viewer/Options/ColoringTypeSelector.vue
index 4d4049ca..c9a70146 100644
--- a/app/components/Viewer/Options/ColoringTypeSelector.vue
+++ b/app/components/Viewer/Options/ColoringTypeSelector.vue
@@ -98,8 +98,8 @@ const has_polyhedra = computed(
     hasColorMap("polyhedron"),
 );
 
-const color_dict = { name: "Color", value: "color" };
-const random_dict = { name: "Random color", value: "random" };
+const color_dict = { name: "Constant", value: "constant" };
+const random_dict = { name: "Random", value: "random" };
 const textures_dict = { name: "Textures", value: "textures" };
 const vertex_dict = { name: "Vertex attribute", value: "vertex" };
 const edge_dict = { name: "Edge attribute", value: "edge" };
@@ -144,13 +144,35 @@ const coloring_styles = computed(() => {
 
 const coloring_style_label = ref("");
 
-watch(coloring_style_label, (value) => {
-  const index = coloring_styles.value.labels.indexOf(value);
-  if (index !== -1) {
-    coloring_style_key.value = coloring_styles.value.values[index];
-  }
+const active_key = computed(() => {
+  const index = coloring_styles.value.labels.indexOf(coloring_style_label.value);
+  return index === -1 ? coloring_style_key.value : coloring_styles.value.values[index];
 });
 
+watch(
+  [
+    coloring_style_label,
+    vertex_attribute_name,
+    edge_attribute_name,
+    cell_attribute_name,
+    polygon_attribute_name,
+    polyhedron_attribute_name,
+  ],
+  () => {
+    const key = active_key.value;
+    const names = {
+      vertex: vertex_attribute_name.value,
+      edge: edge_attribute_name.value,
+      cell: cell_attribute_name.value,
+      polygon: polygon_attribute_name.value,
+      polyhedron: polyhedron_attribute_name.value,
+    };
+    if (!(key in names) || names[key]) {
+      coloring_style_key.value = key;
+    }
+  },
+);
+
 watch(
   coloring_style_key,
   (value) => {
@@ -173,7 +195,7 @@ watch(
         data-testid="coloringStyleSelector"
         v-model="coloring_style_label"
         :items="coloring_styles.labels"
-        label="Select a coloring style"
+        label="Select coloring style"
         density="compact"
         hide-details
       />
@@ -181,13 +203,13 @@ watch(
   </v-row>
   <v-row class="mt-3 px-2" no-gutters>
     <v-col cols="12" class="ps-7 pe-1">
-      <template v-if="coloring_style_key === color_dict['value']">
+      <template v-if="active_key === color_dict['value']">
         <ViewerOptionsColorPicker v-model="color" />
       </template>
-      <template v-if="coloring_style_key === textures_dict['value']">
+      <template v-if="active_key === textures_dict['value']">
         <ViewerOptionsTexturesSelector v-model="textures" :id="id" />
       </template>
-      <template v-if="coloring_style_key === vertex_dict['value'] && hasColorMap('vertex')">
+      <template v-if="active_key === vertex_dict['value'] && hasColorMap('vertex')">
         <ViewerOptionsAttributeSelector
           v-model:name="vertex_attribute_name"
           v-model:range="vertex_attribute_range"
@@ -197,7 +219,7 @@ watch(
           :schema="vertexSchema"
         />
       </template>
-      <template v-if="coloring_style_key === edge_dict['value'] && hasColorMap('edge')">
+      <template v-if="active_key === edge_dict['value'] && hasColorMap('edge')">
         <ViewerOptionsAttributeSelector
           v-model:name="edge_attribute_name"
           v-model:range="edge_attribute_range"
@@ -207,7 +229,7 @@ watch(
           :schema="edgeSchema"
         />
       </template>
-      <template v-if="coloring_style_key === cell_dict['value'] && hasColorMap('cell')">
+      <template v-if="active_key === cell_dict['value'] && hasColorMap('cell')">
         <ViewerOptionsAttributeSelector
           v-model:name="cell_attribute_name"
           v-model:range="cell_attribute_range"
@@ -217,7 +239,7 @@ watch(
           :schema="cellSchema"
         />
       </template>
-      <template v-if="coloring_style_key === polygon_dict['value'] && hasColorMap('polygon')">
+      <template v-if="active_key === polygon_dict['value'] && hasColorMap('polygon')">
         <ViewerOptionsAttributeSelector
           v-model:name="polygon_attribute_name"
           v-model:range="polygon_attribute_range"
@@ -227,7 +249,7 @@ watch(
           :schema="polygonSchema"
         />
       </template>
-      <template v-if="coloring_style_key === polyhedron_dict['value'] && hasColorMap('polyhedron')">
+      <template v-if="active_key === polyhedron_dict['value'] && hasColorMap('polyhedron')">
         <ViewerOptionsAttributeSelector
           v-model:name="polyhedron_attribute_name"
           v-model:range="polyhedron_attribute_range"
diff --git a/app/utils/default_styles/constants.js b/app/utils/default_styles/constants.js
index 24751db8..e4822b39 100644
--- a/app/utils/default_styles/constants.js
+++ b/app/utils/default_styles/constants.js
@@ -1,4 +1,5 @@
 // Mesh
+const MESH_DEFAULT_ACTIVE_COLORING = "constant";
 const POINTS_DEFAULT_VISIBILITY = true;
 const POINTS_DEFAULT_SIZE = 10;
 const POINTS_DEFAULT_COLOR = { red: 20, green: 20, blue: 20, alpha: 1 };
@@ -13,14 +14,21 @@ const POLYHEDRA_DEFAULT_VISIBILITY = true;
 const POLYHEDRA_DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1 };
 
 // Model
+const MODEL_DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1 };
+const MODEL_DEFAULT_ACTIVE_COLORING = "constant";
+
 const CORNERS_DEFAULT_VISIBILITY = true;
 const CORNERS_DEFAULT_COLOR = { red: 20, green: 20, blue: 20, alpha: 1 };
+const CORNERS_DEFAULT_ACTIVE_COLORING = "constant";
 const LINES_DEFAULT_VISIBILITY = true;
 const LINES_DEFAULT_COLOR = { red: 20, green: 20, blue: 20, alpha: 1 };
+const LINES_DEFAULT_ACTIVE_COLORING = "constant";
 const SURFACES_DEFAULT_VISIBILITY = true;
 const SURFACES_DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1 };
+const SURFACES_DEFAULT_ACTIVE_COLORING = "constant";
 const BLOCKS_DEFAULT_VISIBILITY = true;
 const BLOCKS_DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1 };
+const BLOCKS_DEFAULT_ACTIVE_COLORING = "constant";
 
 const MESH_COMPONENT_TYPES = ["Corner", "Line", "Surface", "Block"];
 
@@ -46,12 +54,19 @@ export {
   POLYHEDRA_DEFAULT_COLOR,
   CORNERS_DEFAULT_VISIBILITY,
   CORNERS_DEFAULT_COLOR,
+  CORNERS_DEFAULT_ACTIVE_COLORING,
   LINES_DEFAULT_VISIBILITY,
   LINES_DEFAULT_COLOR,
+  LINES_DEFAULT_ACTIVE_COLORING,
   SURFACES_DEFAULT_VISIBILITY,
   SURFACES_DEFAULT_COLOR,
+  SURFACES_DEFAULT_ACTIVE_COLORING,
   BLOCKS_DEFAULT_VISIBILITY,
   BLOCKS_DEFAULT_COLOR,
+  BLOCKS_DEFAULT_ACTIVE_COLORING,
   MESH_COMPONENT_TYPES,
   DEFAULT_MODEL_COMPONENT_TYPE_COLORS,
+  MODEL_DEFAULT_COLOR,
+  MESH_DEFAULT_ACTIVE_COLORING,
+  MODEL_DEFAULT_ACTIVE_COLORING,
 };
diff --git a/app/utils/default_styles/index.js b/app/utils/default_styles/index.js
index 13b3a9e7..4a455d42 100644
--- a/app/utils/default_styles/index.js
+++ b/app/utils/default_styles/index.js
@@ -50,5 +50,10 @@ function getDefaultStyle(type) {
 }
 
 export { DEFAULT_MODEL_COMPONENT_TYPE_STYLES } from "./models";
-export { MESH_COMPONENT_TYPES, DEFAULT_MODEL_COMPONENT_TYPE_COLORS } from "./constants";
+export {
+  MESH_COMPONENT_TYPES,
+  DEFAULT_MODEL_COMPONENT_TYPE_COLORS,
+  MODEL_DEFAULT_COLOR,
+  MODEL_DEFAULT_ACTIVE_COLORING,
+} from "./constants";
 export { getDefaultStyle };
diff --git a/app/utils/default_styles/meshes.js b/app/utils/default_styles/meshes.js
index c6b697fb..75887030 100644
--- a/app/utils/default_styles/meshes.js
+++ b/app/utils/default_styles/meshes.js
@@ -4,6 +4,7 @@ import {
   EDGES_DEFAULT_COLOR,
   EDGES_DEFAULT_VISIBILITY,
   EDGES_DEFAULT_WIDTH,
+  MESH_DEFAULT_ACTIVE_COLORING,
   POINTS_DEFAULT_COLOR,
   POINTS_DEFAULT_SIZE,
   POINTS_DEFAULT_VISIBILITY,
@@ -16,13 +17,13 @@ import {
 function meshPointsDefaultStyle(
   visibility = POINTS_DEFAULT_VISIBILITY,
   size = POINTS_DEFAULT_SIZE,
-  color = POINTS_DEFAULT_COLOR,
+  constant = POINTS_DEFAULT_COLOR,
 ) {
   return {
     visibility,
     coloring: {
-      active: "color",
-      color,
+      active: MESH_DEFAULT_ACTIVE_COLORING,
+      constant,
       vertex: {
         name: undefined,
         storedConfigs: {},
@@ -35,13 +36,13 @@ function meshPointsDefaultStyle(
 function meshEdgesDefaultStyle(
   visibility = EDGES_DEFAULT_VISIBILITY,
   width = EDGES_DEFAULT_WIDTH,
-  color = EDGES_DEFAULT_COLOR,
+  constant = EDGES_DEFAULT_COLOR,
 ) {
   return {
     visibility,
     coloring: {
-      active: "color",
-      color,
+      active: MESH_DEFAULT_ACTIVE_COLORING,
+      constant,
       edge: {
         name: undefined,
         storedConfigs: {},
@@ -55,16 +56,19 @@ function meshEdgesDefaultStyle(
   };
 }
 
-function meshCellsDefaultStyle(visibility = CELLS_DEFAULT_VISIBILITY, color = CELLS_DEFAULT_COLOR) {
+function meshCellsDefaultStyle(
+  visibility = CELLS_DEFAULT_VISIBILITY,
+  constant = CELLS_DEFAULT_COLOR,
+) {
   return {
     visibility,
     coloring: {
-      active: "color",
+      active: MESH_DEFAULT_ACTIVE_COLORING,
       cell: {
         name: undefined,
         storedConfigs: {},
       },
-      color,
+      constant,
       textures: undefined,
       vertex: {
         name: undefined,
@@ -76,13 +80,13 @@ function meshCellsDefaultStyle(visibility = CELLS_DEFAULT_VISIBILITY, color = CE
 
 function meshPolygonsDefaultStyle(
   visibility = POLYGONS_DEFAULT_VISIBILITY,
-  color = POLYGONS_DEFAULT_COLOR,
+  constant = POLYGONS_DEFAULT_COLOR,
 ) {
   return {
     visibility,
     coloring: {
-      active: "color",
-      color,
+      active: MESH_DEFAULT_ACTIVE_COLORING,
+      constant,
       textures: undefined,
       polygon: {
         name: undefined,
@@ -98,13 +102,13 @@ function meshPolygonsDefaultStyle(
 
 function meshPolyhedraDefaultStyle(
   visibility = POLYHEDRA_DEFAULT_VISIBILITY,
-  color = POLYHEDRA_DEFAULT_COLOR,
+  constant = POLYHEDRA_DEFAULT_COLOR,
 ) {
   return {
     visibility,
     coloring: {
-      active: "color",
-      color,
+      active: MESH_DEFAULT_ACTIVE_COLORING,
+      constant,
       polyhedron: {
         name: undefined,
         storedConfigs: {},
diff --git a/app/utils/default_styles/models.js b/app/utils/default_styles/models.js
index 82ac5be8..69ba74e5 100644
--- a/app/utils/default_styles/models.js
+++ b/app/utils/default_styles/models.js
@@ -1,86 +1,100 @@
 import {
+  BLOCKS_DEFAULT_ACTIVE_COLORING,
   BLOCKS_DEFAULT_COLOR,
   BLOCKS_DEFAULT_VISIBILITY,
+  CORNERS_DEFAULT_ACTIVE_COLORING,
   CORNERS_DEFAULT_COLOR,
   CORNERS_DEFAULT_VISIBILITY,
   EDGES_DEFAULT_VISIBILITY,
   EDGES_DEFAULT_WIDTH,
+  LINES_DEFAULT_ACTIVE_COLORING,
   LINES_DEFAULT_COLOR,
   LINES_DEFAULT_VISIBILITY,
+  MODEL_DEFAULT_ACTIVE_COLORING,
+  MODEL_DEFAULT_COLOR,
   POINTS_DEFAULT_SIZE,
   POINTS_DEFAULT_VISIBILITY,
+  SURFACES_DEFAULT_ACTIVE_COLORING,
   SURFACES_DEFAULT_COLOR,
   SURFACES_DEFAULT_VISIBILITY,
 } from "./constants";
 
 function modelCornersDefaultStyle(
   visibility = CORNERS_DEFAULT_VISIBILITY,
-  color = CORNERS_DEFAULT_COLOR,
+  constant = CORNERS_DEFAULT_COLOR,
 ) {
   return {
     visibility,
-    color,
-    color_mode: "constant",
-    vertex_attribute: {
-      name: undefined,
-      storedConfigs: {},
+    coloring: {
+      active: CORNERS_DEFAULT_ACTIVE_COLORING,
+      constant,
+      vertex: {
+        name: undefined,
+        storedConfigs: {},
+      },
     },
   };
 }
 
 function modelLinesDefaultStyle(
   visibility = LINES_DEFAULT_VISIBILITY,
-  color = LINES_DEFAULT_COLOR,
+  constant = LINES_DEFAULT_COLOR,
 ) {
   return {
     visibility,
-    color,
-    color_mode: "constant",
-    vertex_attribute: {
-      name: undefined,
-      storedConfigs: {},
-    },
-    edge_attribute: {
-      name: undefined,
-      storedConfigs: {},
+    coloring: {
+      active: LINES_DEFAULT_ACTIVE_COLORING,
+      constant,
+      vertex: {
+        name: undefined,
+        storedConfigs: {},
+      },
+      edge: {
+        name: undefined,
+        storedConfigs: {},
+      },
     },
   };
 }
 
 function modelSurfacesDefaultStyle(
   visibility = SURFACES_DEFAULT_VISIBILITY,
-  color = SURFACES_DEFAULT_COLOR,
+  constant = SURFACES_DEFAULT_COLOR,
 ) {
   return {
     visibility,
-    color,
-    color_mode: "constant",
-    vertex_attribute: {
-      name: undefined,
-      storedConfigs: {},
-    },
-    polygon_attribute: {
-      name: undefined,
-      storedConfigs: {},
+    coloring: {
+      active: SURFACES_DEFAULT_ACTIVE_COLORING,
+      constant,
+      vertex: {
+        name: undefined,
+        storedConfigs: {},
+      },
+      polygon: {
+        name: undefined,
+        storedConfigs: {},
+      },
     },
   };
 }
 
 function modelBlocksDefaultStyle(
   visibility = BLOCKS_DEFAULT_VISIBILITY,
-  color = BLOCKS_DEFAULT_COLOR,
+  constant = BLOCKS_DEFAULT_COLOR,
 ) {
   return {
     visibility,
-    color,
-    color_mode: "constant",
-    vertex_attribute: {
-      name: undefined,
-      storedConfigs: {},
-    },
-    polyhedron_attribute: {
-      name: undefined,
-      storedConfigs: {},
+    coloring: {
+      active: BLOCKS_DEFAULT_ACTIVE_COLORING,
+      constant,
+      vertex: {
+        name: undefined,
+        storedConfigs: {},
+      },
+      polyhedron: {
+        name: undefined,
+        storedConfigs: {},
+      },
     },
   };
 }
@@ -109,6 +123,10 @@ const DEFAULT_MODEL_COMPONENT_TYPE_STYLES = {
 function brepDefaultStyle() {
   return {
     visibility: true,
+    coloring: {
+      active: MODEL_DEFAULT_ACTIVE_COLORING,
+      constant: MODEL_DEFAULT_COLOR,
+    },
     corners: modelCornersDefaultStyle(),
     lines: modelLinesDefaultStyle(),
     surfaces: modelSurfacesDefaultStyle(),
@@ -121,6 +139,10 @@ function brepDefaultStyle() {
 function crossSectionDefaultStyle() {
   return {
     visibility: true,
+    coloring: {
+      active: MODEL_DEFAULT_ACTIVE_COLORING,
+      constant: MODEL_DEFAULT_COLOR,
+    },
     corners: modelCornersDefaultStyle(),
     lines: modelLinesDefaultStyle(),
     surfaces: modelSurfacesDefaultStyle(),
@@ -132,6 +154,10 @@ function crossSectionDefaultStyle() {
 function structuralModelDefaultStyle() {
   return {
     visibility: true,
+    coloring: {
+      active: MODEL_DEFAULT_ACTIVE_COLORING,
+      constant: MODEL_DEFAULT_COLOR,
+    },
     corners: modelCornersDefaultStyle(),
     lines: modelLinesDefaultStyle(),
     surfaces: modelSurfacesDefaultStyle(),
@@ -144,6 +170,10 @@ function structuralModelDefaultStyle() {
 function sectionDefaultStyle() {
   return {
     visibility: true,
+    coloring: {
+      active: MODEL_DEFAULT_ACTIVE_COLORING,
+      constant: MODEL_DEFAULT_COLOR,
+    },
     corners: modelCornersDefaultStyle(),
     lines: modelLinesDefaultStyle(),
     surfaces: modelSurfacesDefaultStyle(),
@@ -155,6 +185,10 @@ function sectionDefaultStyle() {
 function implicitCrossSectionDefaultStyle() {
   return {
     visibility: true,
+    coloring: {
+      active: MODEL_DEFAULT_ACTIVE_COLORING,
+      constant: MODEL_DEFAULT_COLOR,
+    },
     corners: modelCornersDefaultStyle(),
     lines: modelLinesDefaultStyle(),
     surfaces: modelSurfacesDefaultStyle(),
@@ -166,6 +200,10 @@ function implicitCrossSectionDefaultStyle() {
 function implicitStructuralModelDefaultStyle() {
   return {
     visibility: true,
+    coloring: {
+      active: MODEL_DEFAULT_ACTIVE_COLORING,
+      constant: MODEL_DEFAULT_COLOR,
+    },
     corners: modelCornersDefaultStyle(),
     lines: modelLinesDefaultStyle(),
     surfaces: modelSurfacesDefaultStyle(),
diff --git a/internal/stores/data_style/mesh/cells/color.js b/internal/stores/data_style/mesh/cells/color.js
index 21cf41b2..bea09a3f 100644
--- a/internal/stores/data_style/mesh/cells/color.js
+++ b/internal/stores/data_style/mesh/cells/color.js
@@ -13,7 +13,7 @@ export function useMeshCellsColorStyle() {
   const meshCellsCommonStyle = useMeshCellsCommonStyle();
 
   function meshCellsColor(id) {
-    return meshCellsCommonStyle.meshCellsColoring(id).color;
+    return meshCellsCommonStyle.meshCellsColoring(id).constant;
   }
   function setMeshCellsColor(id, color) {
     const params = { id, color };
@@ -25,7 +25,7 @@ export function useMeshCellsColorStyle() {
       {
         response_function: () =>
           meshCellsCommonStyle.mutateMeshCellsColoring(id, {
-            color,
+            constant: color,
           }),
       },
     );
diff --git a/internal/stores/data_style/mesh/cells/index.js b/internal/stores/data_style/mesh/cells/index.js
index 17f961b9..6630cf96 100644
--- a/internal/stores/data_style/mesh/cells/index.js
+++ b/internal/stores/data_style/mesh/cells/index.js
@@ -31,28 +31,19 @@ export function useMeshCellsStyle() {
       coloring: { active: type },
     });
     console.log(setMeshCellsActiveColoring.name, { id }, type);
-    if (type === "color") {
+    if (type === "constant") {
       return meshCellsColorStyle.setMeshCellsColor(id, meshCellsColorStyle.meshCellsColor(id));
     }
     if (type === "textures") {
       const textures = meshCellsTexturesStore.meshCellsTextures(id);
-      if (textures === undefined) {
-        return;
-      }
       return meshCellsTexturesStore.setMeshCellsTextures(id, textures);
     }
     if (type === "vertex") {
       const name = meshCellsVertexAttributeStyle.meshCellsVertexAttributeName(id);
-      if (name === undefined) {
-        return;
-      }
       return meshCellsVertexAttributeStyle.setMeshCellsVertexAttributeName(id, name);
     }
     if (type === "cell") {
       const name = meshCellsCellAttributeStyle.meshCellsCellAttributeName(id);
-      if (name === undefined) {
-        return;
-      }
       return meshCellsCellAttributeStyle.setMeshCellsCellAttributeName(id, name);
     }
     throw new Error(`Unknown mesh cells coloring type: ${type}`);
diff --git a/internal/stores/data_style/mesh/edges/color.js b/internal/stores/data_style/mesh/edges/color.js
index 3b560d0e..99b80380 100644
--- a/internal/stores/data_style/mesh/edges/color.js
+++ b/internal/stores/data_style/mesh/edges/color.js
@@ -13,7 +13,7 @@ export function useMeshEdgesColorStyle() {
   const meshEdgesCommonStyle = useMeshEdgesCommonStyle();
 
   function meshEdgesColor(id) {
-    return meshEdgesCommonStyle.meshEdgesColoring(id).color;
+    return meshEdgesCommonStyle.meshEdgesColoring(id).constant;
   }
   function setMeshEdgesColor(id, color) {
     const params = { id, color };
@@ -25,7 +25,7 @@ export function useMeshEdgesColorStyle() {
       {
         response_function: () =>
           meshEdgesCommonStyle.mutateMeshEdgesColoring(id, {
-            color,
+            constant: color,
           }),
       },
     );
diff --git a/internal/stores/data_style/mesh/edges/index.js b/internal/stores/data_style/mesh/edges/index.js
index be3cc81a..969dc769 100644
--- a/internal/stores/data_style/mesh/edges/index.js
+++ b/internal/stores/data_style/mesh/edges/index.js
@@ -30,21 +30,15 @@ export function useMeshEdgesStyle() {
     await meshEdgesCommonStyle.mutateMeshEdgesStyle(id, {
       coloring: { active: type },
     });
-    if (type === "color") {
+    if (type === "constant") {
       return meshEdgesColorStyle.setMeshEdgesColor(id, meshEdgesColorStyle.meshEdgesColor(id));
     }
     if (type === "vertex") {
       const name = meshEdgesVertexAttributeStyle.meshEdgesVertexAttributeName(id);
-      if (name === undefined) {
-        return;
-      }
       return meshEdgesVertexAttributeStyle.setMeshEdgesVertexAttributeName(id, name);
     }
     if (type === "edge") {
       const name = meshEdgesEdgeAttributeStyle.meshEdgesEdgeAttributeName(id);
-      if (name === undefined) {
-        return;
-      }
       return meshEdgesEdgeAttributeStyle.setMeshEdgesEdgeAttributeName(id, name);
     }
     throw new Error(`Unknown mesh edges coloring type: ${type}`);
diff --git a/internal/stores/data_style/mesh/points/color.js b/internal/stores/data_style/mesh/points/color.js
index 5efa8473..6c7fc360 100644
--- a/internal/stores/data_style/mesh/points/color.js
+++ b/internal/stores/data_style/mesh/points/color.js
@@ -13,7 +13,7 @@ export function useMeshPointsColorStyle() {
   const meshPointsCommonStyle = useMeshPointsCommonStyle();
 
   function meshPointsColor(id) {
-    return meshPointsCommonStyle.meshPointsColoring(id).color;
+    return meshPointsCommonStyle.meshPointsColoring(id).constant;
   }
   function setMeshPointsColor(id, color) {
     const params = { id, color };
@@ -25,7 +25,7 @@ export function useMeshPointsColorStyle() {
       {
         response_function: () =>
           meshPointsCommonStyle.mutateMeshPointsColoring(id, {
-            color,
+            constant: color,
           }),
       },
     );
diff --git a/internal/stores/data_style/mesh/points/index.js b/internal/stores/data_style/mesh/points/index.js
index c5c1ad5d..11e0bdc8 100644
--- a/internal/stores/data_style/mesh/points/index.js
+++ b/internal/stores/data_style/mesh/points/index.js
@@ -26,13 +26,10 @@ function useMeshPointsColoringStyle() {
     await meshPointsCommonStyle.mutateMeshPointsStyle(id, {
       coloring: { active: type },
     });
-    if (type === "color") {
+    if (type === "constant") {
       return meshPointsColorStyle.setMeshPointsColor(id, meshPointsColorStyle.meshPointsColor(id));
     } else if (type === "vertex") {
       const name = meshPointsVertexAttributeStyle.meshPointsVertexAttributeName(id);
-      if (name === undefined) {
-        return;
-      }
       return meshPointsVertexAttributeStyle.setMeshPointsVertexAttributeName(id, name);
     }
     throw new Error(`Unknown mesh points coloring type: ${type}`);
diff --git a/internal/stores/data_style/mesh/polygons/color.js b/internal/stores/data_style/mesh/polygons/color.js
index 9d437523..a3102c9c 100644
--- a/internal/stores/data_style/mesh/polygons/color.js
+++ b/internal/stores/data_style/mesh/polygons/color.js
@@ -13,7 +13,7 @@ export function useMeshPolygonsColorStyle() {
   const meshPolygonsCommonStyle = useMeshPolygonsCommonStyle();
 
   function meshPolygonsColor(id) {
-    return meshPolygonsCommonStyle.meshPolygonsColoring(id).color;
+    return meshPolygonsCommonStyle.meshPolygonsColoring(id).constant;
   }
   function setMeshPolygonsColor(id, color) {
     const params = { id, color };
@@ -25,7 +25,7 @@ export function useMeshPolygonsColorStyle() {
       {
         response_function: () =>
           meshPolygonsCommonStyle.mutateMeshPolygonsColoring(id, {
-            color,
+            constant: color,
           }),
       },
     );
diff --git a/internal/stores/data_style/mesh/polygons/index.js b/internal/stores/data_style/mesh/polygons/index.js
index bd5572ee..1a81c52b 100644
--- a/internal/stores/data_style/mesh/polygons/index.js
+++ b/internal/stores/data_style/mesh/polygons/index.js
@@ -29,28 +29,19 @@ function useMeshPolygonsColoringStyle() {
     await meshPolygonsCommonStyle.mutateMeshPolygonsStyle(id, {
       coloring: { active: type },
     });
-    if (type === "color") {
+    if (type === "constant") {
       return meshPolygonsColorStyle.setMeshPolygonsColor(
         id,
         meshPolygonsColorStyle.meshPolygonsColor(id),
       );
     } else if (type === "textures") {
       const textures = meshPolygonsTexturesStyle.meshPolygonsTextures(id);
-      if (textures === undefined) {
-        return;
-      }
       return meshPolygonsTexturesStyle.setMeshPolygonsTextures(id, textures);
     } else if (type === "vertex") {
       const name = meshPolygonsVertexAttributeStyle.meshPolygonsVertexAttributeName(id);
-      if (name === undefined) {
-        return;
-      }
       return meshPolygonsVertexAttributeStyle.setMeshPolygonsVertexAttributeName(id, name);
     } else if (type === "polygon") {
       const name = meshPolygonsPolygonAttributeStyle.meshPolygonsPolygonAttributeName(id);
-      if (name === undefined) {
-        return;
-      }
       return meshPolygonsPolygonAttributeStyle.setMeshPolygonsPolygonAttributeName(id, name);
     }
     throw new Error(`Unknown mesh polygons coloring type: ${type}`);
diff --git a/internal/stores/data_style/mesh/polyhedra/color.js b/internal/stores/data_style/mesh/polyhedra/color.js
index 3141a100..cc3a0d3f 100644
--- a/internal/stores/data_style/mesh/polyhedra/color.js
+++ b/internal/stores/data_style/mesh/polyhedra/color.js
@@ -13,7 +13,7 @@ export function useMeshPolyhedraColorStyle() {
   const meshPolyhedraCommonStyle = useMeshPolyhedraCommonStyle();
 
   function meshPolyhedraColor(id) {
-    return meshPolyhedraCommonStyle.meshPolyhedraColoring(id).color;
+    return meshPolyhedraCommonStyle.meshPolyhedraColoring(id).constant;
   }
   function setMeshPolyhedraColor(id, color) {
     const params = { id, color };
@@ -25,7 +25,7 @@ export function useMeshPolyhedraColorStyle() {
       {
         response_function: () =>
           meshPolyhedraCommonStyle.mutateMeshPolyhedraColoring(id, {
-            color,
+            constant: color,
           }),
       },
     );
diff --git a/internal/stores/data_style/mesh/polyhedra/index.js b/internal/stores/data_style/mesh/polyhedra/index.js
index a0ba78ee..e3c0d258 100644
--- a/internal/stores/data_style/mesh/polyhedra/index.js
+++ b/internal/stores/data_style/mesh/polyhedra/index.js
@@ -30,7 +30,7 @@ export function useMeshPolyhedraStyle() {
       coloring: { active: type },
     });
     console.log(setMeshPolyhedraActiveColoring.name, { id }, type);
-    if (type === "color") {
+    if (type === "constant") {
       return meshPolyhedraColorStyle.setMeshPolyhedraColor(
         id,
         meshPolyhedraColorStyle.meshPolyhedraColor(id),
@@ -38,16 +38,10 @@ export function useMeshPolyhedraStyle() {
     }
     if (type === "vertex") {
       const name = meshPolyhedraVertexAttributeStyle.meshPolyhedraVertexAttributeName(id);
-      if (name === undefined) {
-        return;
-      }
       return meshPolyhedraVertexAttributeStyle.setMeshPolyhedraVertexAttributeName(id, name);
     }
     if (type === "polyhedron") {
       const name = meshPolyhedraPolyhedronAttributeStyle.meshPolyhedraPolyhedronAttributeName(id);
-      if (name === undefined) {
-        return;
-      }
       return meshPolyhedraPolyhedronAttributeStyle.setMeshPolyhedraPolyhedronAttributeName(
         id,
         name,
diff --git a/internal/stores/data_style/model/blocks/color.js b/internal/stores/data_style/model/blocks/color.js
index 2710df04..4aecb0e2 100644
--- a/internal/stores/data_style/model/blocks/color.js
+++ b/internal/stores/data_style/model/blocks/color.js
@@ -1,4 +1,6 @@
 import { useModelBlocksCommonStyle } from "./common";
+import { useModelBlocksPolyhedronAttribute } from "./polyhedron";
+import { useModelBlocksVertexAttribute } from "./vertex";
 import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
@@ -7,19 +9,96 @@ const schema = viewer_schemas.opengeodeweb_viewer.model.blocks.color;
 export function useModelBlocksColor() {
   const modelCommonStyle = useModelCommonStyle();
   const modelBlocksCommonStyle = useModelBlocksCommonStyle();
+  const modelBlocksVertexAttribute = useModelBlocksVertexAttribute();
+  const modelBlocksPolyhedronAttribute = useModelBlocksPolyhedronAttribute();
+
+  function modelBlockColoring(id, block_id) {
+    return modelBlocksCommonStyle.modelBlockStyle(id, block_id).coloring;
+  }
 
   function modelBlockColor(id, block_id) {
-    return modelBlocksCommonStyle.modelBlockStyle(id, block_id).color;
+    return modelBlockColoring(id, block_id).constant;
   }
 
-  function setModelBlocksColor(modelId, blocks_ids, color, color_mode = "constant") {
-    return modelCommonStyle.setModelTypeColor(modelId, blocks_ids, color, schema, color_mode);
+  function setModelBlocksColor(modelId, blocks_ids, color, activeColoring = "constant") {
+    return modelCommonStyle.setModelTypeColor(modelId, blocks_ids, color, schema, activeColoring);
   }
 
-  function modelBlockColorMode(id, block_id) {
-    const mode = modelBlocksCommonStyle.modelBlockStyle(id, block_id).color_mode || "constant";
-    return mode === "constant" ? "color" : mode;
+  function modelBlockActiveColoring(id, block_id) {
+    return modelBlockColoring(id, block_id).active;
+  }
+
+  async function setModelBlocksActiveColoring(modelId, blocks_ids, activeColoring) {
+    await modelCommonStyle.mutateComponentStyles(modelId, blocks_ids, {
+      coloring: { active: activeColoring },
+    });
+    if (activeColoring === "constant" || activeColoring === "random") {
+      const color = modelBlockColor(modelId, blocks_ids[0]);
+      return setModelBlocksColor(modelId, blocks_ids, color, activeColoring);
+    }
+
+    if (activeColoring === "vertex") {
+      const name = modelBlocksVertexAttribute.modelBlocksVertexAttributeName(
+        modelId,
+        blocks_ids[0],
+      );
+      await modelBlocksVertexAttribute.setModelBlocksVertexAttributeName(modelId, blocks_ids, name);
+      const [min, max] = modelBlocksVertexAttribute.modelBlocksVertexAttributeRange(
+        modelId,
+        blocks_ids[0],
+      );
+      await modelBlocksVertexAttribute.setModelBlocksVertexAttributeRange(
+        modelId,
+        blocks_ids,
+        min,
+        max,
+      );
+      const colorMap = modelBlocksVertexAttribute.modelBlocksVertexAttributeColorMap(
+        modelId,
+        blocks_ids[0],
+      );
+      await modelBlocksVertexAttribute.setModelBlocksVertexAttributeColorMap(
+        modelId,
+        blocks_ids,
+        colorMap,
+      );
+    } else if (activeColoring === "polyhedron") {
+      const name = modelBlocksPolyhedronAttribute.modelBlocksPolyhedronAttributeName(
+        modelId,
+        blocks_ids[0],
+      );
+      await modelBlocksPolyhedronAttribute.setModelBlocksPolyhedronAttributeName(
+        modelId,
+        blocks_ids,
+        name,
+      );
+      const [min, max] = modelBlocksPolyhedronAttribute.modelBlocksPolyhedronAttributeRange(
+        modelId,
+        blocks_ids[0],
+      );
+      await modelBlocksPolyhedronAttribute.setModelBlocksPolyhedronAttributeRange(
+        modelId,
+        blocks_ids,
+        min,
+        max,
+      );
+      const colorMap = modelBlocksPolyhedronAttribute.modelBlocksPolyhedronAttributeColorMap(
+        modelId,
+        blocks_ids[0],
+      );
+      await modelBlocksPolyhedronAttribute.setModelBlocksPolyhedronAttributeColorMap(
+        modelId,
+        blocks_ids,
+        colorMap,
+      );
+    }
   }
 
-  return { setModelBlocksColor, modelBlockColor, modelBlockColorMode };
+  return {
+    setModelBlocksColor,
+    modelBlockColoring,
+    modelBlockColor,
+    modelBlockActiveColoring,
+    setModelBlocksActiveColoring,
+  };
 }
diff --git a/internal/stores/data_style/model/blocks/common.js b/internal/stores/data_style/model/blocks/common.js
index c297f837..1a655516 100644
--- a/internal/stores/data_style/model/blocks/common.js
+++ b/internal/stores/data_style/model/blocks/common.js
@@ -16,18 +16,27 @@ export function useModelBlocksCommonStyle() {
     return merge({}, groupStyle, individualStyle);
   }
 
-  function mutateModelBlocksStyle(id, blocks_ids, values) {
-    return modelCommonStyle.mutateComponentStyles(id, blocks_ids, values);
+  function modelBlockColoring(id, block_id) {
+    return modelBlockStyle(id, block_id).coloring;
   }
 
-  function mutateModelBlockStyle(id, block_id, values) {
-    return modelCommonStyle.mutateComponentStyle(id, block_id, values);
+  function mutateModelBlocksColoring(id, blocks_ids, values) {
+    return modelCommonStyle.mutateComponentStyles(id, blocks_ids, {
+      coloring: values,
+    });
+  }
+
+  function mutateModelBlockColoring(id, block_id, values) {
+    return modelCommonStyle.mutateComponentStyle(id, block_id, {
+      coloring: values,
+    });
   }
 
   return {
     modelBlocksStyle,
     modelBlockStyle,
-    mutateModelBlocksStyle,
-    mutateModelBlockStyle,
+    modelBlockColoring,
+    mutateModelBlocksColoring,
+    mutateModelBlockColoring,
   };
 }
diff --git a/internal/stores/data_style/model/blocks/index.js b/internal/stores/data_style/model/blocks/index.js
index 81a44b81..e30c7bd8 100644
--- a/internal/stores/data_style/model/blocks/index.js
+++ b/internal/stores/data_style/model/blocks/index.js
@@ -36,34 +36,36 @@ export function useModelBlocksStyle() {
       }
       visibilityGroups[visibility].push(block_id);
 
-      const color_mode = style.color_mode || "constant";
-      if (color_mode === "constant" || color_mode === "random") {
-        const color_key = color_mode === "random" ? "random" : JSON.stringify(style.color);
+      const coloring = modelColorStyle.modelBlockColoring(modelId, block_id);
+      const activeColoring = modelColorStyle.modelBlockActiveColoring(modelId, block_id);
+      if (activeColoring === "constant") {
+        const color = modelColorStyle.modelBlockColor(modelId, block_id);
+        const color_key = JSON.stringify(color);
         if (!colorGroups[color_key]) {
-          colorGroups[color_key] = { color_mode, color: style.color, blocks_ids: [] };
+          colorGroups[color_key] = { activeColoring, color, blocks_ids: [] };
         }
         colorGroups[color_key].blocks_ids.push(block_id);
+      } else if (activeColoring === "random") {
+        if (!colorGroups["random"]) {
+          colorGroups["random"] = { activeColoring, color: undefined, blocks_ids: [] };
+        }
+        colorGroups["random"].blocks_ids.push(block_id);
       } else {
-        const attributeTypeKey = `${color_mode}_attribute`;
-        const attributeStyle = style[attributeTypeKey] || {};
+        const attributeStyle = coloring[activeColoring];
         const { name } = attributeStyle;
-        if (name) {
-          const storedConfig =
-            (attributeStyle.storedConfigs && attributeStyle.storedConfigs[name]) || {};
-          const { minimum, maximum, colorMap } = storedConfig;
-          const attributeGroupKey = `${color_mode}_${name}_${colorMap}_${minimum}_${maximum}`;
-          if (!attributeGroups[attributeGroupKey]) {
-            attributeGroups[attributeGroupKey] = {
-              color_mode,
-              name,
-              minimum,
-              maximum,
-              colorMap,
-              blocks_ids: [],
-            };
-          }
-          attributeGroups[attributeGroupKey].blocks_ids.push(block_id);
+        const { minimum, maximum, colorMap } = attributeStyle.storedConfigs[name];
+        const attributeGroupKey = `${activeColoring}_${name}_${colorMap}_${minimum}_${maximum}`;
+        if (!attributeGroups[attributeGroupKey]) {
+          attributeGroups[attributeGroupKey] = {
+            activeColoring,
+            name,
+            minimum,
+            maximum,
+            colorMap,
+            blocks_ids: [],
+          };
         }
+        attributeGroups[attributeGroupKey].blocks_ids.push(block_id);
       }
     }
 
@@ -71,12 +73,12 @@ export function useModelBlocksStyle() {
       ...Object.entries(visibilityGroups).map(([visibility, ids]) =>
         modelVisibilityStyle.setModelBlocksVisibility(modelId, ids, visibility === "true"),
       ),
-      ...Object.values(colorGroups).map(({ color_mode, color, blocks_ids: ids }) =>
-        modelColorStyle.setModelBlocksColor(modelId, ids, color, color_mode),
+      ...Object.values(colorGroups).map(({ activeColoring, color, blocks_ids: ids }) =>
+        modelColorStyle.setModelBlocksColor(modelId, ids, color, activeColoring),
       ),
       ...Object.values(attributeGroups).flatMap(
-        ({ color_mode, name, minimum, maximum, colorMap, blocks_ids: ids }) => {
-          const isVertex = color_mode === "vertex";
+        ({ activeColoring, name, minimum, maximum, colorMap, blocks_ids: ids }) => {
+          const isVertex = activeColoring === "vertex";
           const attributeStyle = isVertex
             ? modelBlocksVertexAttribute
             : modelBlocksPolyhedronAttribute;
diff --git a/internal/stores/data_style/model/blocks/polyhedron.js b/internal/stores/data_style/model/blocks/polyhedron.js
index 3b32b1d3..c13838eb 100644
--- a/internal/stores/data_style/model/blocks/polyhedron.js
+++ b/internal/stores/data_style/model/blocks/polyhedron.js
@@ -16,24 +16,24 @@ export function useModelBlocksPolyhedronAttribute() {
   const viewerStore = useViewerStore();
 
   function modelBlocksPolyhedronAttribute(modelId, blockId) {
-    return modelBlocksCommonStyle.modelBlockStyle(modelId, blockId).polyhedron_attribute;
+    return modelBlocksCommonStyle.modelBlockColoring(modelId, blockId).polyhedron;
   }
 
   function modelBlocksPolyhedronAttributeStoredConfig(modelId, blockId, name) {
     const { storedConfigs } = modelBlocksPolyhedronAttribute(modelId, blockId);
-    if (name && storedConfigs && name in storedConfigs) {
+    if (name in storedConfigs) {
       return storedConfigs[name];
     }
-    return {
+    return setModelBlocksPolyhedronAttributeStoredConfig(modelId, [blockId], name, {
       minimum: undefined,
       maximum: undefined,
       colorMap: undefined,
-    };
+    });
   }
 
   function mutateModelBlocksPolyhedronStyle(modelId, blockIds, values) {
-    return modelBlocksCommonStyle.mutateModelBlocksStyle(modelId, blockIds, {
-      polyhedron_attribute: values,
+    return modelBlocksCommonStyle.mutateModelBlocksColoring(modelId, blockIds, {
+      polyhedron: values,
     });
   }
 
@@ -51,24 +51,11 @@ export function useModelBlocksPolyhedronAttribute() {
 
   async function setModelBlocksPolyhedronAttributeName(modelId, blockIds, name) {
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, blockIds);
-
-    const updates = { name };
-    const polyhedron = modelBlocksPolyhedronAttribute(modelId, blockIds[0]);
-    if (!(name in polyhedron.storedConfigs)) {
-      updates.storedConfigs = {
-        [name]: {
-          minimum: undefined,
-          maximum: undefined,
-          colorMap: undefined,
-        },
-      };
-    }
-
     const params = { id: modelId, block_ids: viewer_ids, name };
     return viewerStore.request(
       { schema: schema.name, params },
       {
-        response_function: () => mutateModelBlocksPolyhedronStyle(modelId, blockIds, updates),
+        response_function: () => mutateModelBlocksPolyhedronStyle(modelId, blockIds, { name }),
       },
     );
   }
diff --git a/internal/stores/data_style/model/blocks/vertex.js b/internal/stores/data_style/model/blocks/vertex.js
index 9e756eb8..2e95386f 100644
--- a/internal/stores/data_style/model/blocks/vertex.js
+++ b/internal/stores/data_style/model/blocks/vertex.js
@@ -16,24 +16,24 @@ export function useModelBlocksVertexAttribute() {
   const viewerStore = useViewerStore();
 
   function modelBlocksVertexAttribute(modelId, blockId) {
-    return modelBlocksCommonStyle.modelBlockStyle(modelId, blockId).vertex_attribute;
+    return modelBlocksCommonStyle.modelBlockColoring(modelId, blockId).vertex;
   }
 
   function modelBlocksVertexAttributeStoredConfig(modelId, blockId, name) {
     const { storedConfigs } = modelBlocksVertexAttribute(modelId, blockId);
-    if (name && storedConfigs && name in storedConfigs) {
+    if (name in storedConfigs) {
       return storedConfigs[name];
     }
-    return {
+    return setModelBlocksVertexAttributeStoredConfig(modelId, [blockId], name, {
       minimum: undefined,
       maximum: undefined,
       colorMap: undefined,
-    };
+    });
   }
 
   function mutateModelBlocksVertexStyle(modelId, blockIds, values) {
-    return modelBlocksCommonStyle.mutateModelBlocksStyle(modelId, blockIds, {
-      vertex_attribute: values,
+    return modelBlocksCommonStyle.mutateModelBlocksColoring(modelId, blockIds, {
+      vertex: values,
     });
   }
 
@@ -51,24 +51,11 @@ export function useModelBlocksVertexAttribute() {
 
   async function setModelBlocksVertexAttributeName(modelId, blockIds, name) {
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, blockIds);
-
-    const updates = { name };
-    const vertex = modelBlocksVertexAttribute(modelId, blockIds[0]);
-    if (!(name in vertex.storedConfigs)) {
-      updates.storedConfigs = {
-        [name]: {
-          minimum: undefined,
-          maximum: undefined,
-          colorMap: undefined,
-        },
-      };
-    }
-
     const params = { id: modelId, block_ids: viewer_ids, name };
     return viewerStore.request(
       { schema: schema.name, params },
       {
-        response_function: () => mutateModelBlocksVertexStyle(modelId, blockIds, updates),
+        response_function: () => mutateModelBlocksVertexStyle(modelId, blockIds, { name }),
       },
     );
   }
diff --git a/internal/stores/data_style/model/color.js b/internal/stores/data_style/model/color.js
index bdb5dc7a..0f13c171 100644
--- a/internal/stores/data_style/model/color.js
+++ b/internal/stores/data_style/model/color.js
@@ -1,4 +1,3 @@
-import { DEFAULT_MODEL_COMPONENT_TYPE_COLORS } from "@ogw_front/utils/default_styles";
 import { dispatchToComponentTypes } from "./visibility";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
@@ -79,7 +78,7 @@ function useModelColorStyle(componentStyleFunctions) {
   };
 
   function getModelComponentColor(modelId, componentId) {
-    return dataStyleState.getComponentStyle(modelId, componentId).color;
+    return dataStyleState.getComponentStyle(modelId, componentId).coloring.constant;
   }
 
   function getModelComponentEffectiveColor(modelId, componentId, type) {
@@ -90,27 +89,30 @@ function useModelColorStyle(componentStyleFunctions) {
     return modelComponentTypeColor(modelId, type);
   }
 
-  function getModelComponentColorMode(modelId, componentId) {
-    const mode = dataStyleState.getComponentStyle(modelId, componentId).color_mode || "constant";
-    return mode === "constant" ? "color" : mode;
+  function getModelComponentActiveColoring(modelId, componentId) {
+    return dataStyleState.getComponentStyle(modelId, componentId).coloring.active;
   }
 
   function modelComponentTypeColor(modelId, type) {
     return (
-      dataStyleState.getModelComponentTypeStyle(modelId, type).color ||
-      DEFAULT_MODEL_COMPONENT_TYPE_COLORS[type]
+      dataStyleState.getModelComponentTypeStyle(modelId, type).coloring.constant ||
+      dataStyleState.getStyle(modelId)[`${type.toLowerCase()}s`].coloring.constant
     );
   }
 
-  function getModelComponentTypeColorMode(modelId, type) {
-    const mode = dataStyleState.getModelComponentTypeStyle(modelId, type).color_mode || "constant";
-    return mode === "constant" ? "color" : mode;
+  function getModelComponentTypeActiveColoring(modelId, type) {
+    return (
+      dataStyleState.getModelComponentTypeStyle(modelId, type).coloring.active ||
+      dataStyleState.getStyle(modelId)[`${type.toLowerCase()}s`].coloring.active
+    );
   }
 
   async function setModelComponentTypeColor(modelId, type, color) {
     await modelCommonStyle.mutateModelComponentTypeStyle(modelId, type, {
-      color,
-      color_mode: "constant",
+      coloring: {
+        constant: color,
+        active: "constant",
+      },
     });
     const idsForType = await dataStore.getMeshComponentGeodeIds(modelId, type);
     if (idsForType.length === 0) {
@@ -119,22 +121,25 @@ function useModelColorStyle(componentStyleFunctions) {
     await setModelComponentsColor(modelId, idsForType, color);
   }
 
-  async function setModelComponentTypeColorMode(modelId, type, color_mode) {
-    const mode = color_mode === "color" ? "constant" : color_mode;
-    await modelCommonStyle.mutateModelComponentTypeStyle(modelId, type, { color_mode: mode });
+  async function setModelComponentTypeActiveColoring(modelId, type, activeColoring) {
+    await modelCommonStyle.mutateModelComponentTypeStyle(modelId, type, {
+      coloring: { active: activeColoring },
+    });
     const idsForType = await dataStore.getMeshComponentGeodeIds(modelId, type);
     if (idsForType.length === 0) {
       return;
     }
 
-    if (mode === "random" || mode === "constant") {
-      await setModelComponentsColor(modelId, idsForType, undefined, mode);
+    if (activeColoring === "random" || activeColoring === "constant") {
+      await setModelComponentsColor(modelId, idsForType, undefined, activeColoring);
       return;
     }
 
-    await modelCommonStyle.mutateComponentStyles(modelId, idsForType, { color_mode: mode });
+    await modelCommonStyle.mutateComponentStyles(modelId, idsForType, {
+      coloring: { active: activeColoring },
+    });
     const { getName, setName, getRange, setRange, getColorMap, setColorMap } =
-      ATTRIBUTE_FUNCTIONS[type][mode];
+      ATTRIBUTE_FUNCTIONS[type][activeColoring];
 
     const name = getName(modelId, idsForType[0]);
     if (name) {
@@ -150,17 +155,18 @@ function useModelColorStyle(componentStyleFunctions) {
     }
   }
 
-  async function setModelComponentColorMode(modelId, componentId, color_mode) {
-    const mode = color_mode === "color" ? "constant" : color_mode;
-    await modelCommonStyle.mutateComponentStyle(modelId, componentId, { color_mode: mode });
-    if (mode === "random" || mode === "constant") {
-      await setModelComponentsColor(modelId, [componentId], undefined, mode);
+  async function setModelComponentActiveColoring(modelId, componentId, activeColoring) {
+    await modelCommonStyle.mutateComponentStyle(modelId, componentId, {
+      coloring: { active: activeColoring },
+    });
+    if (activeColoring === "random" || activeColoring === "constant") {
+      await setModelComponentsColor(modelId, [componentId], undefined, activeColoring);
       return;
     }
 
     const type = await dataStore.meshComponentType(modelId, componentId);
     const { getName, setName, getRange, setRange, getColorMap, setColorMap } =
-      ATTRIBUTE_FUNCTIONS[type][mode];
+      ATTRIBUTE_FUNCTIONS[type][activeColoring];
 
     const name = getName(modelId, componentId);
     if (name) {
@@ -176,27 +182,47 @@ function useModelColorStyle(componentStyleFunctions) {
     }
   }
 
-  async function setModelComponentsColor(modelId, componentIds, color, color_mode = "constant") {
-    await modelCommonStyle.mutateComponentStyles(modelId, componentIds, { color, color_mode });
+  async function setModelComponentsColor(
+    modelId,
+    componentIds,
+    color,
+    activeColoring = "constant",
+  ) {
+    await modelCommonStyle.mutateComponentStyles(modelId, componentIds, {
+      coloring: {
+        constant: color,
+        active: activeColoring,
+      },
+    });
     return await dispatchToComponentTypes(
       modelId,
       componentIds,
       "Color",
       { componentStyleFunctions },
       color,
-      color_mode,
+      activeColoring,
     );
   }
 
+  function getModelColor(modelId) {
+    return dataStyleState.getStyle(modelId).coloring.constant;
+  }
+
+  function getModelActiveColoring(modelId) {
+    return dataStyleState.getStyle(modelId).coloring.active;
+  }
+
   return {
+    getModelColor,
+    getModelActiveColoring,
     getModelComponentColor,
     getModelComponentEffectiveColor,
-    getModelComponentColorMode,
+    getModelComponentActiveColoring,
     modelComponentTypeColor,
-    getModelComponentTypeColorMode,
+    getModelComponentTypeActiveColoring,
     setModelComponentTypeColor,
-    setModelComponentTypeColorMode,
-    setModelComponentColorMode,
+    setModelComponentTypeActiveColoring,
+    setModelComponentActiveColoring,
     setModelComponentsColor,
   };
 }
diff --git a/internal/stores/data_style/model/common.js b/internal/stores/data_style/model/common.js
index 5fcd0bbc..7eaeadc8 100644
--- a/internal/stores/data_style/model/common.js
+++ b/internal/stores/data_style/model/common.js
@@ -59,7 +59,7 @@ export function useModelCommonStyle() {
     });
   }
 
-  async function setModelTypeColor(id, component_ids, color, schema, color_mode = "constant") {
+  async function setModelTypeColor(id, component_ids, color, schema, activeColoring = "constant") {
     if (!component_ids?.length) {
       return;
     }
@@ -69,12 +69,13 @@ export function useModelCommonStyle() {
       return;
     }
 
-    if (color_mode === "constant" && color !== undefined) {
-      await mutateComponentStyles(id, component_ids, { color });
-    }
-
-    const params = { id, block_ids: viewer_ids, color_mode };
-    if (color_mode === "constant" && color !== undefined) {
+    const params = { id, block_ids: viewer_ids, color_mode: activeColoring };
+    if (activeColoring === "constant") {
+      await mutateComponentStyles(id, component_ids, {
+        coloring: {
+          constant: color,
+        },
+      });
       params.color = color;
     }
 
@@ -82,8 +83,12 @@ export function useModelCommonStyle() {
       { schema, params },
       {
         response_function: async (colors) => {
-          if (color_mode === "constant" && color !== undefined) {
-            await mutateComponentStyles(id, component_ids, { color });
+          if (activeColoring === "constant") {
+            await mutateComponentStyles(id, component_ids, {
+              coloring: {
+                constant: color,
+              },
+            });
             return;
           }
 
@@ -95,7 +100,11 @@ export function useModelCommonStyle() {
             id,
             colors.map(({ geode_id, color: color_value }) => ({
               id_component: geode_id,
-              values: { color: color_value },
+              values: {
+                coloring: {
+                  constant: color_value,
+                },
+              },
             })),
           );
         },
diff --git a/internal/stores/data_style/model/corners/color.js b/internal/stores/data_style/model/corners/color.js
index 5df090d1..35d57ce4 100644
--- a/internal/stores/data_style/model/corners/color.js
+++ b/internal/stores/data_style/model/corners/color.js
@@ -1,5 +1,6 @@
 import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 import { useModelCornersCommonStyle } from "./common";
+import { useModelCornersVertexAttribute } from "./vertex";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const schema = viewer_schemas.opengeodeweb_viewer.model.corners.color;
@@ -7,19 +8,70 @@ const schema = viewer_schemas.opengeodeweb_viewer.model.corners.color;
 export function useModelCornersColor() {
   const modelCommonStyle = useModelCommonStyle();
   const modelCornersCommonStyle = useModelCornersCommonStyle();
+  const modelCornersVertexAttribute = useModelCornersVertexAttribute();
+
+  function modelCornerColoring(id, corner_id) {
+    return modelCornersCommonStyle.modelCornerStyle(id, corner_id).coloring;
+  }
 
   function modelCornerColor(id, corner_id) {
-    return modelCornersCommonStyle.modelCornerStyle(id, corner_id).color;
+    return modelCornerColoring(id, corner_id).constant;
   }
 
-  function setModelCornersColor(modelId, corners_ids, color, color_mode = "constant") {
-    return modelCommonStyle.setModelTypeColor(modelId, corners_ids, color, schema, color_mode);
+  function setModelCornersColor(modelId, corners_ids, color, activeColoring = "constant") {
+    return modelCommonStyle.setModelTypeColor(modelId, corners_ids, color, schema, activeColoring);
   }
 
-  function modelCornerColorMode(id, corner_id) {
-    const mode = modelCornersCommonStyle.modelCornerStyle(id, corner_id).color_mode || "constant";
-    return mode === "constant" ? "color" : mode;
+  function modelCornerActiveColoring(id, corner_id) {
+    return modelCornerColoring(id, corner_id).active;
+  }
+
+  async function setModelCornersActiveColoring(modelId, corners_ids, activeColoring) {
+    await modelCommonStyle.mutateComponentStyles(modelId, corners_ids, {
+      coloring: { active: activeColoring },
+    });
+    if (activeColoring === "constant" || activeColoring === "random") {
+      const color = modelCornerColor(modelId, corners_ids[0]);
+      return setModelCornersColor(modelId, corners_ids, color, activeColoring);
+    }
+
+    if (activeColoring === "vertex") {
+      const name = modelCornersVertexAttribute.modelCornersVertexAttributeName(
+        modelId,
+        corners_ids[0],
+      );
+      await modelCornersVertexAttribute.setModelCornersVertexAttributeName(
+        modelId,
+        corners_ids,
+        name,
+      );
+      const [min, max] = modelCornersVertexAttribute.modelCornersVertexAttributeRange(
+        modelId,
+        corners_ids[0],
+      );
+      await modelCornersVertexAttribute.setModelCornersVertexAttributeRange(
+        modelId,
+        corners_ids,
+        min,
+        max,
+      );
+      const colorMap = modelCornersVertexAttribute.modelCornersVertexAttributeColorMap(
+        modelId,
+        corners_ids[0],
+      );
+      await modelCornersVertexAttribute.setModelCornersVertexAttributeColorMap(
+        modelId,
+        corners_ids,
+        colorMap,
+      );
+    }
   }
 
-  return { setModelCornersColor, modelCornerColor, modelCornerColorMode };
+  return {
+    setModelCornersColor,
+    modelCornerColoring,
+    modelCornerColor,
+    modelCornerActiveColoring,
+    setModelCornersActiveColoring,
+  };
 }
diff --git a/internal/stores/data_style/model/corners/common.js b/internal/stores/data_style/model/corners/common.js
index c426c084..e03edbda 100644
--- a/internal/stores/data_style/model/corners/common.js
+++ b/internal/stores/data_style/model/corners/common.js
@@ -16,18 +16,27 @@ export function useModelCornersCommonStyle() {
     return merge({}, groupStyle, individualStyle);
   }
 
-  function mutateModelCornersStyle(id, corners_ids, values) {
-    return modelCommonStyle.mutateComponentStyles(id, corners_ids, values);
+  function modelCornerColoring(id, corner_id) {
+    return modelCornerStyle(id, corner_id).coloring;
   }
 
-  function mutateModelCornerStyle(id, corner_id, values) {
-    return modelCommonStyle.mutateComponentStyle(id, corner_id, values);
+  function mutateModelCornersColoring(id, corners_ids, values) {
+    return modelCommonStyle.mutateComponentStyles(id, corners_ids, {
+      coloring: values,
+    });
+  }
+
+  function mutateModelCornerColoring(id, corner_id, values) {
+    return modelCommonStyle.mutateComponentStyle(id, corner_id, {
+      coloring: values,
+    });
   }
 
   return {
     modelCornersStyle,
     modelCornerStyle,
-    mutateModelCornersStyle,
-    mutateModelCornerStyle,
+    modelCornerColoring,
+    mutateModelCornersColoring,
+    mutateModelCornerColoring,
   };
 }
diff --git a/internal/stores/data_style/model/corners/index.js b/internal/stores/data_style/model/corners/index.js
index 0fc0bb3d..449d071e 100644
--- a/internal/stores/data_style/model/corners/index.js
+++ b/internal/stores/data_style/model/corners/index.js
@@ -34,34 +34,36 @@ export function useModelCornersStyle() {
       }
       visibilityGroups[visibility].push(corner_id);
 
-      const color_mode = style.color_mode || "constant";
-      if (color_mode === "constant" || color_mode === "random") {
-        const color_key = color_mode === "random" ? "random" : JSON.stringify(style.color);
+      const coloring = modelColorStyle.modelCornerColoring(modelId, corner_id);
+      const activeColoring = modelColorStyle.modelCornerActiveColoring(modelId, corner_id);
+      if (activeColoring === "constant") {
+        const color = modelColorStyle.modelCornerColor(modelId, corner_id);
+        const color_key = JSON.stringify(color);
         if (!colorGroups[color_key]) {
-          colorGroups[color_key] = { color_mode, color: style.color, corners_ids: [] };
+          colorGroups[color_key] = { activeColoring, color, corners_ids: [] };
         }
         colorGroups[color_key].corners_ids.push(corner_id);
+      } else if (activeColoring === "random") {
+        if (!colorGroups["random"]) {
+          colorGroups["random"] = { activeColoring, color: undefined, corners_ids: [] };
+        }
+        colorGroups["random"].corners_ids.push(corner_id);
       } else {
-        const attributeTypeKey = `${color_mode}_attribute`;
-        const attributeStyle = style[attributeTypeKey] || {};
+        const attributeStyle = coloring[activeColoring];
         const { name } = attributeStyle;
-        if (name) {
-          const storedConfig =
-            (attributeStyle.storedConfigs && attributeStyle.storedConfigs[name]) || {};
-          const { minimum, maximum, colorMap } = storedConfig;
-          const attributeGroupKey = `${color_mode}_${name}_${colorMap}_${minimum}_${maximum}`;
-          if (!attributeGroups[attributeGroupKey]) {
-            attributeGroups[attributeGroupKey] = {
-              color_mode,
-              name,
-              minimum,
-              maximum,
-              colorMap,
-              corners_ids: [],
-            };
-          }
-          attributeGroups[attributeGroupKey].corners_ids.push(corner_id);
+        const { minimum, maximum, colorMap } = attributeStyle.storedConfigs[name];
+        const attributeGroupKey = `${activeColoring}_${name}_${colorMap}_${minimum}_${maximum}`;
+        if (!attributeGroups[attributeGroupKey]) {
+          attributeGroups[attributeGroupKey] = {
+            activeColoring,
+            name,
+            minimum,
+            maximum,
+            colorMap,
+            corners_ids: [],
+          };
         }
+        attributeGroups[attributeGroupKey].corners_ids.push(corner_id);
       }
     }
 
@@ -69,8 +71,8 @@ export function useModelCornersStyle() {
       ...Object.entries(visibilityGroups).map(([visibility, ids]) =>
         modelVisibilityStyle.setModelCornersVisibility(modelId, ids, visibility === "true"),
       ),
-      ...Object.values(colorGroups).map(({ color_mode, color, corners_ids: ids }) =>
-        modelColorStyle.setModelCornersColor(modelId, ids, color, color_mode),
+      ...Object.values(colorGroups).map(({ activeColoring, color, corners_ids: ids }) =>
+        modelColorStyle.setModelCornersColor(modelId, ids, color, activeColoring),
       ),
       ...Object.values(attributeGroups).flatMap(
         ({ name, minimum, maximum, colorMap, corners_ids: ids }) => {
diff --git a/internal/stores/data_style/model/corners/vertex.js b/internal/stores/data_style/model/corners/vertex.js
index df4ca5d1..a332a14c 100644
--- a/internal/stores/data_style/model/corners/vertex.js
+++ b/internal/stores/data_style/model/corners/vertex.js
@@ -16,24 +16,24 @@ export function useModelCornersVertexAttribute() {
   const viewerStore = useViewerStore();
 
   function modelCornersVertexAttribute(modelId, cornerId) {
-    return modelCornersCommonStyle.modelCornerStyle(modelId, cornerId).vertex_attribute;
+    return modelCornersCommonStyle.modelCornerColoring(modelId, cornerId).vertex;
   }
 
   function modelCornersVertexAttributeStoredConfig(modelId, cornerId, name) {
     const { storedConfigs } = modelCornersVertexAttribute(modelId, cornerId);
-    if (name && storedConfigs && name in storedConfigs) {
+    if (name in storedConfigs) {
       return storedConfigs[name];
     }
-    return {
+    return setModelCornersVertexAttributeStoredConfig(modelId, [cornerId], name, {
       minimum: undefined,
       maximum: undefined,
       colorMap: undefined,
-    };
+    });
   }
 
   function mutateModelCornersVertexStyle(modelId, cornerIds, values) {
-    return modelCornersCommonStyle.mutateModelCornersStyle(modelId, cornerIds, {
-      vertex_attribute: values,
+    return modelCornersCommonStyle.mutateModelCornersColoring(modelId, cornerIds, {
+      vertex: values,
     });
   }
 
@@ -51,24 +51,11 @@ export function useModelCornersVertexAttribute() {
 
   async function setModelCornersVertexAttributeName(modelId, cornerIds, name) {
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, cornerIds);
-
-    const updates = { name };
-    const vertex = modelCornersVertexAttribute(modelId, cornerIds[0]);
-    if (!(name in vertex.storedConfigs)) {
-      updates.storedConfigs = {
-        [name]: {
-          minimum: undefined,
-          maximum: undefined,
-          colorMap: undefined,
-        },
-      };
-    }
-
     const params = { id: modelId, block_ids: viewer_ids, name };
     return viewerStore.request(
       { schema: schema.name, params },
       {
-        response_function: () => mutateModelCornersVertexStyle(modelId, cornerIds, updates),
+        response_function: () => mutateModelCornersVertexStyle(modelId, cornerIds, { name }),
       },
     );
   }
diff --git a/internal/stores/data_style/model/lines/color.js b/internal/stores/data_style/model/lines/color.js
index 0873e74e..5332a512 100644
--- a/internal/stores/data_style/model/lines/color.js
+++ b/internal/stores/data_style/model/lines/color.js
@@ -1,5 +1,7 @@
 import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 import { useModelLinesCommonStyle } from "./common";
+import { useModelLinesEdgeAttribute } from "./edge";
+import { useModelLinesVertexAttribute } from "./vertex";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const schema = viewer_schemas.opengeodeweb_viewer.model.lines.color;
@@ -7,19 +9,81 @@ const schema = viewer_schemas.opengeodeweb_viewer.model.lines.color;
 export function useModelLinesColor() {
   const modelCommonStyle = useModelCommonStyle();
   const modelLinesCommonStyle = useModelLinesCommonStyle();
+  const modelLinesVertexAttribute = useModelLinesVertexAttribute();
+  const modelLinesEdgeAttribute = useModelLinesEdgeAttribute();
+
+  function modelLineColoring(id, line_id) {
+    return modelLinesCommonStyle.modelLineStyle(id, line_id).coloring;
+  }
 
   function modelLineColor(id, line_id) {
-    return modelLinesCommonStyle.modelLineStyle(id, line_id).color;
+    return modelLineColoring(id, line_id).constant;
   }
 
-  function setModelLinesColor(modelId, lines_ids, color, color_mode = "constant") {
-    return modelCommonStyle.setModelTypeColor(modelId, lines_ids, color, schema, color_mode);
+  function setModelLinesColor(modelId, lines_ids, color, activeColoring = "constant") {
+    return modelCommonStyle.setModelTypeColor(modelId, lines_ids, color, schema, activeColoring);
   }
 
-  function modelLineColorMode(id, line_id) {
-    const mode = modelLinesCommonStyle.modelLineStyle(id, line_id).color_mode || "constant";
-    return mode === "constant" ? "color" : mode;
+  function modelLineActiveColoring(id, line_id) {
+    return modelLineColoring(id, line_id).active;
+  }
+
+  async function setModelLinesActiveColoring(modelId, lines_ids, activeColoring) {
+    await modelCommonStyle.mutateComponentStyles(modelId, lines_ids, {
+      coloring: { active: activeColoring },
+    });
+    if (activeColoring === "constant" || activeColoring === "random") {
+      const color = modelLineColor(modelId, lines_ids[0]);
+      return setModelLinesColor(modelId, lines_ids, color, activeColoring);
+    }
+
+    if (activeColoring === "vertex") {
+      const name = modelLinesVertexAttribute.modelLinesVertexAttributeName(modelId, lines_ids[0]);
+      await modelLinesVertexAttribute.setModelLinesVertexAttributeName(modelId, lines_ids, name);
+      const [min, max] = modelLinesVertexAttribute.modelLinesVertexAttributeRange(
+        modelId,
+        lines_ids[0],
+      );
+      await modelLinesVertexAttribute.setModelLinesVertexAttributeRange(
+        modelId,
+        lines_ids,
+        min,
+        max,
+      );
+      const colorMap = modelLinesVertexAttribute.modelLinesVertexAttributeColorMap(
+        modelId,
+        lines_ids[0],
+      );
+      await modelLinesVertexAttribute.setModelLinesVertexAttributeColorMap(
+        modelId,
+        lines_ids,
+        colorMap,
+      );
+    } else if (activeColoring === "edge") {
+      const name = modelLinesEdgeAttribute.modelLinesEdgeAttributeName(modelId, lines_ids[0]);
+      await modelLinesEdgeAttribute.setModelLinesEdgeAttributeName(modelId, lines_ids, name);
+      const [min, max] = modelLinesEdgeAttribute.modelLinesEdgeAttributeRange(
+        modelId,
+        lines_ids[0],
+      );
+      await modelLinesEdgeAttribute.setModelLinesEdgeAttributeRange(modelId, lines_ids, min, max);
+      const colorMap = modelLinesEdgeAttribute.modelLinesEdgeAttributeColorMap(
+        modelId,
+        lines_ids[0],
+      );
+      await modelLinesEdgeAttribute.setModelLinesEdgeAttributeColorMap(
+        modelId,
+        lines_ids,
+        colorMap,
+      );
+    }
   }
 
-  return { setModelLinesColor, modelLineColor, modelLineColorMode };
+  return {
+    setModelLinesColor,
+    modelLineColoring,
+    modelLineColor,
+    modelLineActiveColoring,
+    setModelLinesActiveColoring,
+  };
 }
diff --git a/internal/stores/data_style/model/lines/common.js b/internal/stores/data_style/model/lines/common.js
index 4576a645..c7b3362c 100644
--- a/internal/stores/data_style/model/lines/common.js
+++ b/internal/stores/data_style/model/lines/common.js
@@ -16,18 +16,27 @@ export function useModelLinesCommonStyle() {
     return merge({}, groupStyle, individualStyle);
   }
 
-  function mutateModelLinesStyle(id, lines_ids, values) {
-    return modelCommonStyle.mutateComponentStyles(id, lines_ids, values);
+  function modelLineColoring(id, line_id) {
+    return modelLineStyle(id, line_id).coloring;
   }
 
-  function mutateModelLineStyle(id, line_id, values) {
-    return modelCommonStyle.mutateComponentStyle(id, line_id, values);
+  function mutateModelLinesColoring(id, lines_ids, values) {
+    return modelCommonStyle.mutateComponentStyles(id, lines_ids, {
+      coloring: values,
+    });
+  }
+
+  function mutateModelLineColoring(id, line_id, values) {
+    return modelCommonStyle.mutateComponentStyle(id, line_id, {
+      coloring: values,
+    });
   }
 
   return {
     modelLinesStyle,
     modelLineStyle,
-    mutateModelLinesStyle,
-    mutateModelLineStyle,
+    modelLineColoring,
+    mutateModelLinesColoring,
+    mutateModelLineColoring,
   };
 }
diff --git a/internal/stores/data_style/model/lines/edge.js b/internal/stores/data_style/model/lines/edge.js
index 3da247f0..ce5ea006 100644
--- a/internal/stores/data_style/model/lines/edge.js
+++ b/internal/stores/data_style/model/lines/edge.js
@@ -16,24 +16,24 @@ export function useModelLinesEdgeAttribute() {
   const viewerStore = useViewerStore();
 
   function modelLinesEdgeAttribute(modelId, lineId) {
-    return modelLinesCommonStyle.modelLineStyle(modelId, lineId).edge_attribute;
+    return modelLinesCommonStyle.modelLineColoring(modelId, lineId).edge;
   }
 
   function modelLinesEdgeAttributeStoredConfig(modelId, lineId, name) {
     const { storedConfigs } = modelLinesEdgeAttribute(modelId, lineId);
-    if (name && storedConfigs && name in storedConfigs) {
+    if (name in storedConfigs) {
       return storedConfigs[name];
     }
-    return {
+    return setModelLinesEdgeAttributeStoredConfig(modelId, [lineId], name, {
       minimum: undefined,
       maximum: undefined,
       colorMap: undefined,
-    };
+    });
   }
 
   function mutateModelLinesEdgeStyle(modelId, lineIds, values) {
-    return modelLinesCommonStyle.mutateModelLinesStyle(modelId, lineIds, {
-      edge_attribute: values,
+    return modelLinesCommonStyle.mutateModelLinesColoring(modelId, lineIds, {
+      edge: values,
     });
   }
 
@@ -51,24 +51,11 @@ export function useModelLinesEdgeAttribute() {
 
   async function setModelLinesEdgeAttributeName(modelId, lineIds, name) {
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, lineIds);
-
-    const updates = { name };
-    const edge = modelLinesEdgeAttribute(modelId, lineIds[0]);
-    if (!(name in edge.storedConfigs)) {
-      updates.storedConfigs = {
-        [name]: {
-          minimum: undefined,
-          maximum: undefined,
-          colorMap: undefined,
-        },
-      };
-    }
-
     const params = { id: modelId, block_ids: viewer_ids, name };
     return viewerStore.request(
       { schema: schema.name, params },
       {
-        response_function: () => mutateModelLinesEdgeStyle(modelId, lineIds, updates),
+        response_function: () => mutateModelLinesEdgeStyle(modelId, lineIds, { name }),
       },
     );
   }
diff --git a/internal/stores/data_style/model/lines/index.js b/internal/stores/data_style/model/lines/index.js
index 88431853..f7e89f5f 100644
--- a/internal/stores/data_style/model/lines/index.js
+++ b/internal/stores/data_style/model/lines/index.js
@@ -36,34 +36,36 @@ export function useModelLinesStyle() {
       }
       visibilityGroups[visibility].push(line_id);
 
-      const color_mode = style.color_mode || "constant";
-      if (color_mode === "constant" || color_mode === "random") {
-        const color_key = color_mode === "random" ? "random" : JSON.stringify(style.color);
+      const coloring = modelColorStyle.modelLineColoring(modelId, line_id);
+      const activeColoring = modelColorStyle.modelLineActiveColoring(modelId, line_id);
+      if (activeColoring === "constant") {
+        const color = modelColorStyle.modelLineColor(modelId, line_id);
+        const color_key = JSON.stringify(color);
         if (!colorGroups[color_key]) {
-          colorGroups[color_key] = { color_mode, color: style.color, lines_ids: [] };
+          colorGroups[color_key] = { activeColoring, color, lines_ids: [] };
         }
         colorGroups[color_key].lines_ids.push(line_id);
+      } else if (activeColoring === "random") {
+        if (!colorGroups["random"]) {
+          colorGroups["random"] = { activeColoring, color: undefined, lines_ids: [] };
+        }
+        colorGroups["random"].lines_ids.push(line_id);
       } else {
-        const attributeTypeKey = `${color_mode}_attribute`;
-        const attributeStyle = style[attributeTypeKey] || {};
+        const attributeStyle = coloring[activeColoring];
         const { name } = attributeStyle;
-        if (name) {
-          const storedConfig =
-            (attributeStyle.storedConfigs && attributeStyle.storedConfigs[name]) || {};
-          const { minimum, maximum, colorMap } = storedConfig;
-          const attributeGroupKey = `${color_mode}_${name}_${colorMap}_${minimum}_${maximum}`;
-          if (!attributeGroups[attributeGroupKey]) {
-            attributeGroups[attributeGroupKey] = {
-              color_mode,
-              name,
-              minimum,
-              maximum,
-              colorMap,
-              lines_ids: [],
-            };
-          }
-          attributeGroups[attributeGroupKey].lines_ids.push(line_id);
+        const { minimum, maximum, colorMap } = attributeStyle.storedConfigs[name];
+        const attributeGroupKey = `${activeColoring}_${name}_${colorMap}_${minimum}_${maximum}`;
+        if (!attributeGroups[attributeGroupKey]) {
+          attributeGroups[attributeGroupKey] = {
+            activeColoring,
+            name,
+            minimum,
+            maximum,
+            colorMap,
+            lines_ids: [],
+          };
         }
+        attributeGroups[attributeGroupKey].lines_ids.push(line_id);
       }
     }
 
@@ -71,12 +73,12 @@ export function useModelLinesStyle() {
       ...Object.entries(visibilityGroups).map(([visibility, ids]) =>
         modelVisibilityStyle.setModelLinesVisibility(modelId, ids, visibility === "true"),
       ),
-      ...Object.values(colorGroups).map(({ color_mode, color, lines_ids: ids }) =>
-        modelColorStyle.setModelLinesColor(modelId, ids, color, color_mode),
+      ...Object.values(colorGroups).map(({ activeColoring, color, lines_ids: ids }) =>
+        modelColorStyle.setModelLinesColor(modelId, ids, color, activeColoring),
       ),
       ...Object.values(attributeGroups).flatMap(
-        ({ color_mode, name, minimum, maximum, colorMap, lines_ids: ids }) => {
-          const isVertex = color_mode === "vertex";
+        ({ activeColoring, name, minimum, maximum, colorMap, lines_ids: ids }) => {
+          const isVertex = activeColoring === "vertex";
           const attributeStyle = isVertex ? modelLinesVertexAttribute : modelLinesEdgeAttribute;
           const setAttributeName = isVertex
             ? attributeStyle.setModelLinesVertexAttributeName
diff --git a/internal/stores/data_style/model/lines/vertex.js b/internal/stores/data_style/model/lines/vertex.js
index 112a1ca7..6efecfb2 100644
--- a/internal/stores/data_style/model/lines/vertex.js
+++ b/internal/stores/data_style/model/lines/vertex.js
@@ -16,24 +16,24 @@ export function useModelLinesVertexAttribute() {
   const viewerStore = useViewerStore();
 
   function modelLinesVertexAttribute(modelId, lineId) {
-    return modelLinesCommonStyle.modelLineStyle(modelId, lineId).vertex_attribute;
+    return modelLinesCommonStyle.modelLineColoring(modelId, lineId).vertex;
   }
 
   function modelLinesVertexAttributeStoredConfig(modelId, lineId, name) {
     const { storedConfigs } = modelLinesVertexAttribute(modelId, lineId);
-    if (name && storedConfigs && name in storedConfigs) {
+    if (name in storedConfigs) {
       return storedConfigs[name];
     }
-    return {
+    return setModelLinesVertexAttributeStoredConfig(modelId, [lineId], name, {
       minimum: undefined,
       maximum: undefined,
       colorMap: undefined,
-    };
+    });
   }
 
   function mutateModelLinesVertexStyle(modelId, lineIds, values) {
-    return modelLinesCommonStyle.mutateModelLinesStyle(modelId, lineIds, {
-      vertex_attribute: values,
+    return modelLinesCommonStyle.mutateModelLinesColoring(modelId, lineIds, {
+      vertex: values,
     });
   }
 
@@ -51,24 +51,11 @@ export function useModelLinesVertexAttribute() {
 
   async function setModelLinesVertexAttributeName(modelId, lineIds, name) {
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, lineIds);
-
-    const updates = { name };
-    const vertex = modelLinesVertexAttribute(modelId, lineIds[0]);
-    if (!(name in vertex.storedConfigs)) {
-      updates.storedConfigs = {
-        [name]: {
-          minimum: undefined,
-          maximum: undefined,
-          colorMap: undefined,
-        },
-      };
-    }
-
     const params = { id: modelId, block_ids: viewer_ids, name };
     return viewerStore.request(
       { schema: schema.name, params },
       {
-        response_function: () => mutateModelLinesVertexStyle(modelId, lineIds, updates),
+        response_function: () => mutateModelLinesVertexStyle(modelId, lineIds, { name }),
       },
     );
   }
diff --git a/internal/stores/data_style/model/surfaces/color.js b/internal/stores/data_style/model/surfaces/color.js
index ca14a089..c7716235 100644
--- a/internal/stores/data_style/model/surfaces/color.js
+++ b/internal/stores/data_style/model/surfaces/color.js
@@ -1,5 +1,7 @@
 import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 import { useModelSurfacesCommonStyle } from "./common";
+import { useModelSurfacesPolygonAttribute } from "./polygon";
+import { useModelSurfacesVertexAttribute } from "./vertex";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const schema = viewer_schemas.opengeodeweb_viewer.model.surfaces.color;
@@ -7,24 +9,100 @@ const schema = viewer_schemas.opengeodeweb_viewer.model.surfaces.color;
 export function useModelSurfacesColor() {
   const modelCommonStyle = useModelCommonStyle();
   const modelSurfacesCommonStyle = useModelSurfacesCommonStyle();
+  const modelSurfacesVertexAttribute = useModelSurfacesVertexAttribute();
+  const modelSurfacesPolygonAttribute = useModelSurfacesPolygonAttribute();
+
+  function modelSurfaceColoring(id, surface_id) {
+    return modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).coloring;
+  }
 
   function modelSurfaceColor(id, surface_id) {
-    return modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).color;
+    return modelSurfaceColoring(id, surface_id).constant;
   }
 
-  function setModelSurfacesColor(modelId, surfaces_ids, color, color_mode = "constant") {
-    return modelCommonStyle.setModelTypeColor(modelId, surfaces_ids, color, schema, color_mode);
+  function setModelSurfacesColor(modelId, surfaces_ids, color, activeColoring = "constant") {
+    return modelCommonStyle.setModelTypeColor(modelId, surfaces_ids, color, schema, activeColoring);
   }
 
-  function modelSurfaceColorMode(id, surface_id) {
-    const mode =
-      modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).color_mode || "constant";
-    return mode === "constant" ? "color" : mode;
+  function modelSurfaceActiveColoring(id, surface_id) {
+    return modelSurfaceColoring(id, surface_id).active;
+  }
+
+  async function setModelSurfacesActiveColoring(modelId, surfaces_ids, activeColoring) {
+    await modelCommonStyle.mutateComponentStyles(modelId, surfaces_ids, {
+      coloring: { active: activeColoring },
+    });
+    if (activeColoring === "constant" || activeColoring === "random") {
+      const color = modelSurfaceColor(modelId, surfaces_ids[0]);
+      return setModelSurfacesColor(modelId, surfaces_ids, color, activeColoring);
+    }
+
+    if (activeColoring === "vertex") {
+      const name = modelSurfacesVertexAttribute.modelSurfacesVertexAttributeName(
+        modelId,
+        surfaces_ids[0],
+      );
+      await modelSurfacesVertexAttribute.setModelSurfacesVertexAttributeName(
+        modelId,
+        surfaces_ids,
+        name,
+      );
+      const [min, max] = modelSurfacesVertexAttribute.modelSurfacesVertexAttributeRange(
+        modelId,
+        surfaces_ids[0],
+      );
+      await modelSurfacesVertexAttribute.setModelSurfacesVertexAttributeRange(
+        modelId,
+        surfaces_ids,
+        min,
+        max,
+      );
+      const colorMap = modelSurfacesVertexAttribute.modelSurfacesVertexAttributeColorMap(
+        modelId,
+        surfaces_ids[0],
+      );
+      await modelSurfacesVertexAttribute.setModelSurfacesVertexAttributeColorMap(
+        modelId,
+        surfaces_ids,
+        colorMap,
+      );
+    } else if (activeColoring === "polygon") {
+      const name = modelSurfacesPolygonAttribute.modelSurfacesPolygonAttributeName(
+        modelId,
+        surfaces_ids[0],
+      );
+      await modelSurfacesPolygonAttribute.setModelSurfacesPolygonAttributeName(
+        modelId,
+        surfaces_ids,
+        name,
+      );
+      const [min, max] = modelSurfacesPolygonAttribute.modelSurfacesPolygonAttributeRange(
+        modelId,
+        surfaces_ids[0],
+      );
+      await modelSurfacesPolygonAttribute.setModelSurfacesPolygonAttributeRange(
+        modelId,
+        surfaces_ids,
+        min,
+        max,
+      );
+      const colorMap = modelSurfacesPolygonAttribute.modelSurfacesPolygonAttributeColorMap(
+        modelId,
+        surfaces_ids[0],
+      );
+      await modelSurfacesPolygonAttribute.setModelSurfacesPolygonAttributeColorMap(
+        modelId,
+        surfaces_ids,
+        colorMap,
+      );
+    }
   }
 
   return {
     setModelSurfacesColor,
+    modelSurfaceColoring,
     modelSurfaceColor,
-    modelSurfaceColorMode,
+    modelSurfaceActiveColoring,
+    setModelSurfacesActiveColoring,
   };
 }
diff --git a/internal/stores/data_style/model/surfaces/common.js b/internal/stores/data_style/model/surfaces/common.js
index 5fc3e229..baa41317 100644
--- a/internal/stores/data_style/model/surfaces/common.js
+++ b/internal/stores/data_style/model/surfaces/common.js
@@ -16,18 +16,27 @@ export function useModelSurfacesCommonStyle() {
     return merge({}, groupStyle, individualStyle);
   }
 
-  function mutateModelSurfacesStyle(id, surfaces_ids, values) {
-    return modelCommonStyle.mutateComponentStyles(id, surfaces_ids, values);
+  function modelSurfaceColoring(id, surface_id) {
+    return modelSurfaceStyle(id, surface_id).coloring;
   }
 
-  function mutateModelSurfaceStyle(id, surface_id, values) {
-    return modelCommonStyle.mutateComponentStyle(id, surface_id, values);
+  function mutateModelSurfacesColoring(id, surfaces_ids, values) {
+    return modelCommonStyle.mutateComponentStyles(id, surfaces_ids, {
+      coloring: values,
+    });
+  }
+
+  function mutateModelSurfaceColoring(id, surface_id, values) {
+    return modelCommonStyle.mutateComponentStyle(id, surface_id, {
+      coloring: values,
+    });
   }
 
   return {
     modelSurfacesStyle,
     modelSurfaceStyle,
-    mutateModelSurfacesStyle,
-    mutateModelSurfaceStyle,
+    modelSurfaceColoring,
+    mutateModelSurfacesColoring,
+    mutateModelSurfaceColoring,
   };
 }
diff --git a/internal/stores/data_style/model/surfaces/index.js b/internal/stores/data_style/model/surfaces/index.js
index 10954809..83f7f0ff 100644
--- a/internal/stores/data_style/model/surfaces/index.js
+++ b/internal/stores/data_style/model/surfaces/index.js
@@ -36,34 +36,36 @@ export function useModelSurfacesStyle() {
       }
       visibilityGroups[visibility].push(surfaces_id);
 
-      const color_mode = style.color_mode || "constant";
-      if (color_mode === "constant" || color_mode === "random") {
-        const color_key = color_mode === "random" ? "random" : JSON.stringify(style.color);
+      const coloring = modelColorStyle.modelSurfaceColoring(modelId, surfaces_id);
+      const activeColoring = modelColorStyle.modelSurfaceActiveColoring(modelId, surfaces_id);
+      if (activeColoring === "constant") {
+        const color = modelColorStyle.modelSurfaceColor(modelId, surfaces_id);
+        const color_key = JSON.stringify(color);
         if (!colorGroups[color_key]) {
-          colorGroups[color_key] = { color_mode, color: style.color, surfaces_ids: [] };
+          colorGroups[color_key] = { activeColoring, color, surfaces_ids: [] };
         }
         colorGroups[color_key].surfaces_ids.push(surfaces_id);
+      } else if (activeColoring === "random") {
+        if (!colorGroups["random"]) {
+          colorGroups["random"] = { activeColoring, color: undefined, surfaces_ids: [] };
+        }
+        colorGroups["random"].surfaces_ids.push(surfaces_id);
       } else {
-        const attributeTypeKey = `${color_mode}_attribute`;
-        const attributeStyle = style[attributeTypeKey] || {};
+        const attributeStyle = coloring[activeColoring];
         const { name } = attributeStyle;
-        if (name) {
-          const storedConfig =
-            (attributeStyle.storedConfigs && attributeStyle.storedConfigs[name]) || {};
-          const { minimum, maximum, colorMap } = storedConfig;
-          const attributeGroupKey = `${color_mode}_${name}_${colorMap}_${minimum}_${maximum}`;
-          if (!attributeGroups[attributeGroupKey]) {
-            attributeGroups[attributeGroupKey] = {
-              color_mode,
-              name,
-              minimum,
-              maximum,
-              colorMap,
-              surfaces_ids: [],
-            };
-          }
-          attributeGroups[attributeGroupKey].surfaces_ids.push(surfaces_id);
+        const { minimum, maximum, colorMap } = attributeStyle.storedConfigs[name];
+        const attributeGroupKey = `${activeColoring}_${name}_${colorMap}_${minimum}_${maximum}`;
+        if (!attributeGroups[attributeGroupKey]) {
+          attributeGroups[attributeGroupKey] = {
+            activeColoring,
+            name,
+            minimum,
+            maximum,
+            colorMap,
+            surfaces_ids: [],
+          };
         }
+        attributeGroups[attributeGroupKey].surfaces_ids.push(surfaces_id);
       }
     }
 
@@ -71,12 +73,12 @@ export function useModelSurfacesStyle() {
       ...Object.entries(visibilityGroups).map(([visibility, ids]) =>
         modelVisibilityStyle.setModelSurfacesVisibility(modelId, ids, visibility === "true"),
       ),
-      ...Object.values(colorGroups).map(({ color_mode, color, surfaces_ids: ids }) =>
-        modelColorStyle.setModelSurfacesColor(modelId, ids, color, color_mode),
+      ...Object.values(colorGroups).map(({ activeColoring, color, surfaces_ids: ids }) =>
+        modelColorStyle.setModelSurfacesColor(modelId, ids, color, activeColoring),
       ),
       ...Object.values(attributeGroups).flatMap(
-        ({ color_mode, name, minimum, maximum, colorMap, surfaces_ids: ids }) => {
-          const isVertex = color_mode === "vertex";
+        ({ activeColoring, name, minimum, maximum, colorMap, surfaces_ids: ids }) => {
+          const isVertex = activeColoring === "vertex";
           const attributeStyle = isVertex
             ? modelSurfacesVertexAttribute
             : modelSurfacesPolygonAttribute;
diff --git a/internal/stores/data_style/model/surfaces/polygon.js b/internal/stores/data_style/model/surfaces/polygon.js
index 1d297456..faf1964d 100644
--- a/internal/stores/data_style/model/surfaces/polygon.js
+++ b/internal/stores/data_style/model/surfaces/polygon.js
@@ -16,24 +16,24 @@ export function useModelSurfacesPolygonAttribute() {
   const viewerStore = useViewerStore();
 
   function modelSurfacesPolygonAttribute(modelId, surfaceId) {
-    return modelSurfacesCommonStyle.modelSurfaceStyle(modelId, surfaceId).polygon_attribute;
+    return modelSurfacesCommonStyle.modelSurfaceColoring(modelId, surfaceId).polygon;
   }
 
   function modelSurfacesPolygonAttributeStoredConfig(modelId, surfaceId, name) {
     const { storedConfigs } = modelSurfacesPolygonAttribute(modelId, surfaceId);
-    if (name && storedConfigs && name in storedConfigs) {
+    if (name in storedConfigs) {
       return storedConfigs[name];
     }
-    return {
+    return setModelSurfacesPolygonAttributeStoredConfig(modelId, [surfaceId], name, {
       minimum: undefined,
       maximum: undefined,
       colorMap: undefined,
-    };
+    });
   }
 
   function mutateModelSurfacesPolygonStyle(modelId, surfaceIds, values) {
-    return modelSurfacesCommonStyle.mutateModelSurfacesStyle(modelId, surfaceIds, {
-      polygon_attribute: values,
+    return modelSurfacesCommonStyle.mutateModelSurfacesColoring(modelId, surfaceIds, {
+      polygon: values,
     });
   }
 
@@ -51,24 +51,11 @@ export function useModelSurfacesPolygonAttribute() {
 
   async function setModelSurfacesPolygonAttributeName(modelId, surfaceIds, name) {
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, surfaceIds);
-
-    const updates = { name };
-    const polygon = modelSurfacesPolygonAttribute(modelId, surfaceIds[0]);
-    if (!(name in polygon.storedConfigs)) {
-      updates.storedConfigs = {
-        [name]: {
-          minimum: undefined,
-          maximum: undefined,
-          colorMap: undefined,
-        },
-      };
-    }
-
     const params = { id: modelId, block_ids: viewer_ids, name };
     return viewerStore.request(
       { schema: schema.name, params },
       {
-        response_function: () => mutateModelSurfacesPolygonStyle(modelId, surfaceIds, updates),
+        response_function: () => mutateModelSurfacesPolygonStyle(modelId, surfaceIds, { name }),
       },
     );
   }
diff --git a/internal/stores/data_style/model/surfaces/vertex.js b/internal/stores/data_style/model/surfaces/vertex.js
index a742b1aa..c7e1369f 100644
--- a/internal/stores/data_style/model/surfaces/vertex.js
+++ b/internal/stores/data_style/model/surfaces/vertex.js
@@ -16,24 +16,24 @@ export function useModelSurfacesVertexAttribute() {
   const viewerStore = useViewerStore();
 
   function modelSurfacesVertexAttribute(modelId, surfaceId) {
-    return modelSurfacesCommonStyle.modelSurfaceStyle(modelId, surfaceId).vertex_attribute;
+    return modelSurfacesCommonStyle.modelSurfaceColoring(modelId, surfaceId).vertex;
   }
 
   function modelSurfacesVertexAttributeStoredConfig(modelId, surfaceId, name) {
     const { storedConfigs } = modelSurfacesVertexAttribute(modelId, surfaceId);
-    if (name && storedConfigs && name in storedConfigs) {
+    if (name in storedConfigs) {
       return storedConfigs[name];
     }
-    return {
+    return setModelSurfacesVertexAttributeStoredConfig(modelId, [surfaceId], name, {
       minimum: undefined,
       maximum: undefined,
       colorMap: undefined,
-    };
+    });
   }
 
   function mutateModelSurfacesVertexStyle(modelId, surfaceIds, values) {
-    return modelSurfacesCommonStyle.mutateModelSurfacesStyle(modelId, surfaceIds, {
-      vertex_attribute: values,
+    return modelSurfacesCommonStyle.mutateModelSurfacesColoring(modelId, surfaceIds, {
+      vertex: values,
     });
   }
 
@@ -51,24 +51,11 @@ export function useModelSurfacesVertexAttribute() {
 
   async function setModelSurfacesVertexAttributeName(modelId, surfaceIds, name) {
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, surfaceIds);
-
-    const updates = { name };
-    const vertex = modelSurfacesVertexAttribute(modelId, surfaceIds[0]);
-    if (!(name in vertex.storedConfigs)) {
-      updates.storedConfigs = {
-        [name]: {
-          minimum: undefined,
-          maximum: undefined,
-          colorMap: undefined,
-        },
-      };
-    }
-
     const params = { id: modelId, block_ids: viewer_ids, name };
     return viewerStore.request(
       { schema: schema.name, params },
       {
-        response_function: () => mutateModelSurfacesVertexStyle(modelId, surfaceIds, updates),
+        response_function: () => mutateModelSurfacesVertexStyle(modelId, surfaceIds, { name }),
       },
     );
   }
diff --git a/internal/stores/data_style/state.js b/internal/stores/data_style/state.js
index c9c108ff..2f78b7c6 100644
--- a/internal/stores/data_style/state.js
+++ b/internal/stores/data_style/state.js
@@ -157,12 +157,12 @@ export function useDataStyleState() {
 
   function getComponentStyle(id_model, id_component) {
     const key = `${id_model}_${id_component}`;
-    return componentStyles.value[key] || {};
+    return componentStyles.value[key] || { coloring: {} };
   }
 
   function getModelComponentTypeStyle(id_model, type) {
     const key = `${id_model}_${type}`;
-    return modelComponentTypeStyles.value[key] || {};
+    return modelComponentTypeStyles.value[key] || { coloring: {} };
   }
 
   function clear() {
diff --git a/tests/integration/stores/data_style/mesh/cells.nuxt.test.js b/tests/integration/stores/data_style/mesh/cells.nuxt.test.js
index 5794f63a..643750d2 100644
--- a/tests/integration/stores/data_style/mesh/cells.nuxt.test.js
+++ b/tests/integration/stores/data_style/mesh/cells.nuxt.test.js
@@ -121,7 +121,7 @@ describe("mesh cells", () => {
     test("coloring color", async () => {
       const dataStyleStore = useDataStyleStore();
       const viewerStore = useViewerStore();
-      const coloringName = "color";
+      const coloringName = "constant";
       const result = dataStyleStore.setMeshCellsActiveColoring(id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
diff --git a/tests/integration/stores/data_style/mesh/edges.nuxt.test.js b/tests/integration/stores/data_style/mesh/edges.nuxt.test.js
index 2f56ae92..5ce86900 100644
--- a/tests/integration/stores/data_style/mesh/edges.nuxt.test.js
+++ b/tests/integration/stores/data_style/mesh/edges.nuxt.test.js
@@ -109,7 +109,7 @@ describe("mesh edges", () => {
     test("coloring color", async () => {
       const dataStyleStore = useDataStyleStore();
       const viewerStore = useViewerStore();
-      const coloringName = "color";
+      const coloringName = "constant";
       const result = dataStyleStore.setMeshEdgesActiveColoring(id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
diff --git a/tests/integration/stores/data_style/mesh/points.nuxt.test.js b/tests/integration/stores/data_style/mesh/points.nuxt.test.js
index d1a90d52..09a4debe 100644
--- a/tests/integration/stores/data_style/mesh/points.nuxt.test.js
+++ b/tests/integration/stores/data_style/mesh/points.nuxt.test.js
@@ -76,7 +76,7 @@ describe("mesh points", () => {
     test("coloring color", async () => {
       const dataStyleStore = useDataStyleStore();
       const viewerStore = useViewerStore();
-      const coloringName = "color";
+      const coloringName = "constant";
       const result = dataStyleStore.setMeshPointsActiveColoring(id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
diff --git a/tests/integration/stores/data_style/mesh/polygons.nuxt.test.js b/tests/integration/stores/data_style/mesh/polygons.nuxt.test.js
index 97aa22a8..13c61ad4 100644
--- a/tests/integration/stores/data_style/mesh/polygons.nuxt.test.js
+++ b/tests/integration/stores/data_style/mesh/polygons.nuxt.test.js
@@ -119,7 +119,7 @@ describe("mesh polygons", () => {
     test("coloring color", async () => {
       const dataStyleStore = useDataStyleStore();
       const viewerStore = useViewerStore();
-      const coloringName = "color";
+      const coloringName = "constant";
       const result = dataStyleStore.setMeshPolygonsActiveColoring(id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
diff --git a/tests/integration/stores/data_style/mesh/polyhedra.nuxt.test.js b/tests/integration/stores/data_style/mesh/polyhedra.nuxt.test.js
index c19848c5..8c41c22c 100644
--- a/tests/integration/stores/data_style/mesh/polyhedra.nuxt.test.js
+++ b/tests/integration/stores/data_style/mesh/polyhedra.nuxt.test.js
@@ -73,7 +73,7 @@ describe("mesh polyhedra", () => {
     test("coloring color", async () => {
       const dataStyleStore = useDataStyleStore();
       const viewerStore = useViewerStore();
-      const coloringName = "color";
+      const coloringName = "constant";
       const result = dataStyleStore.setMeshPolyhedraActiveColoring(id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
diff --git a/tests/integration/stores/data_style/model/blocks.nuxt.test.js b/tests/integration/stores/data_style/model/blocks.nuxt.test.js
index dd46c3ae..650722c0 100644
--- a/tests/integration/stores/data_style/model/blocks.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/blocks.nuxt.test.js
@@ -180,11 +180,11 @@ describe("model blocks", () => {
       const dataStore = useDataStore();
       const block_ids = await dataStore.getBlocksGeodeIds(id);
       const [block_id] = block_ids;
-      const coloringName = "color";
-      const result = dataStyleStore.setModelComponentColorMode(id, block_id, coloringName);
+      const coloringName = "constant";
+      const result = dataStyleStore.setModelComponentActiveColoring(id, block_id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
-      expect(dataStyleStore.modelBlockColorMode(id, block_id)).toBe(coloringName);
+      expect(dataStyleStore.modelBlockActiveColoring(id, block_id)).toBe(coloringName);
       expect(viewerStore.status).toBe(Status.CONNECTED);
     });
 
@@ -196,10 +196,10 @@ describe("model blocks", () => {
       const [block_id] = block_ids;
       await dataStyleStore.setModelBlocksVertexAttributeName(id, [block_id], "points");
       const coloringName = "vertex";
-      const result = dataStyleStore.setModelComponentColorMode(id, block_id, coloringName);
+      const result = dataStyleStore.setModelComponentActiveColoring(id, block_id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
-      expect(dataStyleStore.modelBlockColorMode(id, block_id)).toBe(coloringName);
+      expect(dataStyleStore.modelBlockActiveColoring(id, block_id)).toBe(coloringName);
       expect(viewerStore.status).toBe(Status.CONNECTED);
     });
 
@@ -211,10 +211,10 @@ describe("model blocks", () => {
       const [block_id] = block_ids;
       await dataStyleStore.setModelBlocksPolyhedronAttributeName(id, [block_id], "test_attribute");
       const coloringName = "polyhedron";
-      const result = dataStyleStore.setModelComponentColorMode(id, block_id, coloringName);
+      const result = dataStyleStore.setModelComponentActiveColoring(id, block_id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
-      expect(dataStyleStore.modelBlockColorMode(id, block_id)).toBe(coloringName);
+      expect(dataStyleStore.modelBlockActiveColoring(id, block_id)).toBe(coloringName);
       expect(viewerStore.status).toBe(Status.CONNECTED);
     });
   });
diff --git a/tests/integration/stores/data_style/model/corners.nuxt.test.js b/tests/integration/stores/data_style/model/corners.nuxt.test.js
index e4c420c7..d9fc2b0f 100644
--- a/tests/integration/stores/data_style/model/corners.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/corners.nuxt.test.js
@@ -145,11 +145,11 @@ describe("model corners", () => {
       const dataStore = useDataStore();
       const corner_ids = await dataStore.getCornersGeodeIds(id);
       const [corner_id] = corner_ids;
-      const coloringName = "color";
-      const result = dataStyleStore.setModelComponentColorMode(id, corner_id, coloringName);
+      const coloringName = "constant";
+      const result = dataStyleStore.setModelComponentActiveColoring(id, corner_id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
-      expect(dataStyleStore.modelCornerColorMode(id, corner_id)).toBe(coloringName);
+      expect(dataStyleStore.modelCornerActiveColoring(id, corner_id)).toBe(coloringName);
       expect(viewerStore.status).toBe(Status.CONNECTED);
     });
 
@@ -161,10 +161,10 @@ describe("model corners", () => {
       const [corner_id] = corner_ids;
       await dataStyleStore.setModelCornersVertexAttributeName(id, [corner_id], "points");
       const coloringName = "vertex";
-      const result = dataStyleStore.setModelComponentColorMode(id, corner_id, coloringName);
+      const result = dataStyleStore.setModelComponentActiveColoring(id, corner_id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
-      expect(dataStyleStore.modelCornerColorMode(id, corner_id)).toBe(coloringName);
+      expect(dataStyleStore.modelCornerActiveColoring(id, corner_id)).toBe(coloringName);
       expect(viewerStore.status).toBe(Status.CONNECTED);
     });
   });
diff --git a/tests/integration/stores/data_style/model/index.nuxt.test.js b/tests/integration/stores/data_style/model/index.nuxt.test.js
index 01f6bd40..d2d81a9c 100644
--- a/tests/integration/stores/data_style/model/index.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/index.nuxt.test.js
@@ -6,6 +6,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 import { beforeAllTimeout, setupIntegrationTests } from "@ogw_tests/integration/setup";
 import { Status } from "@ogw_front/utils/status";
 import { cleanupBackend } from "@ogw_front/utils/local/cleanup";
+import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
@@ -58,4 +59,34 @@ describe("model", () => {
       expect(viewerStore.status).toBe(Status.CONNECTED);
     });
   });
+
+  describe("model color inheritance", () => {
+    test("inheritance workflow model > surfaces > surface", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const dataStore = useDataStore();
+
+      const surface_ids = await dataStore.getSurfacesGeodeIds(id);
+      const [surface_id] = surface_ids;
+
+      const red = { red: 255, green: 0, blue: 0, alpha: 1 };
+      const green = { red: 0, green: 255, blue: 0, alpha: 1 };
+      const blue = { red: 0, green: 0, blue: 255, alpha: 1 };
+
+      await dataStyleStore.mutateStyle(id, {
+        coloring: { constant: red, active: "constant" },
+      });
+      await dataStyleStore.setModelComponentsColor(id, surface_ids, red);
+      await sleep(SLEEP_MS);
+
+      await dataStyleStore.setModelComponentTypeColor(id, "Surface", green);
+      await sleep(SLEEP_MS);
+
+      await dataStyleStore.setModelSurfacesColor(id, [surface_id], blue);
+      await sleep(SLEEP_MS);
+
+      expect(dataStyleStore.getModelColor(id)).toStrictEqual(red);
+      expect(dataStyleStore.modelComponentTypeColor(id, "Surface")).toStrictEqual(green);
+      expect(dataStyleStore.modelSurfaceColor(id, surface_id)).toStrictEqual(blue);
+    });
+  });
 });
diff --git a/tests/integration/stores/data_style/model/lines.nuxt.test.js b/tests/integration/stores/data_style/model/lines.nuxt.test.js
index 7ba5513b..72fa174c 100644
--- a/tests/integration/stores/data_style/model/lines.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/lines.nuxt.test.js
@@ -178,11 +178,11 @@ describe("model lines", () => {
       const dataStore = useDataStore();
       const line_ids = await dataStore.getLinesGeodeIds(id);
       const [line_id] = line_ids;
-      const coloringName = "color";
-      const result = dataStyleStore.setModelComponentColorMode(id, line_id, coloringName);
+      const coloringName = "constant";
+      const result = dataStyleStore.setModelComponentActiveColoring(id, line_id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
-      expect(dataStyleStore.modelLineColorMode(id, line_id)).toBe(coloringName);
+      expect(dataStyleStore.modelLineActiveColoring(id, line_id)).toBe(coloringName);
       expect(viewerStore.status).toBe(Status.CONNECTED);
     });
 
@@ -194,10 +194,10 @@ describe("model lines", () => {
       const [line_id] = line_ids;
       await dataStyleStore.setModelLinesVertexAttributeName(id, [line_id], "points");
       const coloringName = "vertex";
-      const result = dataStyleStore.setModelComponentColorMode(id, line_id, coloringName);
+      const result = dataStyleStore.setModelComponentActiveColoring(id, line_id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
-      expect(dataStyleStore.modelLineColorMode(id, line_id)).toBe(coloringName);
+      expect(dataStyleStore.modelLineActiveColoring(id, line_id)).toBe(coloringName);
       expect(viewerStore.status).toBe(Status.CONNECTED);
     });
 
@@ -209,10 +209,10 @@ describe("model lines", () => {
       const [line_id] = line_ids;
       await dataStyleStore.setModelLinesEdgeAttributeName(id, [line_id], "test_attribute");
       const coloringName = "edge";
-      const result = dataStyleStore.setModelComponentColorMode(id, line_id, coloringName);
+      const result = dataStyleStore.setModelComponentActiveColoring(id, line_id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
-      expect(dataStyleStore.modelLineColorMode(id, line_id)).toBe(coloringName);
+      expect(dataStyleStore.modelLineActiveColoring(id, line_id)).toBe(coloringName);
       expect(viewerStore.status).toBe(Status.CONNECTED);
     });
   });
diff --git a/tests/integration/stores/data_style/model/surfaces.nuxt.test.js b/tests/integration/stores/data_style/model/surfaces.nuxt.test.js
index c675f9ca..65493ae4 100644
--- a/tests/integration/stores/data_style/model/surfaces.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/surfaces.nuxt.test.js
@@ -182,11 +182,11 @@ describe("model surfaces", () => {
       const dataStore = useDataStore();
       const surface_ids = await dataStore.getSurfacesGeodeIds(id);
       const [surface_id] = surface_ids;
-      const coloringName = "color";
-      const result = dataStyleStore.setModelComponentColorMode(id, surface_id, coloringName);
+      const coloringName = "constant";
+      const result = dataStyleStore.setModelComponentActiveColoring(id, surface_id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
-      expect(dataStyleStore.modelSurfaceColorMode(id, surface_id)).toBe(coloringName);
+      expect(dataStyleStore.modelSurfaceActiveColoring(id, surface_id)).toBe(coloringName);
       expect(viewerStore.status).toBe(Status.CONNECTED);
     });
 
@@ -198,10 +198,10 @@ describe("model surfaces", () => {
       const [surface_id] = surface_ids;
       await dataStyleStore.setModelSurfacesVertexAttributeName(id, [surface_id], "points");
       const coloringName = "vertex";
-      const result = dataStyleStore.setModelComponentColorMode(id, surface_id, coloringName);
+      const result = dataStyleStore.setModelComponentActiveColoring(id, surface_id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
-      expect(dataStyleStore.modelSurfaceColorMode(id, surface_id)).toBe(coloringName);
+      expect(dataStyleStore.modelSurfaceActiveColoring(id, surface_id)).toBe(coloringName);
       expect(viewerStore.status).toBe(Status.CONNECTED);
     });
 
@@ -213,10 +213,10 @@ describe("model surfaces", () => {
       const [surface_id] = surface_ids;
       await dataStyleStore.setModelSurfacesPolygonAttributeName(id, [surface_id], "test_attribute");
       const coloringName = "polygon";
-      const result = dataStyleStore.setModelComponentColorMode(id, surface_id, coloringName);
+      const result = dataStyleStore.setModelComponentActiveColoring(id, surface_id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
-      expect(dataStyleStore.modelSurfaceColorMode(id, surface_id)).toBe(coloringName);
+      expect(dataStyleStore.modelSurfaceActiveColoring(id, surface_id)).toBe(coloringName);
       expect(viewerStore.status).toBe(Status.CONNECTED);
     });
   });