diff --git a/framework/elements/image/image.php b/framework/elements/image/image.php
index 5c900751..21f9be31 100644
--- a/framework/elements/image/image.php
+++ b/framework/elements/image/image.php
@@ -15,6 +15,7 @@
 extract($displayData);
 $title          = $params->get('title', '');
 $image          = $params->get('image', '');
+$image_dark     = $params->get('image_dark', '');
 $use_link       = $params->get('use_link', 0);
 $link           = $params->get('link', '');
 $target         = $params->get('target', '');
@@ -39,9 +40,16 @@
     if ($use_link) {
         echo '<a href="'.$link.'" title="'.$title.'"'.$target.'>';
     }
-    echo '<div class="d-inline-block position-relative overflow-hidden' . $border_radius . $box_shadow . $hover_effect . $transition . '"'.$max_width.'>';
+    echo '<div class="as-image position-relative overflow-hidden' . $border_radius . $box_shadow . $hover_effect . $transition . '"'.$max_width.'>';
     echo '<img src="'. Astroid\Helper\Media::getPath() . '/' . $image.'" alt="'.$title.'">';
     echo '</div>';
+    if (!empty($image_dark)) {
+        echo '<div class="as-image-dark d-none position-relative overflow-hidden' . $border_radius . $box_shadow . $hover_effect . $transition . '"'.$max_width.'>';
+        echo '<img src="'. Astroid\Helper\Media::getPath() . '/' . $image_dark.'" alt="'.$title.'">';
+        echo '</div>';
+        $element->style_dark->child('.as-image')->addCss('display', 'none !important');
+        $element->style_dark->child('.as-image-dark')->addCss('display', 'inline-block !important');
+    }
     if ($use_link) {
         echo '</a>';
     }
diff --git a/framework/elements/image/image.xml b/framework/elements/image/image.xml
index ffed2e11..68bad41b 100644
--- a/framework/elements/image/image.xml
+++ b/framework/elements/image/image.xml
@@ -9,7 +9,12 @@
         <fields>
             <fieldset name="general-settings" label="TPL_ASTROID_GENERAL_SETTINGS_LABEL" addfieldpath="/libraries/astroid/framework/fields">
                 <field type="astroidgroup" name="widget_styles" title="ASTROID_WIDGET_STYLES_LABEL"/>
-                <field astroidgroup="general" name="image" type="astroidmedia" label="TPL_ASTROID_SELECT_IMAGE"/>
+                <field astroidgroup="general" name="image_color_mode" type="astroidradio" width="full" default="light">
+                    <option value="light">TPL_ASTROID_BASIC_COLOR_MODE_OPTION_LIGHT</option>
+                    <option value="dark">TPL_ASTROID_BASIC_COLOR_MODE_OPTION_DARK</option>
+                </field>
+                <field astroidgroup="general" ngShow="[image_color_mode]=='light'" name="image" type="astroidmedia" label="TPL_ASTROID_SELECT_IMAGE"/>
+                <field astroidgroup="general" ngShow="[image_color_mode]=='dark'" name="image_dark" type="astroidmedia" label="TPL_ASTROID_SELECT_IMAGE_DARK"/>
                 <field astroidgroup="general" description="ASTROID_WIDGET_IMAGE_USE_LINK_DESC" name="use_link" type="astroidradio" astroid-switch="true" default="0" label="ASTROID_WIDGET_USE_LINK_LABEL"/>
                 <field astroidgroup="general" ngShow="[use_link]==1" type="astroidtext" label="ASTROID_WIDGET_LINK_LABEL" description="ASTROID_WIDGET_IMAGE_LINK_DESC" name="link" hint="https://astroidframe.work/"/>
                 <field astroidgroup="general" ngShow="[use_link]==1" type="astroidlist" name="target" label="ASTROID_WIDGET_LINK_TARGET_LABEL" default="">