diff --git a/src/Mobile.vue b/src/Mobile.vue
index e4a224ef..6a7d811d 100644
--- a/src/Mobile.vue
+++ b/src/Mobile.vue
@@ -77,6 +77,12 @@ body {
     --f7-theme-color-rgb: 198, 126, 72;
     --f7-theme-color-shade: #af6a36;
     --f7-theme-color-tint: #d09467;
+
+    --default-icon-color: var(--f7-text-color);
+}
+
+:root .theme-dark {
+    --default-icon-color: var(--f7-text-color);
 }
 
 .no-right-border {
diff --git a/src/components/mobile/ColorSelectionSheet.vue b/src/components/mobile/ColorSelectionSheet.vue
index 78df41a8..ea6198a0 100644
--- a/src/components/mobile/ColorSelectionSheet.vue
+++ b/src/components/mobile/ColorSelectionSheet.vue
@@ -10,7 +10,9 @@
             <f7-block class="margin-vertical">
                 <f7-row class="padding-vertical padding-horizontal-half" v-for="(row, idx) in allColorRows" :key="idx">
                     <f7-col class="text-align-center" v-for="colorInfo in row" :key="colorInfo.color">
-                        <f7-icon f7="app_fill" :style="{ color: '#' + colorInfo.color }" @click.native="onColorClicked(colorInfo)">
+                        <f7-icon f7="app_fill"
+                                 :style="{ color: (colorInfo.color && colorInfo.color !== '000000' ? '#' + colorInfo.color : 'var(--default-icon-color)') }"
+                                 @click.native="onColorClicked(colorInfo)">
                             <f7-badge color="default" class="right-bottom-icon" v-if="currentValue && currentValue === colorInfo.color">
                                 <f7-icon f7="checkmark_alt"></f7-icon>
                             </f7-badge>
diff --git a/src/components/mobile/IconSelectionSheet.vue b/src/components/mobile/IconSelectionSheet.vue
index cca8a54b..48b41492 100644
--- a/src/components/mobile/IconSelectionSheet.vue
+++ b/src/components/mobile/IconSelectionSheet.vue
@@ -10,7 +10,7 @@
             <f7-block class="margin-vertical">
                 <f7-row class="padding-vertical-half padding-horizontal-half" v-for="(row, idx) in allIconRows" :key="idx">
                     <f7-col class="text-align-center" v-for="iconInfo in row" :key="iconInfo.id">
-                        <f7-icon :icon="iconInfo.icon" :style="{ color: '#' + (color || '000000') }" @click.native="onIconClicked(iconInfo)">
+                        <f7-icon :icon="iconInfo.icon" :style="{ color: (color && color !== '000000' ? '#' + color : 'var(--default-icon-color)') }" @click.native="onIconClicked(iconInfo)">
                             <f7-badge color="default" class="right-bottom-icon" v-if="currentValue && currentValue === iconInfo.id">
                                 <f7-icon f7="checkmark_alt"></f7-icon>
                             </f7-badge>
diff --git a/src/components/mobile/ListItemSelectionSheet.vue b/src/components/mobile/ListItemSelectionSheet.vue
index ff1a4405..21eee0aa 100644
--- a/src/components/mobile/ListItemSelectionSheet.vue
+++ b/src/components/mobile/ListItemSelectionSheet.vue
@@ -14,7 +14,10 @@
                               :value="valueType === 'index' ? index : (valueField ? item[valueField] : item)"
                               :title="titleField ? (titleI18n ? $t(item[titleField]) : item[titleField]) : (titleI18n ? $t(item) : item)"
                               @click="onItemClicked(item, index)">
-                    <f7-icon slot="media" :icon="item[iconField] | icon(iconType)" :style="{ color: '#' + (colorField ? item[colorField] : '000000') }" v-if="iconField"></f7-icon>
+                    <f7-icon slot="media"
+                             :icon="item[iconField] | icon(iconType)"
+                             :style="{ color: (colorField && item[colorField] && item[colorField] !== '000000' ? '#' + item[colorField] : 'var(--default-icon-color)') }"
+                             v-if="iconField"></f7-icon>
                     <f7-icon slot="after" class="list-item-checked" f7="checkmark_alt" v-if="isSelected(item, index)"></f7-icon>
                 </f7-list-item>
             </f7-list>
diff --git a/src/components/mobile/TwoColumnListItemSelectionSheet.vue b/src/components/mobile/TwoColumnListItemSelectionSheet.vue
index 66126d57..e829ced3 100644
--- a/src/components/mobile/TwoColumnListItemSelectionSheet.vue
+++ b/src/components/mobile/TwoColumnListItemSelectionSheet.vue
@@ -17,7 +17,10 @@
                                           :value="primaryValueField ? item[primaryValueField] : item"
                                           :title="primaryTitleField ? item[primaryTitleField] : item"
                                           @click="onPrimaryItemClicked(item)">
-                                <f7-icon slot="media" :icon="item[primaryIconField] | icon(primaryIconType)" :style="{ color: '#' + (primaryColorField ? item[primaryColorField] : '000000') }" v-if="primaryIconField"></f7-icon>
+                                <f7-icon slot="media"
+                                         :icon="item[primaryIconField] | icon(primaryIconType)"
+                                         :style="{ color: (primaryColorField && item[primaryColorField] && item[primaryColorField] !== '000000' ? '#' + item[primaryColorField] : 'var(--default-icon-color)') }"
+                                         v-if="primaryIconField"></f7-icon>
                                 <f7-icon slot="after" class="list-item-showing" f7="chevron_right" v-if="item === selectedPrimaryItem"></f7-icon>
                             </f7-list-item>
                         </f7-list>
@@ -32,7 +35,10 @@
                                           :value="secondaryValueField ? subItem[secondaryValueField] : subItem"
                                           :title="secondaryTitleField ? subItem[secondaryTitleField] : subItem"
                                           @click="onSecondaryItemClicked(subItem)">
-                                <f7-icon slot="media" :icon="subItem[secondaryIconField] | icon(secondaryIconType)" :style="{ color: '#' + (secondaryColorField ? subItem[secondaryColorField] : '000000') }" v-if="secondaryIconField"></f7-icon>
+                                <f7-icon slot="media"
+                                         :icon="subItem[secondaryIconField] | icon(secondaryIconType)"
+                                         :style="{ color: (secondaryColorField && subItem[secondaryColorField] && subItem[secondaryColorField] !== '000000' ? '#' + subItem[secondaryColorField] : 'var(--default-icon-color)') }"
+                                         v-if="secondaryIconField"></f7-icon>
                                 <f7-icon slot="after" class="list-item-checked" f7="checkmark_alt" v-if="isSecondarySelected(subItem)"></f7-icon>
                             </f7-list-item>
                         </f7-list>
diff --git a/src/views/mobile/accounts/Edit.vue b/src/views/mobile/accounts/Edit.vue
index f5660555..d027c547 100644
--- a/src/views/mobile/accounts/Edit.vue
+++ b/src/views/mobile/accounts/Edit.vue
@@ -84,7 +84,9 @@
 
                     <f7-list-item :title="$t('Account Icon')" link="#"
                                   @click="account.showIconSelectionSheet = true">
-                        <f7-icon slot="after" :icon="account.icon | accountIcon" :style="{ color: '#' + account.color }"></f7-icon>
+                        <f7-icon slot="after"
+                                 :icon="account.icon | accountIcon"
+                                 :style="{ color: (account.color && account.color !== '000000' ? '#' + account.color : 'var(--default-icon-color)') }"></f7-icon>
                         <icon-selection-sheet :all-icon-infos="allAccountIcons"
                                               :show.sync="account.showIconSelectionSheet"
                                               :color="account.color"
@@ -94,7 +96,9 @@
 
                     <f7-list-item :title="$t('Account Color')" link="#"
                                   @click="account.showColorSelectionSheet = true">
-                        <f7-icon slot="after" f7="app_fill" :style="{ color: '#' + account.color }"></f7-icon>
+                        <f7-icon slot="after"
+                                 f7="app_fill"
+                                 :style="{ color: (account.color && account.color !== '000000' ? '#' + account.color : 'var(--default-icon-color)') }"></f7-icon>
                         <color-selection-sheet :all-color-infos="allAccountColors"
                                                :show.sync="account.showColorSelectionSheet"
                                                v-model="account.color"
@@ -156,7 +160,9 @@
 
                     <f7-list-item :title="$t('Account Icon')" link="#"
                                   @click="account.showIconSelectionSheet = true">
-                        <f7-icon slot="after" :icon="account.icon | accountIcon" :style="{ color: '#' + account.color }"></f7-icon>
+                        <f7-icon slot="after"
+                                 :icon="account.icon | accountIcon"
+                                 :style="{ color: (account.color && account.color !== '000000' ? '#' + account.color : 'var(--default-icon-color)') }"></f7-icon>
                         <icon-selection-sheet :all-icon-infos="allAccountIcons"
                                               :show.sync="account.showIconSelectionSheet"
                                               :color="account.color"
@@ -166,7 +172,9 @@
 
                     <f7-list-item :title="$t('Account Color')" link="#"
                                   @click="account.showColorSelectionSheet = true">
-                        <f7-icon slot="after" f7="app_fill" :style="{ color: '#' + account.color }"></f7-icon>
+                        <f7-icon slot="after"
+                                 f7="app_fill"
+                                 :style="{ color: (account.color && account.color !== '000000' ? '#' + account.color : 'var(--default-icon-color)') }"></f7-icon>
                         <color-selection-sheet :all-color-infos="allAccountColors"
                                                :show.sync="account.showColorSelectionSheet"
                                                v-model="account.color"
@@ -210,7 +218,9 @@
 
                         <f7-list-item :title="$t('Sub Account Icon')" link="#"
                                       @click="subAccount.showIconSelectionSheet = true">
-                            <f7-icon slot="after" :icon="subAccount.icon | accountIcon" :style="{ color: '#' + subAccount.color }"></f7-icon>
+                            <f7-icon slot="after"
+                                     :icon="subAccount.icon | accountIcon"
+                                     :style="{ color: (subAccount.color && subAccount.color !== '000000' ? '#' + subAccount.color : 'var(--default-icon-color)') }"></f7-icon>
                             <icon-selection-sheet :all-icon-infos="allAccountIcons"
                                                   :show.sync="subAccount.showIconSelectionSheet"
                                                   :color="subAccount.color"
@@ -220,7 +230,9 @@
 
                         <f7-list-item :title="$t('Sub Account Color')" link="#"
                                       @click="subAccount.showColorSelectionSheet = true">
-                            <f7-icon slot="after" f7="app_fill" :style="{ color: '#' + subAccount.color }"></f7-icon>
+                            <f7-icon slot="after"
+                                     f7="app_fill"
+                                     :style="{ color: (subAccount.color && subAccount.color !== '000000' ? '#' + subAccount.color : 'var(--default-icon-color)') }"></f7-icon>
                             <color-selection-sheet :all-color-infos="allAccountColors"
                                                    :show.sync="subAccount.showColorSelectionSheet"
                                                    v-model="subAccount.color"
diff --git a/src/views/mobile/accounts/List.vue b/src/views/mobile/accounts/List.vue
index 6f6bd59a..085ad7c5 100644
--- a/src/views/mobile/accounts/List.vue
+++ b/src/views/mobile/accounts/List.vue
@@ -87,7 +87,8 @@
                     >
                         <f7-block slot="title" class="no-padding">
                             <div class="display-flex padding-top-half padding-bottom-half">
-                                <f7-icon slot="media" :icon="account.icon | accountIcon" :style="{ color: '#' + account.color }">
+                                <f7-icon slot="media" :icon="account.icon | accountIcon"
+                                         :style="{ color: (account.color && account.color !== '000000' ? '#' + account.color : 'var(--default-icon-color)') }">
                                     <f7-badge color="gray" class="right-bottom-icon" v-if="account.hidden">
                                         <f7-icon f7="eye_slash_fill"></f7-icon>
                                     </f7-badge>
@@ -101,7 +102,8 @@
                                                   :title="subAccount.name" :after="accountBalance(subAccount) | currency(subAccount.currency)"
                                                   link="#"
                                     >
-                                        <f7-icon slot="media" :icon="subAccount.icon | accountIcon" :style="{ color: '#' + subAccount.color }">
+                                        <f7-icon slot="media" :icon="subAccount.icon | accountIcon"
+                                                 :style="{ color: (subAccount.color && subAccount.color !== '000000' ? '#' + subAccount.color : 'var(--default-icon-color)') }">
                                             <f7-badge color="gray" class="right-bottom-icon" v-if="subAccount.hidden">
                                                 <f7-icon f7="eye_slash_fill"></f7-icon>
                                             </f7-badge>
diff --git a/src/views/mobile/categories/Default.vue b/src/views/mobile/categories/Default.vue
index dc06ede3..952ba82c 100644
--- a/src/views/mobile/categories/Default.vue
+++ b/src/views/mobile/categories/Default.vue
@@ -23,7 +23,7 @@
                                   :title="$t('category.' + category.name, currentLocale)">
                         <f7-icon slot="media"
                                  :icon="category.categoryIconId | categoryIcon"
-                                 :style="{ color: '#' + category.color }">
+                                 :style="{ color: (category.color && category.color !== '000000' ? '#' + category.color : 'var(--default-icon-color)') }">
                         </f7-icon>
 
                         <f7-accordion-content v-if="category.subCategories.length" class="padding-left">
@@ -33,7 +33,7 @@
                                               :title="$t('category.' + subCategory.name, currentLocale)">
                                     <f7-icon slot="media"
                                              :icon="subCategory.categoryIconId | categoryIcon"
-                                             :style="{ color: '#' + subCategory.color }">
+                                             :style="{ color: (subCategory.color && subCategory.color !== '000000' ? '#' + subCategory.color : 'var(--default-icon-color)') }">
                                     </f7-icon>
                                 </f7-list-item>
                             </f7-list>
diff --git a/src/views/mobile/categories/Edit.vue b/src/views/mobile/categories/Edit.vue
index c68ff78f..d18f7436 100644
--- a/src/views/mobile/categories/Edit.vue
+++ b/src/views/mobile/categories/Edit.vue
@@ -33,7 +33,9 @@
 
                     <f7-list-item :header="$t('Category Icon')" key="singleTypeCategoryIconSelection" link="#"
                                   @click="category.showIconSelectionSheet = true">
-                        <f7-icon slot="after" :icon="category.icon | categoryIcon" :style="{ color: '#' + category.color }"></f7-icon>
+                        <f7-icon slot="after"
+                                 :icon="category.icon | categoryIcon"
+                                 :style="{ color: (category.color && category.color !== '000000' ? '#' + category.color : 'var(--default-icon-color)') }"></f7-icon>
                         <icon-selection-sheet :all-icon-infos="allCategoryIcons"
                                               :show.sync="category.showIconSelectionSheet"
                                               :color="category.color"
@@ -43,7 +45,9 @@
 
                     <f7-list-item :header="$t('Category Color')" key="singleTypeCategoryColorSelection" link="#"
                                   @click="category.showColorSelectionSheet = true">
-                        <f7-icon slot="after" f7="app_fill" :style="{ color: '#' + category.color }"></f7-icon>
+                        <f7-icon slot="after"
+                                 f7="app_fill"
+                                 :style="{ color: (category.color && category.color !== '000000' ? '#' + category.color : 'var(--default-icon-color)') }"></f7-icon>
                         <color-selection-sheet :all-color-infos="allCategoryColors"
                                                :show.sync="category.showColorSelectionSheet"
                                                v-model="category.color"
diff --git a/src/views/mobile/categories/List.vue b/src/views/mobile/categories/List.vue
index a4ee0ad2..f957624a 100644
--- a/src/views/mobile/categories/List.vue
+++ b/src/views/mobile/categories/List.vue
@@ -37,7 +37,9 @@
                                   :link="hasSubCategories ? '/category/list?type=' + categoryType + '&id=' + category.id : null"
                                   v-show="showHidden || !category.hidden"
                                   swipeout @taphold.native="setSortable()">
-                        <f7-icon slot="media" :icon="category.icon | categoryIcon" :style="{ color: '#' + category.color }">
+                        <f7-icon slot="media"
+                                 :icon="category.icon | categoryIcon"
+                                 :style="{ color: (category.color && category.color !== '000000' ? '#' + category.color : 'var(--default-icon-color)') }">
                             <f7-badge color="gray" class="right-bottom-icon" v-if="category.hidden">
                                 <f7-icon f7="eye_slash_fill"></f7-icon>
                             </f7-badge>