Shadow around image for dark theme

css/style.css

@@ -41,7 +41,8 @@
 }
 
 /* Slight shadow around image */
-.html-skeleton-image-shadow { box-shadow: 0 0 3px #000; }
+.html-skeleton-img-shadow { box-shadow: 0 0 3px #000; }
+.html-skeleton-img-shadow-dark { box-shadow: 0 0 2px 1px #fff; }
 
 /* Shift the dialog content (excluding the image) up */
 .html-skeleton-content {

main.js

@@ -291,6 +291,20 @@ define(function(require, exports, module) {
     return imageDir;
   }
 
+
+  /**
+   * @private
+   * Check if the dark theme is enabled and return
+   * the appropriate class name for a slight shadow
+   * on the image preview
+   * @return {string} Appropriate shadow class name
+   */
+  function _getImageShadow() {
+    if ($("body").hasClass("dark")) {
+      return "html-skeleton-img-shadow-dark";
+    }
+    return "html-skeleton-img-shadow";
+  }
 
   /**
    * @private
@@ -345,7 +359,7 @@ define(function(require, exports, module) {
       $showImgPath.html(shortImagePath);
       $imgErrorText.html("<br>is not supported for previewing!");
       $showImgPath.css("color", "red");
-      $imgPreview.removeClass("html-skeleton-image-shadow");
+      $imgPreview.removeClass(_getImageShadow());
       $imgPreview.attr("src", skeletonLogo);
       return false;
 
@@ -360,7 +374,7 @@ define(function(require, exports, module) {
 
       // Position and add small shadow to container
       $(".html-skeleton-image").css("position", "relative");
-      $imgPreview.addClass("html-skeleton-image-shadow");
+      $imgPreview.addClass(_getImageShadow());
 
       // Run process to trim the path
       shortImagePath = _createImageURL(imagePath);