Merge pull request #143 from mostafaznv/dev

feat: dark mode #138

Author: mostafaznv

dist/css/field.css

@@ -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>`
     }
 }

dist/js/field.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() {

resources/js/ckeditor/plugins/SnippetBrowser.js

@@ -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 {

resources/js/ckeditor/plugins/element-attribute/src/add-attribute-to-element-ui.js

@@ -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>
 
 

resources/js/components/RadioInput.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 {

resources/js/components/media-browser/MediaBrowser.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;

resources/js/components/media-browser/MediaBrowserInfo.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;
 }
 

resources/js/components/media-browser/MediaBrowserItem.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;

resources/js/components/media-browser/MediaBrowserList.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 {

resources/js/components/media-browser/MediaBrowserNavbar.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>

resources/js/components/media-browser/MediaBrowserPagination.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;
                 }

resources/js/components/media-browser/MediaBrowserRenameModal.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));
                 }

resources/js/components/media-browser/MediaBrowserSearchModal.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>

resources/js/components/media-browser/MediaBrowserTypeList.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;