diff --git a/fyo/core/types.ts b/fyo/core/types.ts
index f9c36f21..513605a5 100644
--- a/fyo/core/types.ts
+++ b/fyo/core/types.ts
@@ -36,7 +36,6 @@ export type ConfigMap = {
   lastSelectedFilePath: null | string;
   language: string 
   deviceId: string
-  darkMode: boolean
 };
 
 export interface ConfigFile {
diff --git a/schemas/core/SystemSettings.json b/schemas/core/SystemSettings.json
index e5570c90..50939de7 100644
--- a/schemas/core/SystemSettings.json
+++ b/schemas/core/SystemSettings.json
@@ -117,6 +117,14 @@
       "fieldtype": "Data",
       "readOnly": true,
       "hidden": true
+    },
+    {
+      "fieldname": "darkMode",
+      "label": "Dark mode",
+      "fieldtype": "Check",
+      "default": "false",
+      "description": "Sets the theme of the app.",
+      "section": "Theme"
     }
   ],
   "quickEditFields": [
@@ -126,4 +134,4 @@
     "displayPrecision",
     "hideGetStarted"
   ]
-}
+}
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index e6573329..01e5e11b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,7 +23,6 @@
       class="flex-1"
       :darkMode="darkMode"
       @change-db-file="showDbSelector"
-      @toggle-darkmode="toggleDMode"
     />
     <DatabaseSelector
       v-if="activeScreen === 'DatabaseSelector'"
@@ -70,7 +69,7 @@ import { Search } from './utils/search';
 import { Shortcuts } from './utils/shortcuts';
 import { routeTo } from './utils/ui';
 import { useKeys } from './utils/vueUtils';
-import { toggleDarkMode } from 'src/utils/theme';
+import { setDarkMode } from 'src/utils/theme';
 
 enum Screen {
   Desk = 'Desk',
@@ -136,7 +135,9 @@ export default defineComponent({
   },
   async mounted() {
     await this.setInitialScreen();
-    this.darkMode = fyo.config.get('darkMode') as boolean;
+    const { darkMode } = await fyo.doc.getDoc('SystemSettings');
+    setDarkMode(!!darkMode);
+    this.darkMode = !!darkMode;
   },
   methods: {
     async setInitialScreen(): Promise<void> {
@@ -260,10 +261,6 @@ export default defineComponent({
       this.searcher = null;
       this.companyName = '';
     },
-    toggleDMode(): void {
-      toggleDarkMode();
-      this.darkMode = fyo.config.get('darkMode');
-    },
   },
 });
 
diff --git a/src/components/Charts/BarChart.vue b/src/components/Charts/BarChart.vue
index cec0286c..ec257f77 100644
--- a/src/components/Charts/BarChart.vue
+++ b/src/components/Charts/BarChart.vue
@@ -1,33 +1,69 @@
 <template>
   <div>
-    <svg ref="chartSvg" :viewBox="`0 0 ${viewBoxWidth} ${viewBoxHeight}`" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      ref="chartSvg"
+      :viewBox="`0 0 ${viewBoxWidth} ${viewBoxHeight}`"
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <!-- x Grid Lines -->
-      <path v-if="drawXGrid" :d="xGrid" :stroke="gridColor" :stroke-width="gridThickness" stroke-linecap="round"
-        fill="transparent" />
+      <path
+        v-if="drawXGrid"
+        :d="xGrid"
+        :stroke="gridColor"
+        :stroke-width="gridThickness"
+        stroke-linecap="round"
+        fill="transparent"
+      />
 
       <!-- zero line -->
-      <path v-if="drawZeroLine" :d="zLine" :stroke="zeroLineColor" :stroke-width="gridThickness" stroke-linecap="round"
-        fill="transparent" />
+      <path
+        v-if="drawZeroLine"
+        :d="zLine"
+        :stroke="zeroLineColor"
+        :stroke-width="gridThickness"
+        stroke-linecap="round"
+        fill="transparent"
+      />
 
       <!-- Axis -->
-      <path v-if="drawAxis" :d="axis" :stroke-width="axisThickness" :stroke="axisColor" fill="transparent" />
+      <path
+        v-if="drawAxis"
+        :d="axis"
+        :stroke-width="axisThickness"
+        :stroke="axisColor"
+        fill="transparent"
+      />
 
       <!-- x Labels -->
       <template v-if="xLabels.length > 0">
-        <text v-for="(i, j) in count" :key="j + '-xlabels'" :style="fontStyle" :y="viewBoxHeight -
-          axisPadding +
-          yLabelOffset +
-          fontStyle.fontSize / 2 -
-          bottom
-          " :x="xs[i - 1]" text-anchor="middle">
+        <text
+          v-for="(i, j) in count"
+          :key="j + '-xlabels'"
+          :style="fontStyle"
+          :y="
+            viewBoxHeight -
+            axisPadding +
+            yLabelOffset +
+            fontStyle.fontSize / 2 -
+            bottom
+          "
+          :x="xs[i - 1]"
+          text-anchor="middle"
+        >
           {{ j % skipXLabel === 0 ? formatX(xLabels[i - 1] || '') : '' }}
         </text>
       </template>
 
       <!-- y Labels -->
       <template v-if="yLabelDivisions > 0">
-        <text v-for="(i, j) in yLabelDivisions + 1" :key="j + '-ylabels'" :style="fontStyle" :y="yScalerLocation(i - 1)"
-          :x="axisPadding - xLabelOffset + left" text-anchor="end">
+        <text
+          v-for="(i, j) in yLabelDivisions + 1"
+          :key="j + '-ylabels'"
+          :style="fontStyle"
+          :y="yScalerLocation(i - 1)"
+          :x="axisPadding - xLabelOffset + left"
+          text-anchor="end"
+        >
           {{ yScalerValue(i - 1) }}
         </text>
       </template>
@@ -37,21 +73,64 @@
           <rect x="0" y="0" :width="viewBoxWidth" :height="z" />
         </clipPath>
         <clipPath id="negative-rect-clip">
-          <rect x="0" :y="z" :width="viewBoxWidth" :height="viewBoxHeight - z" />
+          <rect
+            x="0"
+            :y="z"
+            :width="viewBoxWidth"
+            :height="viewBoxHeight - z"
+          />
         </clipPath>
       </defs>
 
-      <rect v-for="(rec, i) in positiveRects" :key="i + 'prec'" :rx="radius" :ry="radius" :x="rec.x" :y="rec.y"
-        :width="width" :height="rec.height" :fill="rec.color" clip-path="url(#positive-rect-clip)"
-        @mouseenter="() => create(rec.xi, rec.yi)" @mousemove="update" @mouseleave="destroy" />
+      <rect
+        v-for="(rec, i) in positiveRects"
+        :key="i + 'prec'"
+        :rx="radius"
+        :ry="radius"
+        :x="rec.x"
+        :y="rec.y"
+        :width="width"
+        :height="rec.height"
+        :fill="rec.color"
+        clip-path="url(#positive-rect-clip)"
+        @mouseenter="() => create(rec.xi, rec.yi)"
+        @mousemove="update"
+        @mouseleave="destroy"
+      />
 
-      <rect v-for="(rec, i) in negativeRects" :key="i + 'nrec'" :rx="radius" :ry="radius" :x="rec.x" :y="rec.y"
-        :width="width" :height="rec.height" :fill="rec.color" clip-path="url(#negative-rect-clip)"
-        @mouseenter="() => create(rec.xi, rec.yi)" @mousemove="update" @mouseleave="destroy" />
+      <rect
+        v-for="(rec, i) in negativeRects"
+        :key="i + 'nrec'"
+        :rx="radius"
+        :ry="radius"
+        :x="rec.x"
+        :y="rec.y"
+        :width="width"
+        :height="rec.height"
+        :fill="rec.color"
+        clip-path="url(#negative-rect-clip)"
+        @mouseenter="() => create(rec.xi, rec.yi)"
+        @mousemove="update"
+        @mouseleave="destroy"
+      />
     </svg>
-    <Tooltip ref="tooltip" :offset="15" placement="top"
-      class="text-sm shadow-md px-2 py-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-200 border-s-4"
-      :style="{ borderColor: activeColor }">
+    <Tooltip
+      ref="tooltip"
+      :offset="15"
+      placement="top"
+      class="
+        text-sm
+        shadow-md
+        px-2
+        py-1
+        bg-white
+        dark:bg-gray-900
+        text-gray-900
+        dark:text-gray-200
+        border-s-4
+      "
+      :style="{ borderColor: activeColor }"
+    >
       <div class="flex flex-col justify-center items-center">
         <p>
           {{ xi > -1 ? formatX(xLabels[xi]) : '' }}
@@ -127,7 +206,7 @@ export default {
             this.padding +
             this.left +
             (i * (this.viewBoxWidth - this.left - 2 * this.padding)) /
-            (this.count - 1 || 1) // The "or" one (1) prevents accidentally dividing by 0
+              (this.count - 1 || 1) // The "or" one (1) prevents accidentally dividing by 0
         );
     },
     z() {
@@ -146,8 +225,9 @@ export default {
       return Math.max(...this.points.flat());
     },
     axis() {
-      return `M ${this.axisPadding + this.left} ${this.axisPadding} V ${this.viewBoxHeight - this.axisPadding - this.bottom
-        } H ${this.viewBoxWidth - this.axisPadding}`;
+      return `M ${this.axisPadding + this.left} ${this.axisPadding} V ${
+        this.viewBoxHeight - this.axisPadding - this.bottom
+      } H ${this.viewBoxWidth - this.axisPadding}`;
     },
     padding() {
       return this.axisPadding + this.pointsPadding;
@@ -235,7 +315,7 @@ export default {
       return (
         ((this.yLabelDivisions - i) *
           (this.viewBoxHeight - this.padding * 2 - this.bottom)) /
-        this.yLabelDivisions +
+          this.yLabelDivisions +
         this.padding
       );
     },
diff --git a/src/components/Charts/LineChart.vue b/src/components/Charts/LineChart.vue
index 0b26179e..bee1f827 100644
--- a/src/components/Charts/LineChart.vue
+++ b/src/components/Charts/LineChart.vue
@@ -1,30 +1,60 @@
 <template>
   <div>
-    <svg ref="chartSvg" :viewBox="`0 0 ${viewBoxWidth} ${viewBoxHeight}`" xmlns="http://www.w3.org/2000/svg"
-      @mousemove="update">
+    <svg
+      ref="chartSvg"
+      :viewBox="`0 0 ${viewBoxWidth} ${viewBoxHeight}`"
+      xmlns="http://www.w3.org/2000/svg"
+      @mousemove="update"
+    >
       <!-- x Grid Lines -->
-      <path v-if="drawXGrid" :d="xGrid" :stroke="gridColor" :stroke-width="gridThickness" stroke-linecap="round"
-        fill="transparent" />
+      <path
+        v-if="drawXGrid"
+        :d="xGrid"
+        :stroke="gridColor"
+        :stroke-width="gridThickness"
+        stroke-linecap="round"
+        fill="transparent"
+      />
 
       <!-- Axis -->
-      <path v-if="drawAxis" :d="axis" :stroke-width="axisThickness" :stroke="axisColor" fill="transparent" />
+      <path
+        v-if="drawAxis"
+        :d="axis"
+        :stroke-width="axisThickness"
+        :stroke="axisColor"
+        fill="transparent"
+      />
 
       <!-- x Labels -->
       <template v-if="drawLabels && xLabels.length > 0">
-        <text v-for="(i, j) in count" :key="j + '-xlabels'" :style="fontStyle" :y="viewBoxHeight -
-          axisPadding +
-          yLabelOffset +
-          fontStyle.fontSize / 2 -
-          bottom
-          " :x="xs[i - 1]" text-anchor="middle">
+        <text
+          v-for="(i, j) in count"
+          :key="j + '-xlabels'"
+          :style="fontStyle"
+          :y="
+            viewBoxHeight -
+            axisPadding +
+            yLabelOffset +
+            fontStyle.fontSize / 2 -
+            bottom
+          "
+          :x="xs[i - 1]"
+          text-anchor="middle"
+        >
           {{ formatX(xLabels[i - 1] || '') }}
         </text>
       </template>
 
       <!-- y Labels -->
       <template v-if="drawLabels && yLabelDivisions > 0">
-        <text v-for="(i, j) in yLabelDivisions + 1" :key="j + '-ylabels'" :style="fontStyle" :y="yScalerLocation(i - 1)"
-          :x="axisPadding - xLabelOffset + left" text-anchor="end">
+        <text
+          v-for="(i, j) in yLabelDivisions + 1"
+          :key="j + '-ylabels'"
+          :style="fontStyle"
+          :y="yScalerLocation(i - 1)"
+          :x="axisPadding - xLabelOffset + left"
+          text-anchor="end"
+        >
           {{ yScalerValue(i - 1) }}
         </text>
       </template>
@@ -38,28 +68,68 @@
         </linearGradient>
 
         <mask v-for="(i, j) in num" :id="'rect-mask-' + i" :key="j + '-mask'">
-          <rect x="0" :y="gradY(j)" :height="viewBoxHeight - gradY(j)" width="100%" fill="url('#grad')" />
+          <rect
+            x="0"
+            :y="gradY(j)"
+            :height="viewBoxHeight - gradY(j)"
+            width="100%"
+            fill="url('#grad')"
+          />
         </mask>
       </defs>
 
       <g v-for="(i, j) in num" :key="j + '-gpath'">
         <!-- Gradient Paths -->
-        <path stroke-linejoin="round" :d="getGradLine(i - 1)" :stroke-width="thickness" stroke-linecap="round"
-          :fill="colors[i - 1] || getRandomColor()" :mask="`url('#rect-mask-${i}')`" />
+        <path
+          stroke-linejoin="round"
+          :d="getGradLine(i - 1)"
+          :stroke-width="thickness"
+          stroke-linecap="round"
+          :fill="colors[i - 1] || getRandomColor()"
+          :mask="`url('#rect-mask-${i}')`"
+        />
 
         <!-- Lines -->
-        <path stroke-linejoin="round" :d="getLine(i - 1)" :stroke="colors[i - 1] || getRandomColor()"
-          :stroke-width="thickness" stroke-linecap="round" fill="transparent" />
+        <path
+          stroke-linejoin="round"
+          :d="getLine(i - 1)"
+          :stroke="colors[i - 1] || getRandomColor()"
+          :stroke-width="thickness"
+          stroke-linecap="round"
+          fill="transparent"
+        />
       </g>
 
       <!-- Tooltip Reference -->
-      <circle v-if="xi > -1 && yi > -1" r="12" :cx="cx" :cy="cy" :fill="colors[yi]" style="
+      <circle
+        v-if="xi > -1 && yi > -1"
+        r="12"
+        :cx="cx"
+        :cy="cy"
+        :fill="colors[yi]"
+        style="
           filter: brightness(115%) drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.25));
-        " />
+        "
+      />
     </svg>
-    <Tooltip v-if="showTooltip" ref="tooltip" :offset="15" placement="top"
-      class="text-sm shadow-md px-2 py-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-200 border-s-4"
-      :style="{ borderColor: colors[yi] }">
+    <Tooltip
+      v-if="showTooltip"
+      ref="tooltip"
+      :offset="15"
+      placement="top"
+      class="
+        text-sm
+        shadow-md
+        px-2
+        py-1
+        bg-white
+        dark:bg-gray-900
+        text-gray-900
+        dark:text-gray-200
+        border-s-4
+      "
+      :style="{ borderColor: colors[yi] }"
+    >
       <div class="flex flex-col justify-center items-center">
         <p>
           {{ xi > -1 ? formatX(xLabels[xi]) : '' }}
@@ -133,7 +203,7 @@ export default {
             this.padding +
             this.left +
             (i * (this.viewBoxWidth - this.left - 2 * this.padding)) /
-            (this.count - 1 || 1) // The "or" one (1) prevents accidentally dividing by 0
+              (this.count - 1 || 1) // The "or" one (1) prevents accidentally dividing by 0
         );
     },
     ys() {
@@ -144,7 +214,7 @@ export default {
           (p) =>
             this.padding +
             (1 - (p - min) / (max - min)) *
-            (this.viewBoxHeight - 2 * this.padding - this.bottom)
+              (this.viewBoxHeight - 2 * this.padding - this.bottom)
         )
       );
     },
@@ -158,8 +228,9 @@ export default {
       return Math.max(...this.points.flat());
     },
     axis() {
-      return `M ${this.axisPadding + this.left} ${this.axisPadding} V ${this.viewBoxHeight - this.axisPadding - this.bottom
-        } H ${this.viewBoxWidth - this.axisPadding}`;
+      return `M ${this.axisPadding + this.left} ${this.axisPadding} V ${
+        this.viewBoxHeight - this.axisPadding - this.bottom
+      } H ${this.viewBoxWidth - this.axisPadding}`;
     },
     padding() {
       return this.axisPadding + this.pointsPadding;
@@ -200,7 +271,7 @@ export default {
       return (
         ((this.yLabelDivisions - i) *
           (this.viewBoxHeight - this.padding * 2 - this.bottom)) /
-        this.yLabelDivisions +
+          this.yLabelDivisions +
         this.padding
       );
     },
diff --git a/src/components/Controls/AttachImage.vue b/src/components/Controls/AttachImage.vue
index 4acf13f6..03c0ffaf 100644
--- a/src/components/Controls/AttachImage.vue
+++ b/src/components/Controls/AttachImage.vue
@@ -1,26 +1,68 @@
 <template>
-  <div class="relative bg-white dark:bg-gray-900 border dark:border-gray-800 flex-center overflow-hidden group" :class="{
-    rounded: size === 'form',
-    'w-20 h-20 rounded-full': size !== 'small' && size !== 'form',
-    'w-12 h-12 rounded-full': size === 'small',
-  }" :title="df?.label" :style="imageSizeStyle">
+  <div
+    class="
+      relative
+      bg-white
+      dark:bg-gray-900
+      border
+      dark:border-gray-800
+      flex-center
+      overflow-hidden
+      group
+    "
+    :class="{
+      rounded: size === 'form',
+      'w-20 h-20 rounded-full': size !== 'small' && size !== 'form',
+      'w-12 h-12 rounded-full': size === 'small',
+    }"
+    :title="df?.label"
+    :style="imageSizeStyle"
+  >
     <img v-if="value" :src="value" />
     <div v-else :class="[!isReadOnly ? 'group-hover:opacity-90' : '']">
-      <div v-if="letterPlaceholder"
-        class="flex h-full items-center justify-center text-gray-400 dark:text-gray-600 font-semibold w-full text-4xl select-none">
+      <div
+        v-if="letterPlaceholder"
+        class="
+          flex
+          h-full
+          items-center
+          justify-center
+          text-gray-400
+          dark:text-gray-600
+          font-semibold
+          w-full
+          text-4xl
+          select-none
+        "
+      >
         {{ letterPlaceholder }}
       </div>
-      <svg v-else class="w-6 h-6 text-gray-300 dark:text-gray-600" viewBox="0 0 24 21"
-        xmlns="http://www.w3.org/2000/svg">
+      <svg
+        v-else
+        class="w-6 h-6 text-gray-300 dark:text-gray-600"
+        viewBox="0 0 24 21"
+        xmlns="http://www.w3.org/2000/svg"
+      >
         <path
           d="M21 3h-4l-2-3H9L7 3H3a3 3 0 00-3 3v12a3 3 0 003 3h18a3 3 0 003-3V6a3 3 0 00-3-3zm-9 14a5 5 0 110-10 5 5 0 010 10z"
-          fill="currentColor" fill-rule="nonzero" />
+          fill="currentColor"
+          fill-rule="nonzero"
+        />
       </svg>
     </div>
-    <div class="hidden w-full h-full absolute justify-center items-end" :class="[!isReadOnly ? 'group-hover:flex' : '']"
-      style="background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(2px)">
-      <button class="bg-gray-100 dark:bg-gray-800 p-0.5 rounded mb-1" @click="handleClick">
-        <FeatherIcon :name="shouldClear ? 'x' : 'upload'" class="w-4 h-4 text-gray-600 dark:text-gray-400" />
+    <div
+      class="hidden w-full h-full absolute justify-center items-end"
+      :class="[!isReadOnly ? 'group-hover:flex' : '']"
+      style="background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(2px)"
+    >
+      <button
+        class="bg-gray-100 dark:bg-gray-800 p-0.5 rounded mb-1"
+        @click="handleClick"
+      >
+        <FeatherIcon
+          :name="shouldClear ? 'x' : 'upload'"
+          class="w-4 h-4 text-gray-600 dark:text-gray-400"
+        />
       </button>
     </div>
   </div>
diff --git a/src/components/PageHeader.vue b/src/components/PageHeader.vue
index d0bb06c7..067895e7 100644
--- a/src/components/PageHeader.vue
+++ b/src/components/PageHeader.vue
@@ -1,18 +1,43 @@
 <template>
-  <div class="px-4 flex justify-between items-center h-row-largest flex-shrink-0 dark:bg-gray-875" :class="[
-    border ? 'border-b dark:border-gray-800' : '',
-    platform !== 'Windows' ? 'window-drag' : '',
-  ]">
+  <div
+    class="
+      px-4
+      flex
+      justify-between
+      items-center
+      h-row-largest
+      flex-shrink-0
+      dark:bg-gray-875
+    "
+    :class="[
+      border ? 'border-b dark:border-gray-800' : '',
+      platform !== 'Windows' ? 'window-drag' : '',
+    ]"
+  >
     <Transition name="spacer">
-      <div v-if="!showSidebar && platform === 'Mac' && languageDirection !== 'rtl'" class="h-full"
-        :class="spacerClass" />
+      <div
+        v-if="!showSidebar && platform === 'Mac' && languageDirection !== 'rtl'"
+        class="h-full"
+        :class="spacerClass"
+      />
     </Transition>
 
-    <div class="flex items-center window-no-drag gap-4 me-auto"
-      :class="platform === 'Mac' && languageDirection === 'rtl' ? 'me-18' : ''">
+    <div
+      class="flex items-center window-no-drag gap-4 me-auto"
+      :class="platform === 'Mac' && languageDirection === 'rtl' ? 'me-18' : ''"
+    >
       <!-- Nav Group -->
       <PageHeaderNavGroup />
-      <h1 v-if="title" class="text-xl font-semibold select-none whitespace-nowrap dark:text-white">
+      <h1
+        v-if="title"
+        class="
+          text-xl
+          font-semibold
+          select-none
+          whitespace-nowrap
+          dark:text-white
+        "
+      >
         {{ title }}
       </h1>
 
@@ -23,8 +48,10 @@
     </div>
 
     <!-- Right (regular) Slot -->
-    <div class="flex items-stretch window-no-drag gap-2 ms-auto"
-      :class="platform === 'Mac' && languageDirection === 'rtl' ? 'me-18' : ''">
+    <div
+      class="flex items-stretch window-no-drag gap-2 ms-auto"
+      :class="platform === 'Mac' && languageDirection === 'rtl' ? 'me-18' : ''"
+    >
       <slot />
     </div>
   </div>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index c1ecb27e..800c433b 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -107,29 +107,8 @@
       </div>
     </div>
 
-    <!-- Report Issue, DB Switcher and Darkmode Switcher -->
+    <!-- Report Issue and DB Switcher -->
     <div class="window-no-drag flex flex-col gap-2 py-2 px-4">
-      <button
-        class="
-          flex
-          text-sm text-gray-600
-          dark:text-gray-500
-          hover:text-gray-800
-          dark:hover:text-gray-400
-          gap-1
-          items-center
-        "
-        @click="$emit('toggle-darkmode')"
-      >
-        <feather-icon
-          :name="darkMode ? 'sun' : 'moon'"
-          class="h-4 w-4 flex-shrink-0"
-        />
-        <p>
-          {{ t`Dark Mode` }}
-        </p>
-      </button>
-
       <button
         class="
           flex
diff --git a/src/pages/Desk.vue b/src/pages/Desk.vue
index 4b49ed3f..887def8d 100644
--- a/src/pages/Desk.vue
+++ b/src/pages/Desk.vue
@@ -17,7 +17,6 @@ import { toggleSidebar } from 'src/utils/ui';
         "
         :darkMode="darkMode"
         @change-db-file="$emit('change-db-file')"
-        @toggle-darkmode="$emit('toggle-darkmode')"
       />
     </Transition>
 
@@ -89,7 +88,7 @@ export default defineComponent({
   props: {
     darkMode: { type: Boolean, default: false },
   },
-  emits: ['change-db-file', 'toggle-darkmode'],
+  emits: ['change-db-file'],
 });
 </script>
 
diff --git a/src/renderer.ts b/src/renderer.ts
index 4baabc9f..a5e8bb1b 100644
--- a/src/renderer.ts
+++ b/src/renderer.ts
@@ -11,7 +11,6 @@ import registerIpcRendererListeners from './renderer/registerIpcRendererListener
 import router from './router';
 import { stringifyCircular } from './utils';
 import { setLanguageMap } from './utils/language';
-import { setDarkMode } from './utils/theme';
 
 // eslint-disable-next-line @typescript-eslint/no-floating-promises
 (async () => {
@@ -21,8 +20,6 @@ import { setDarkMode } from './utils/theme';
   }
   fyo.store.language = language || 'English';
 
-  setDarkMode();
-
   registerIpcRendererListeners();
   const { isDevelopment, platform, version } = await ipc.getEnv();
 
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
index 0f641439..06607500 100644
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@@ -1,24 +1,4 @@
-import { fyo } from 'src/initFyo';
-
-export function toggleDarkMode(): void {
-  const darkMode = fyo.config.get('darkMode');
-  if (darkMode) {
-    document.documentElement.classList.remove('dark');
-    fyo.config.set('darkMode', false);
-    return;
-  }
-  document.documentElement.classList.add('dark');
-  fyo.config.set('darkMode', true);
-}
-
-export function setDarkMode(): void {
-  let darkMode = fyo.config.get('darkMode');
-
-  /* Fetching system theme */
-  if (darkMode === undefined) {
-    darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    fyo.config.set('darkMode', darkMode);
-  }
+export function setDarkMode(darkMode: boolean): void {
   if (darkMode) {
     document.documentElement.classList.add('dark');
     return;