improve dark mode

rahmanramsi · Jun 18, 2022 · 3329752 · 3329752
1 parent 83833ba
commit 3329752
Show file tree

Hide file tree

Showing 2 changed files with 475 additions and 342 deletions.
diff --git a/resources/css/editor.css b/resources/css/editor.css
@@ -3,36 +3,69 @@
 /* @tailwind utilities; */
 
 .editorjs-wrapper {
-    @apply border rounded-lg relative bg-white shadow-sm prose prose-sm dark:prose-invert border-gray-300 mx-auto dark:bg-gray-700 dark:border-gray-600;
-    max-width: unset;
+  @apply border rounded-lg relative bg-white shadow-sm prose prose-sm dark:prose-invert border-gray-300 mx-auto dark:bg-gray-700 dark:border-gray-600;
+  max-width: unset;
 }
 
 .codex-editor__redactor {
-    @apply px-3 py-2;
+  @apply px-3 py-2;
 }
 
 .ce-block__content,
 .ce-toolbar__content {
-    max-width: unset; /* example value, adjust for your own use case */
+  max-width: unset; /* example value, adjust for your own use case */
 }
 
 .ce-toolbar__plus,
 .ce-toolbar__settings-btn {
-    @apply dark:text-gray-300 dark:hover:bg-gray-700;
+  @apply dark:text-gray-300 dark:hover:bg-gray-500;
 }
 
 .ce-popover {
-    @apply dark:bg-gray-800 dark:border-gray-600;
+  @apply dark:bg-gray-800 dark:border-gray-600;
 }
 
 .ce-popover__item-icon {
-    @apply dark:bg-gray-600;
+  @apply dark:bg-gray-800;
 }
 
 .ce-popover__item {
-    @apply dark:hover:bg-gray-500;
+  @apply dark:hover:bg-gray-500;
 }
 
 .ce-code__textarea {
-    @apply dark:bg-gray-500 dark:text-white;
+  @apply dark:bg-gray-800 dark:text-white;
+}
+
+.ce-settings {
+  @apply dark:bg-gray-800 dark:text-white dark:border-gray-500;
+}
+
+.ce-settings__button,
+.cdx-settings-button {
+  @apply dark:text-white dark:hover:bg-gray-500;
+}
+
+.cdx-search-field__icon .icon {
+  @apply dark:text-white;
+}
+
+.cdx-search-field__input {
+  @apply dark:text-white dark:placeholder:text-gray-400;
+}
+
+.ce-popover__no-found {
+  @apply dark:text-gray-400;
+}
+
+.ce-inline-toolbar {
+  @apply dark:bg-gray-800 dark:border-gray-600;
+}
+
+.ce-inline-tool {
+  @apply dark:text-white dark:hover:bg-gray-500;
+}
+
+.ce-inline-tool-input {
+  @apply block w-full transition duration-75 focus:ring-1 focus:ring-inset disabled:opacity-70 dark:bg-gray-700 dark:text-white border-gray-300 dark:border-gray-600;
 }