Adjust dark-theme styling

Author: sylvainjule

.editorconfig

@@ -2,7 +2,7 @@ root = true
 
 [*]
 indent_style = space
-indent_size = 2
+indent_size = 4
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true

index.css

@@ -20,11 +20,11 @@
         return $field->value != 'rect';
     },
     'toPercent' => function($field) {
-    	return floatval($field->value) * 100;
+        return floatval($field->value) * 100;
     },
     'toPercentString' => function($field) {
         // Floatval isn't locale aware and outputs commas instead of dots for decimal separator
         // This doesn't work in CSS, which expects a dot
-    	return str_replace(',','.', floatval($field->value) * 100) . '%';
+        return str_replace(',','.', floatval($field->value) * 100) . '%';
     },
 );

index.js

@@ -1,18 +1,18 @@
 <?php
 
 function markerStyle($marker) {
-	$style =  'left:'. $marker->x()->toPercentString() .';';
-	$style .= ' top:'. $marker->y()->toPercentString() .';';
+    $style =  'left:'. $marker->x()->toPercentString() .';';
+    $style .= ' top:'. $marker->y()->toPercentString() .';';
 
-	if($marker->type()->isNotPin()) {
-		$style .= ' width:'. $marker->w()->toPercentString() .';';
-		$style .= ' height:'. $marker->h()->toPercentString() .';';
-	}
+    if($marker->type()->isNotPin()) {
+        $style .= ' width:'. $marker->w()->toPercentString() .';';
+        $style .= ' height:'. $marker->h()->toPercentString() .';';
+    }
 
-	if($marker->type()->isCircle()) {
-		$style .= ' border-radius:50%;';
-		$style .= ' transform:translate(-50%, -50%);';
-	}
+    if($marker->type()->isCircle()) {
+        $style .= ' border-radius:50%;';
+        $style .= ' transform:translate(-50%, -50%);';
+    }
 
-	return $style;
-}
+    return $style;
+}

lib/fieldMethods.php

@@ -1,5 +1,5 @@
 <template>
-    <div :class="['annotator', {'annotator-disabled': disabled}]" ref="container" :data-theme="theme" :data-color="currentColor" @mousemove="panImage">
+    <div :class="['annotator', {'annotator-disabled': disabled}]" ref="container" :data-theme="currentTheme" :data-color="currentColor" @mousemove="panImage">
         <div class="annotator-background"></div>
         <div v-if="!src" class="annotator-placeholder">
             <div class="annotator-placeholder-ctn">
@@ -107,6 +107,9 @@ export default {
         currentColor() {
             return this.storedColor != '' ? this.storedColor : this.manualColor
         },
+        currentTheme() {
+            return this.theme ?? this.$panel.theme.current
+        },
         pageValues() {
             return this.$panel.content.version("changes")
         },
@@ -132,6 +135,8 @@ export default {
                 this.dblclick  = response.dblclick
                 if(response.image) this.src = response.image
 
+                    console.log(this.theme)
+
                 this.currentTool = this.tools[0]
                 this.manualColor = this.colors[0]
             })
@@ -440,14 +445,14 @@ export default {
         updateStructure() {
             if(this.storage.markers) {
                 this.$panel.content.update({
-                  [this.storage.markers]: this.markers
+                [this.storage.markers]: this.markers
                 });
             }
         },
         updateColor() {
             if(this.storage.color) {
                 this.$panel.content.update({
-                  [this.storage.color]: this.storedColor
+                [this.storage.color]: this.storedColor
                 });
             }
         },

lib/functions.php

@@ -1,58 +1,58 @@
 @mixin markers-style($color) {
-	.marker {
-		color: white;
-		&-pin {
-			background: #{$color};
-		}
-		&-rect {
-			border: 2px solid #{$color};
-			.resize-helpers {
-				.handle {
-					border: 2px solid #{$color};
-				}
-			}
-			.count {
-				background: #{$color};
-			}
-		}
-		&-circle {
-			border: 2px solid #{$color};
-			.resize-helpers {
-				background: #{$color};
-				.handle {
-					border: 2px solid #{$color};
-				}
-			}
-			.count {
-				background: #{$color};
-			}
-		}
-	}
+    .marker {
+        color: white;
+        &-pin {
+            background: #{$color};
+        }
+        &-rect {
+            border: 2px solid #{$color};
+            .resize-helpers {
+                .handle {
+                    border: 2px solid #{$color};
+                }
+            }
+            .count {
+                background: #{$color};
+            }
+        }
+        &-circle {
+            border: 2px solid #{$color};
+            .resize-helpers {
+                background: #{$color};
+                .handle {
+                    border: 2px solid #{$color};
+                }
+            }
+            .count {
+                background: #{$color};
+            }
+        }
+    }
 }
 
 @mixin toolbar-style($color) {
-	.annotator-toolbar {
-		.tool.selected {
-			svg {
-				.vibrant, .faded {
-					fill: #{$color};
-				}
-			}
-		}
-	}
-	.color-selected {
-		.circle {
-			background: #{$color};
-		}
-	}
+    .annotator-toolbar {
+        .tool.selected {
+            svg {
+                .vibrant, .faded {
+                    fill: #{$color};
+                }
+            }
+        }
+    }
+    .color-selected {
+        .circle {
+            background: #{$color};
+        }
+    }
 }
 
 @mixin grabbable {
-	cursor: move;
+    cursor: move;
     cursor: grab;
     cursor: -moz-grab;
     cursor: -webkit-grab;
-    &:active { 
-	    cursor: default;
-	}
-}
+    &:active {
+        cursor: default;
+    }
+}