Skip to content

Commit

Permalink
Merge pull request #1 from rahmanramsi/fix-dark-mode
Browse files Browse the repository at this point in the history
Improve dark mode
  • Loading branch information
rahmanramsi authored Jun 18, 2022
2 parents 22027b9 + 3329752 commit 720e106
Show file tree
Hide file tree
Showing 6 changed files with 589 additions and 427 deletions.
13 changes: 13 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"@editorjs/raw": "^2.3.1",
"@tailwindcss/typography": "^0.5.2",
"autoprefixer": "^10.4.7",
"editorjs-drag-drop": "^1.1.2",
"editorjs-style": "^3.0.3",
"editorjs-undo": "^1.0.1",
"laravel-mix": "^6.0.49",
Expand Down
51 changes: 42 additions & 9 deletions resources/css/editor.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Loading

0 comments on commit 720e106

Please sign in to comment.