diff --git a/resources/js/ckeditor/plugins/SnippetBrowser.js b/resources/js/ckeditor/plugins/SnippetBrowser.js
index 4b0407c..439e411 100644
--- a/resources/js/ckeditor/plugins/SnippetBrowser.js
+++ b/resources/js/ckeditor/plugins/SnippetBrowser.js
@@ -79,6 +79,6 @@ export default class SnippetBrowser {
     }
 
     get icon() {
-        return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 502.664 502.664"><path d="M153.821 358.226L0 274.337v-46.463l153.821-83.414v54.574L46.636 250.523l107.185 53.431v54.272zm26.273 29.358L282.103 115.08h32.227L212.084 387.584h-31.99zm168.749-29.358v-54.272l107.164-52.999-107.164-52.59v-53.927l153.821 83.522v46.183l-153.821 84.083z" fill="#000"/></svg>`
+        return `<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 502.664 502.664"><path d="M281.398 117.079c-.489 1.267-23.338 62.246-50.775 135.51-27.437 73.263-50.068 133.685-50.29 134.271-.321.844 2.936 1.019 15.673.838l16.079-.228 50.499-134.462c27.775-73.955 50.768-135.311 51.097-136.348l.597-1.885h-31.99l-.89 2.304M76.656 186.33.419 227.693l-.222 23.354-.222 23.354 75.97 41.455c41.784 22.8 76.474 41.576 77.088 41.725.914.222 1.117-4.632 1.117-26.621v-26.893l-53.648-26.753-53.649-26.754 3.173-1.598c1.745-.879 25.415-12.257 52.601-25.284s49.9-24.056 50.476-24.508c.799-.628 1.047-7.161 1.047-27.529 0-14.688-.282-26.699-.628-26.69-.346.009-34.935 18.63-76.866 41.379m271.858-14.73v26.666l53.717 26.324 53.717 26.323-53.717 26.63-53.717 26.631v26.867c0 25.24.089 26.834 1.466 26.316.806-.303 35.482-19.099 77.057-41.769l75.591-41.217-.192-23.294-.191-23.293-76.237-41.412c-41.931-22.777-76.52-41.418-76.866-41.425-.346-.007-.628 11.987-.628 26.653" fill-rule="evenodd"/></svg>`
     }
 }
diff --git a/resources/js/ckeditor/plugins/element-attribute/src/add-attribute-to-element-ui.js b/resources/js/ckeditor/plugins/element-attribute/src/add-attribute-to-element-ui.js
index b9463de..e8da562 100644
--- a/resources/js/ckeditor/plugins/element-attribute/src/add-attribute-to-element-ui.js
+++ b/resources/js/ckeditor/plugins/element-attribute/src/add-attribute-to-element-ui.js
@@ -153,7 +153,7 @@ class ElementAddAttributesUI extends Plugin {
     }
 
     _pluginIcon() {
-        return '<svg version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="none" style="color: transparent"><path d="M0 0h24v24h-24v-24Z"></path><path stroke="#323232" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 15v-6"></path><path stroke="#323232" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.6 15h-3v-6h3c1.105 0 2 .895 2 2v2c0 1.105-.895 2-2 2Z"></path><path stroke="#323232" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18.353 21.353h-12.706c-1.657 0-3-1.343-3-3v-12.706c0-1.657 1.343-3 3-3h12.705c1.657 0 3 1.343 3 3v12.705c.001 1.658-1.342 3.001-2.999 3.001Z"></path></g></svg>'
+        return '<svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4.88 1.982A3.752 3.752 0 0 0 1.982 4.9c-.058.288-.063 1.013-.053 7.24l.011 6.92.091.293c.404 1.304 1.312 2.212 2.616 2.616l.293.091 6.92.011c7.616.012 7.194.025 7.851-.23 1.204-.468 2.125-1.592 2.326-2.841.059-.361.059-13.639 0-14-.201-1.249-1.123-2.374-2.326-2.84-.652-.253-.234-.24-7.739-.237-5.682.003-6.876.013-7.092.059m14.019 1.479c.335.088.525.181.81.396.323.244.621.645.76 1.023l.111.3v13.64l-.111.3a2.364 2.364 0 0 1-1.349 1.349l-.3.111H5.18l-.3-.111c-.526-.194-1.068-.688-1.284-1.172-.205-.456-.196-.134-.196-7.297 0-7.163-.009-6.841.196-7.297.184-.412.696-.923 1.108-1.108.441-.198.136-.19 7.278-.192 5.885-.003 6.709.004 6.917.058M7.815 8.277a.8.8 0 0 0-.462.354l-.093.149v6.44l.093.149c.357.574 1.223.443 1.363-.207.059-.275.06-6.065.001-6.321a.747.747 0 0 0-.902-.564m3.6-.001a.806.806 0 0 0-.462.355l-.093.149V15.233l.12.17a.965.965 0 0 0 .28.253c.155.082.212.084 1.96.084 1.761 0 1.807-.002 2.12-.092a2.797 2.797 0 0 0 1.908-1.908c.088-.307.092-.376.092-1.74 0-1.364-.004-1.433-.092-1.74a2.81 2.81 0 0 0-1.888-1.904c-.287-.085-.376-.089-2.06-.1-.968-.006-1.816.003-1.885.02m3.639 1.565c.29.109.596.415.705.705.075.201.081.309.081 1.454 0 1.45-.014 1.523-.366 1.874-.351.352-.424.366-1.876.366H12.36V9.76h1.238c1.147 0 1.255.006 1.456.081" fill-rule="evenodd" /></svg>'
     }
 
     get _isVisible() {
diff --git a/resources/js/components/RadioInput.vue b/resources/js/components/RadioInput.vue
index 48a5861..e2d968f 100644
--- a/resources/js/components/RadioInput.vue
+++ b/resources/js/components/RadioInput.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="radio-container">
-        <label v-for="option in options" class="radio" :key="option.value">
+        <label v-for="option in options" class="radio text-gray-600 dark:text-gray-500" :key="option.value">
             {{ option.label }}
 
             <input
@@ -60,7 +60,6 @@ function onChange(e) {
         cursor: pointer;
         font-size: 14px;
         font-weight: 600;
-        color: rgba(var(--colors-gray-600));
         user-select: none;
 
         input {
diff --git a/resources/js/components/media-browser/MediaBrowser.vue b/resources/js/components/media-browser/MediaBrowser.vue
index cc202bc..0cdf219 100644
--- a/resources/js/components/media-browser/MediaBrowser.vue
+++ b/resources/js/components/media-browser/MediaBrowser.vue
@@ -1,7 +1,7 @@
 <template>
     <modal v-model="modalStatus" class="media-browser" :title="__(title)" :content-no-overflow="true">
         <template #header>
-            <span>{{ __('Media Browser') }}</span>
+            <span class="">{{ __('Media Browser') }}</span>
         </template>
 
 
diff --git a/resources/js/components/media-browser/MediaBrowserInfo.vue b/resources/js/components/media-browser/MediaBrowserInfo.vue
index abfd954..2cf8f64 100644
--- a/resources/js/components/media-browser/MediaBrowserInfo.vue
+++ b/resources/js/components/media-browser/MediaBrowserInfo.vue
@@ -1,8 +1,8 @@
 <template>
-    <div v-if="item" class="info h-full nova-ckeditor-mobile-none">
+    <div v-if="item" class="info h-full nova-ckeditor-mobile-none bg-white dark:bg-gray-800 border-l border-gray-100 dark:border-gray-600">
         <div class="flex-grow overflow-y-auto overflow-x-hidden">
             <div class="info__header mb-2">
-                <strong :title="item.name">{{ item.name }}</strong>
+                <strong class="text-gray-500 dark:text-gray-200" :title="item.name">{{ item.name }}</strong>
 
                 <button @click="close" type="button">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
@@ -34,8 +34,10 @@
             </div>
 
             <div class="info__data">
-                <div v-for="item in info" :key="item.label" class="info__data--item">
-                    <span class="info__data--item-label">{{ __(item.label) }}</span>
+                <div v-for="item in info" :key="item.label" class="info__data--item text-gray-500 dark:text-gray-200 border-b border-gray-100 dark:border-gray-700">
+                    <span class="info__data--item-label text-gray-600 dark:text-gray-500">
+                        {{ __(item.label) }}
+                    </span>
 
                     <div class="info__data--item-value">
                         <template v-if="item.label === 'Dominant Color'">
@@ -243,8 +245,6 @@ function secondsToHms(seconds) {
     justify-content: space-between;
     width: 320px;
     padding: 8px 8px 0;
-    background: #fff;
-    border-left: solid 1px rgba(var(--colors-gray-100));
 
     &__header {
         display: flex;
@@ -254,7 +254,6 @@ function secondsToHms(seconds) {
         strong {
             font-size: 18px;
             font-weight: 600;
-            color: rgba(var(--colors-gray-500));
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -294,13 +293,10 @@ function secondsToHms(seconds) {
             align-items: center;
             justify-content: space-between;
             font-size: 14px;
-            color: rgba(var(--colors-gray-500));
-            border-bottom: solid 1px rgba(var(--colors-gray-100));
             height: 36px;
 
             &-label {
                 font-weight: bold;
-                color: rgba(var(--colors-gray-600));
             }
 
             &-value {
diff --git a/resources/js/components/media-browser/MediaBrowserItem.vue b/resources/js/components/media-browser/MediaBrowserItem.vue
index d7b8f65..29eb1b6 100644
--- a/resources/js/components/media-browser/MediaBrowserItem.vue
+++ b/resources/js/components/media-browser/MediaBrowserItem.vue
@@ -1,5 +1,5 @@
 <template>
-    <div @dblclick.stop="pick" @click.stop="select(true)" class="item" :class="{selected: isSelected}">
+    <div @dblclick.stop="pick" @click.stop="select(true)" class="item bg-white dark:bg-gray-800" :class="{selected: isSelected}">
         <figure class="item__preview">
             <figcaption class="item__preview--format">{{ format }}</figcaption>
 
@@ -40,7 +40,7 @@
             </figcaption>
         </figure>
 
-        <div class="item__details">
+        <div class="item__details border-t border-gray-200 dark:border-gray-700">
             <span class="item__details--name" :title="item.name">{{ item.name }}</span>
 
             <button @click.stop.prevent="select(false)" type="button" class="item__details--select">
@@ -148,7 +148,6 @@ function play() {
 .item {
     position: relative;
     display: block;
-    background-color: white;
     box-shadow: 0 0 4px 2px rgba(46, 49, 56, 0.15);
     border: 1px solid transparent;
     overflow: hidden;
@@ -219,7 +218,6 @@ function play() {
     }
 
     &__details {
-        border-top: 1px solid rgba(46, 49, 56, 0.15);
         display: flex;
         align-items: center;
         justify-content: space-between;
diff --git a/resources/js/components/media-browser/MediaBrowserList.vue b/resources/js/components/media-browser/MediaBrowserList.vue
index 392e6c8..bbdfa45 100644
--- a/resources/js/components/media-browser/MediaBrowserList.vue
+++ b/resources/js/components/media-browser/MediaBrowserList.vue
@@ -1,6 +1,6 @@
 <template>
     <transition name="fade">
-        <div v-if="loading" class="loading" />
+        <div v-if="loading" class="loading bg-white/75 dark:bg-gray-800/75" />
     </transition>
 
 
@@ -180,7 +180,6 @@ fetch(props.page)
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(255, 255, 255, 0.5);
     z-index: 10;
 }
 
diff --git a/resources/js/components/media-browser/MediaBrowserNavbar.vue b/resources/js/components/media-browser/MediaBrowserNavbar.vue
index 0982347..c764dec 100644
--- a/resources/js/components/media-browser/MediaBrowserNavbar.vue
+++ b/resources/js/components/media-browser/MediaBrowserNavbar.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="navbar">
+    <div class="navbar bg-white dark:bg-gray-800">
         <div class="inline-flex items-center gap-1 nova-ckeditor-mobile-none">
             <button
                 @click.stop="download"
@@ -214,7 +214,6 @@ init()
     position: relative;
     width: 100%;
     height: 52px;
-    background-color: white;
     display: flex;
     align-items: center;
     justify-content: space-between;
diff --git a/resources/js/components/media-browser/MediaBrowserPagination.vue b/resources/js/components/media-browser/MediaBrowserPagination.vue
index 13d2977..d4f7b1f 100644
--- a/resources/js/components/media-browser/MediaBrowserPagination.vue
+++ b/resources/js/components/media-browser/MediaBrowserPagination.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="pagination">
+    <div class="pagination bg-white dark:bg-gray-800">
         <div v-if="loading" class="loading">
             <div class="indeterminate"></div>
         </div>
@@ -31,6 +31,7 @@
                 v-model.number="inputPage"
                 @select.stop.prevent
                 type="number"
+                class="border-b border-gray-200 dark:border-gray-600"
                 :title="__('Enter Page Number')"
                 min="1"
                 :max="total"
@@ -138,7 +139,6 @@ function pick() {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: white;
     height: 50px;
     box-shadow: 0 0 6px rgba(46, 49, 56, 0.05);
     z-index: 100;
@@ -175,10 +175,9 @@ function pick() {
         text-align: center;
         width: 32px;
         outline: none;
-        border: none;
         appearance: textfield;
-        border-bottom: solid 1px rgba(var(--colors-gray-200));
         margin-bottom: -2px;
+        background: transparent;
 
         &::-webkit-outer-spin-button,
         &::-webkit-inner-spin-button {
diff --git a/resources/js/components/media-browser/MediaBrowserRenameModal.vue b/resources/js/components/media-browser/MediaBrowserRenameModal.vue
index 6bc6dc6..36e88dc 100644
--- a/resources/js/components/media-browser/MediaBrowserRenameModal.vue
+++ b/resources/js/components/media-browser/MediaBrowserRenameModal.vue
@@ -14,7 +14,7 @@
                     @select.stop.prevent
                     v-model="name"
                     ref="input"
-                    class="rename-modal__input flex-grow"
+                    class="rename-modal__input flex-grow bg-transparent"
                 />
             </div>
         </template>
diff --git a/resources/js/components/media-browser/MediaBrowserSearchModal.vue b/resources/js/components/media-browser/MediaBrowserSearchModal.vue
index f3d9648..aa33177 100644
--- a/resources/js/components/media-browser/MediaBrowserSearchModal.vue
+++ b/resources/js/components/media-browser/MediaBrowserSearchModal.vue
@@ -20,15 +20,17 @@
 
 
         <div class="p-3 overflow-x-hidden">
-            <span class="search-modal__history--label">{{ __('Recent searches') }}:</span>
+            <span class="search-modal__history--label text-gray-500 dark:text-gray-400">
+                {{ __('Recent searches') }}:
+            </span>
 
             <div
                 v-for="(item, index) in reverseHistory"
                 @click.stop="select(index)"
-                class="search-modal__history--item flex items-center justify-between"
+                class="search-modal__history--item flex items-center justify-between hover:bg-gray-200 dark:hover:bg-gray-800"
                 :key="index"
             >
-                <span>{{ item }}</span>
+                <span class="text-gray-500 dark:text-gray-400">{{ item }}</span>
 
                 <button
                     @click.stop="deleteItemFromHistory(index)"
@@ -156,12 +158,12 @@ initHistory()
         outline: none;
         //width: 300px;
         height: 30px;
+        background: transparent;
     }
 
     .search-modal__history {
         &--label {
             display: block;
-            color: rgba(var(--colors-gray-500));
             font-size: 14px;
             margin-bottom: 12px;
         }
@@ -174,7 +176,6 @@ initHistory()
             border-radius: 6px;
 
             & > span {
-                color: rgba(var(--colors-gray-500));
                 font-size: 16px;
                 white-space: nowrap;
                 overflow: hidden;
@@ -197,8 +198,6 @@ initHistory()
             }
 
             &:hover {
-                background: rgba(var(--colors-gray-200));
-
                 & > button {
                     opacity: 1;
                 }
diff --git a/resources/js/components/media-browser/MediaBrowserTypeList.vue b/resources/js/components/media-browser/MediaBrowserTypeList.vue
index 87f2fb9..e7b6549 100644
--- a/resources/js/components/media-browser/MediaBrowserTypeList.vue
+++ b/resources/js/components/media-browser/MediaBrowserTypeList.vue
@@ -1,10 +1,10 @@
 <template>
-    <div class="browser-list" :class="{'is-extended': extended}">
+    <div class="browser-list bg-white dark:bg-gray-800 border-r border-gray-100 dark:border-gray-600" :class="{'is-extended': extended}">
         <div>
             <div
                 v-if="hasImagePicker"
                 @click="select('image')"
-                class="browser-list__item"
+                class="browser-list__item text-gray-500 dark:text-gray-200"
                 :class="{selected: modelValue === 'image'}"
                 :title="__('Images')"
             >
@@ -16,7 +16,7 @@
             <div
                 v-if="hasVideoPicker"
                 @click="select('video')"
-                class="browser-list__item"
+                class="browser-list__item text-gray-500 dark:text-gray-200"
                 :class="{selected: modelValue === 'video'}"
                 :title="__('Videos')"
             >
@@ -28,7 +28,7 @@
             <div
                 v-if="hasAudioPicker"
                 @click="select('audio')"
-                class="browser-list__item"
+                class="browser-list__item text-gray-500 dark:text-gray-200"
                 :class="{selected: modelValue === 'audio'}"
                 :title="__('Audios')"
             >
@@ -40,7 +40,7 @@
             <div
                 v-if="hasFilePicker"
                 @click="select('file')"
-                class="browser-list__item"
+                class="browser-list__item text-gray-500 dark:text-gray-200"
                 :class="{selected: modelValue === 'file'}"
                 :title="__('Files')"
             >
@@ -51,7 +51,7 @@
         </div>
 
         <div class="browser-list__toggle-sidebar">
-            <button type="button" @click.stop.prevent="toggle">
+            <button type="button" class="hover:bg-gray-100 dark:hover:bg-gray-700" @click.stop.prevent="toggle">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.59 18 19 16.59 14.42 12 19 7.41 17.59 6l-6 6z"></path><path d="m11 18 1.41-1.41L7.83 12l4.58-4.59L11 6l-6 6z"></path></svg>
             </button>
         </div>
@@ -138,8 +138,6 @@ function pick() {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    background: #fff;
-    border-right: solid 1px rgba(var(--colors-gray-100));
 
     &__item {
         display: flex;
@@ -148,7 +146,6 @@ function pick() {
         gap: 14px;
         height: 48px;
         font-size: 14px;
-        color: rgba(var(--colors-gray-500));
         padding: 0 16px;
         transition: all 300ms, border-left-width 100ms;
         cursor: pointer;
@@ -201,8 +198,6 @@ function pick() {
             }
 
             &:hover {
-                background: rgba(var(--colors-gray-100));
-
                 svg {
                     fill: rgba(var(--colors-gray-800));
                 }
diff --git a/resources/js/components/modal.vue b/resources/js/components/modal.vue
index 143d0d9..3545fa6 100755
--- a/resources/js/components/modal.vue
+++ b/resources/js/components/modal.vue
@@ -1,5 +1,5 @@
 <template>
-    <div ref="modal" class="absolute">
+    <div ref="modal" class="absolute text-gray-500 dark:text-gray-200">
         <transition name="editorModal" mode="out-in">
             <div
                 v-if="modelValue"
@@ -9,10 +9,10 @@
                 :class="{
                     'modal-is-active': modelValue,
                     'full-screen-modal w-screen h-screen top-0 left-0 w-full': fullscreen,
-                    'centered-modal rounded-lg shadow-lg border': !fullscreen
+                    'centered-modal rounded-lg shadow-lg border border-gray-200 dark:border-gray-600': !fullscreen
                 }"
             >
-                <div class="modal__header flex-0 flex items-center px-3 py-2 bg-white border-b border-primary-10%">
+                <div class="modal__header flex-0 flex items-center px-3 py-2 bg-white dark:bg-gray-800 border-b border-primary-10% dark:border-gray-600">
                     <div v-if="title" class="flex-0 text-gray-400 pl-2">
                         <h2 class="self-center text-primary-600 text-base font-semibold">{{ title }}</h2>
                     </div>
@@ -23,8 +23,8 @@
 
                     <div class="flex-0 flex items-center" :class="{'pr-2': title}">
                         <slot name="header-right">
-                            <button @click.prevent="$emit('update:modelValue',false)" class="h-5 w-5 m-0 cursor-pointer text-primary-400">
-                                <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-testid="CloseOutlined-icon" class="ckbox-icon ckbox-icon--base ckbox-btn__icon">
+                            <button @click.prevent="$emit('update:modelValue',false)" class="h-5 w-5 m-0 cursor-pointer text-primary-400 text-gray-900 dark:text-gray-400">
+                                <svg focusable="false" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" data-testid="CloseOutlined-icon" class="ckbox-icon ckbox-icon--base ckbox-btn__icon">
                                     <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path>
                                 </svg>
                             </button>
@@ -33,13 +33,13 @@
                 </div>
 
                 <div
-                    class="flex-1 w-full bg-grad-sidebar modal-content"
+                    class="flex-1 w-full bg-grad-sidebar dark:bg-gray-700 modal-content"
                     :style="{'overflow-y': contentNoOverflow ? 'hidden' : 'scroll'}"
                 >
                     <slot name="default"/>
                 </div>
 
-                <div class="modal-footer flex-0 w-full bg-logo border-t border-gray-300 p-2" v-if="hasSlot('footer')">
+                <div class="modal-footer flex-0 w-full bg-logo border-t border-gray-300 dark:border-gray-500 p-2" v-if="hasSlot('footer')">
                     <slot name="footer"/>
                 </div>
             </div>
diff --git a/resources/js/components/snippet-browser/SnippetBrowserFooter.vue b/resources/js/components/snippet-browser/SnippetBrowserFooter.vue
index a379e12..8ada52c 100644
--- a/resources/js/components/snippet-browser/SnippetBrowserFooter.vue
+++ b/resources/js/components/snippet-browser/SnippetBrowserFooter.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="footer px-3">
+    <div class="footer px-3 bg-white dark:bg-gray-800">
         <default-button
             @click.stop="$emit('pick')"
             type="button"
@@ -34,7 +34,6 @@ const props = defineProps({
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    background: white;
     height: 50px;
     box-shadow: 0 0 6px rgba(46, 49, 56, 0.05);
     z-index: 100;
diff --git a/resources/js/components/snippet-browser/SnippetBrowserTypeList.vue b/resources/js/components/snippet-browser/SnippetBrowserTypeList.vue
index fa17708..a724e9c 100644
--- a/resources/js/components/snippet-browser/SnippetBrowserTypeList.vue
+++ b/resources/js/components/snippet-browser/SnippetBrowserTypeList.vue
@@ -1,13 +1,13 @@
 <template>
-    <div class="browser-list">
+    <div class="browser-list bg-white dark:bg-gray-800 border-r border-gray-100 dark:border-gray-600">
         <div
             v-for="(snippet, key) in snippets"
             @click="select(key)"
-            class="browser-list__item"
+            class="browser-list__item text-gray-500 dark:text-gray-200"
             :class="{selected: modelValue.name === snippet.name}"
             :key="snippet.name"
         >
-                <span class="browser-list__item--icon">
+                <span class="browser-list__item--icon bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400">
                     {{ snippet.name.split(' ').map(name => name[0]).join('') }}
                 </span>
 
@@ -62,8 +62,6 @@ function select(key) {
 <style lang="scss" scoped>
 .browser-list {
     min-width: 200px;
-    background: #fff;
-    border-right: solid 1px rgba(var(--colors-gray-100));
 
     &__item {
         display: flex;
@@ -72,7 +70,6 @@ function select(key) {
         gap: 14px;
         height: 48px;
         font-size: 14px;
-        color: rgba(var(--colors-gray-500));
         padding: 0 16px;
         transition: all 300ms, border-left-width 100ms;
         cursor: pointer;
@@ -84,8 +81,6 @@ function select(key) {
             width: 32px;
             height: 32px;
             border-radius: 50%;
-            background: rgba(var(--colors-gray-100));
-            color: rgba(var(--colors-gray-500));
             font-weight: 600;
             transition: all 300ms;
         }
diff --git a/resources/sass/field.sass b/resources/sass/field.sass
index 7ae94d7..e599539 100755
--- a/resources/sass/field.sass
+++ b/resources/sass/field.sass
@@ -142,10 +142,216 @@ input
 .ck-character-grid__tiles
     display: grid
     grid-template-columns: repeat(10, 1fr)
-    height: 200px!important
+    height: 200px !important
     overflow-y: auto
 
 
 @media (max-width: 800px)
     .nova-ckeditor-mobile-none
         display: none !important
+
+
+//
+// DARK THEME
+//
+
+:root
+    &.dark
+        /* Overrides the border radius setting in the theme. */
+        // --ck-border-radius: 4px
+
+        /* Overrides the default font size in the theme. */
+        // --ck-font-size-base: 14px
+
+        /* Helper variables to avoid duplication in the colors. */
+        --ck-custom-background: rgba(var(--colors-gray-950))
+        --ck-custom-foreground: rgba(var(--colors-gray-800))
+        --ck-custom-border: rgba(var(--colors-gray-100), 0.1)
+        // --ck-custom-white: hsl(0, 0%, 100%)
+        --ck-color-base-background: rgba(var(--colors-gray-900))
+        --ck-color-base-border: rgba(var(--colors-gray-100), 0.1)
+        --ck-show-blocks-border-color: rgba(var(--colors-gray-700))
+
+        /* -- Overrides generic colors. ------------------------------------------------------------- */
+
+        --ck-color-base-foreground: var(--ck-custom-background)
+        --ck-color-focus-border: rgba(var(--colors-gray-100), 0.1)
+        --ck-color-text: rgba(var(--colors-gray-400))
+        --ck-color-shadow-drop: var(--ck-custom-background)
+        --ck-color-shadow-inner: var(--ck-custom-background)
+
+        /* -- Overrides the default .ck-button class colors. ---------------------------------------- */
+
+        --ck-color-button-default-background: var(--ck-custom-background)
+        --ck-color-button-default-hover-background: rgba(var(--colors-gray-800))
+        --ck-color-button-default-active-background: rgba(var(--colors-gray-700))
+        --ck-color-button-default-active-shadow: rgba(var(--colors-gray-800))
+        --ck-color-button-default-disabled-background: var(--ck-custom-background)
+
+        --ck-color-button-on-background: var(--ck-custom-foreground)
+        --ck-color-button-on-hover-background: rgba(var(--colors-gray-800))
+        --ck-color-button-on-active-background: rgba(var(--colors-gray-700))
+        --ck-color-button-on-active-shadow: rgba(var(--colors-gray-800))
+        --ck-color-button-on-disabled-background: var(--ck-custom-foreground)
+
+        --ck-color-button-action-background: rgba(var(--colors-green-600))
+        --ck-color-button-action-hover-background: rgba(var(--colors-green-500))
+        --ck-color-button-action-active-background: rgba(var(--colors-green-400))
+        --ck-color-button-action-active-shadow: rgba(var(--colors-green-300))
+        --ck-color-button-action-disabled-background: rgba(var(--colors-green-400))
+        --ck-color-button-action-text: var(--ck-custom-white)
+
+        --ck-color-button-save: rgba(var(--colors-green-500))
+        --ck-color-button-cancel: rgba(var(--colors-red-500))
+        --ck-focus-outer-shadow: none
+
+        /* -- Overrides the default .ck-dropdown class colors. -------------------------------------- */
+
+        --ck-color-dropdown-panel-background: var(--ck-custom-background)
+        --ck-color-dropdown-panel-border: var(--ck-custom-foreground)
+
+        /* -- Overrides the default .ck-dialog class colors. ----------------------------------- */
+
+        --ck-color-dialog-background: var(--ck-custom-background)
+        --ck-color-dialog-form-header-border: var(--ck-custom-border)
+
+        /* -- Overrides the default .ck-splitbutton class colors. ----------------------------------- */
+
+        --ck-color-split-button-hover-background: var(--ck-color-button-default-hover-background)
+        --ck-color-split-button-hover-border: var(--ck-custom-foreground)
+
+        /* -- Overrides the default .ck-input class colors. ----------------------------------------- */
+
+        --ck-color-input-background: var(--ck-custom-background)
+        --ck-color-input-border: hsl(257, 3%, 43%)
+        --ck-color-input-text: hsl(0, 0%, 98%)
+        --ck-color-input-disabled-background: hsl(255, 4%, 21%)
+        --ck-color-input-disabled-border: hsl(250, 3%, 38%)
+        --ck-color-input-disabled-text: hsl(0, 0%, 78%)
+
+        /* -- Overrides the default .ck-labeled-field-view class colors. ---------------------------- */
+
+        --ck-color-labeled-field-label-background: var(--ck-custom-background)
+
+        /* -- Overrides the default .ck-list class colors. ------------------------------------------ */
+
+        --ck-color-list-background: var(--ck-custom-background)
+        --ck-color-list-button-hover-background: rgba(var(--colors-gray-900))
+        --ck-color-list-button-on-background: rgba(var(--colors-gray-800))
+        --ck-color-list-button-on-background-focus: rgba(var(--colors-gray-700))
+        --ck-color-list-button-on-text: rgba(var(--colors-gray-300))
+
+        /* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
+
+        --ck-color-panel-background: var(--ck-custom-background)
+        --ck-color-panel-border: var(--ck-custom-border)
+
+        /* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */
+
+        --ck-color-toolbar-background: var(--ck-custom-background)
+        --ck-color-toolbar-border: var(--ck-custom-border)
+
+        /* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */
+
+        --ck-color-tooltip-background: hsl(252, 7%, 14%)
+        --ck-color-tooltip-text: hsl(0, 0%, 93%)
+
+        /* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */
+
+        --ck-color-image-caption-background: hsl(0, 0%, 97%)
+        --ck-color-image-caption-text: hsl(0, 0%, 20%)
+
+        /* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */
+
+        --ck-color-widget-blurred-border: rgba(var(--colors-primary-700))
+        --ck-color-widget-hover-border: rgba(var(--colors-primary-600))
+        --ck-color-widget-editable-focus-background: var(--ck-custom-white)
+
+        /* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
+
+        --ck-color-link-default: rgba(var(--colors-primary-600))
+
+        /* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
+        --ck-powered-by-text-color: rgba(var(--colors-gray-100))
+        --ck-powered-by-border-radius: var(--ck-border-radius)
+        --ck-powered-by-background: rgba(var(--colors-gray-600))
+        --ck-powered-by-border-color: var(--ck-color-focus-border)
+
+
+        .pagination__button
+            svg
+                fill: rgba(var(--colors-gray-500)) !important
+
+            &:hover:not(:disabled)
+                background: rgba(var(--colors-gray-700))
+
+                svg
+                    fill: rgba(var(--colors-gray-200)) !important
+
+
+        .browser-list__item:hover
+            .browser-list__item--icon
+                background: rgba(var(--colors-gray-800)) !important
+
+        .item__details--select
+            svg
+                color: rgba(var(--colors-gray-500)) !important
+
+            &:hover:not(:disabled)
+                background: rgba(var(--colors-gray-700))
+
+                svg
+                    color: rgba(var(--colors-gray-200)) !important
+
+
+        .media-browser-btn
+            &:hover:not(:disabled)
+                background: rgba(var(--colors-gray-700))
+
+        .browser-list__item
+            svg
+                fill: rgba(var(--colors-gray-500)) !important
+
+            &:hover
+                background: rgba(var(--colors-gray-700))
+                color: rgba(var(--colors-gray-200))
+
+                fill: rgba(var(--colors-gray-200)) !important
+
+
+        .info__header
+            button
+                &:hover
+                    background: rgba(var(--colors-gray-700))
+
+                svg
+                    fill: rgba(var(--colors-gray-500)) !important
+
+        .ck-source-editing-area
+            textarea
+                background-color: rgba(var(--colors-gray-900)) !important
+
+        .ck-code_selected,
+        hr
+            background-color: var(--ck-custom-foreground) !important
+
+        blockquote
+            border-left-color: rgba(var(--colors-gray-950)) !important
+            background-color: rgba(var(--colors-gray-800)) !important
+
+
+        figure.media,
+            figure.image
+                background-color: var(--ck-custom-foreground) !important
+                border-color: var(--ck-custom-foreground) !important
+
+
+        figure.table
+            table
+                background-color: transparent !important
+                border-color: rgba(var(--colors-gray-500)) !important
+
+
+                tbody
+                    th, td
+                        border-color: rgba(var(--colors-gray-600)) !important