From c09a617f3ca7e71cf69a7cdf62675a3ae1506c7d Mon Sep 17 00:00:00 2001 From: Jack McDade Date: Mon, 20 May 2024 12:19:14 -0400 Subject: [PATCH] [5.x] Dark Mode (#10117) Co-authored-by: Peiman Nourani Co-authored-by: Jason Varga --- resources/css/components/array.css | 14 +-- resources/css/components/assets.css | 14 +-- resources/css/components/blueprints.css | 12 +- resources/css/components/cards.css | 1 + .../css/components/fieldtypes/assets.css | 2 +- resources/css/components/fieldtypes/bard.css | 52 ++++---- resources/css/components/fieldtypes/code.css | 13 +- resources/css/components/fieldtypes/grid.css | 10 +- .../css/components/fieldtypes/markdown.css | 33 ++--- .../css/components/fieldtypes/replicator.css | 8 +- .../css/components/fieldtypes/section.css | 3 +- resources/css/components/fieldtypes/table.css | 20 +-- .../css/components/fieldtypes/textarea.css | 6 +- resources/css/components/fieldtypes/video.css | 2 +- resources/css/components/fieldtypes/width.css | 12 +- resources/css/components/global-header.css | 35 ++++-- resources/css/components/items.css | 19 ++- resources/css/components/modal.css | 2 +- resources/css/components/nav-main.css | 18 ++- resources/css/components/notifications.css | 12 +- resources/css/components/page-tree.css | 19 ++- resources/css/components/pagination.css | 12 +- resources/css/components/popover.css | 4 +- resources/css/components/preview.css | 15 ++- resources/css/components/publish.css | 2 +- resources/css/components/revisions.css | 12 +- resources/css/components/settings.css | 2 +- resources/css/components/tabs.css | 20 +-- resources/css/components/toggle.css | 19 +-- resources/css/core/layout.css | 2 +- resources/css/core/typography.css | 11 +- resources/css/core/utilities.css | 11 +- resources/css/dark.css | 39 ++++++ resources/css/elements/badges.css | 16 +-- resources/css/elements/buttons.css | 58 +++++++-- resources/css/elements/dropdowns.css | 6 +- resources/css/elements/forms.css | 58 ++++++--- resources/css/elements/icons.css | 50 +++++++- resources/css/elements/tables.css | 118 ++++++++++++------ resources/css/tailwind.css | 1 + resources/css/vendors/codemirror.css | 18 +-- resources/css/vendors/vue-select.css | 25 ++-- resources/js/app.js | 2 + resources/js/components/AddonList.vue | 10 +- resources/js/components/Breadcrumb.vue | 2 +- resources/js/components/DarkModeToggle.vue | 73 +++++++++++ resources/js/components/FavoriteCreator.vue | 4 +- resources/js/components/GlobalSearch.vue | 8 +- .../js/components/GlobalSiteSelector.vue | 4 +- resources/js/components/LoadingGraphic.vue | 2 +- resources/js/components/Popover.vue | 2 +- resources/js/components/UpdatesBadge.vue | 2 +- .../components/asset-containers/EditForm.vue | 2 +- .../components/assets/Browser/Breadcrumbs.vue | 2 +- .../js/components/assets/Editor/Editor.vue | 36 +++--- .../assets/Editor/FocalPointEditor.vue | 2 +- resources/js/components/assets/Selector.vue | 4 +- resources/js/components/assets/Upload.vue | 2 +- resources/js/components/assets/Uploads.vue | 2 +- .../js/components/blueprints/ImportField.vue | 8 +- .../js/components/blueprints/LinkFields.vue | 20 +-- .../js/components/blueprints/RegularField.vue | 16 +-- .../js/components/blueprints/Section.vue | 14 +-- resources/js/components/blueprints/Tab.vue | 2 +- .../js/components/collections/CreateForm.vue | 2 +- .../js/components/data-list/BulkActions.vue | 4 +- .../js/components/data-list/ColumnPicker.vue | 12 +- .../js/components/data-list/FieldFilter.vue | 6 +- resources/js/components/data-list/Filter.vue | 6 +- resources/js/components/data-list/Filters.vue | 4 +- resources/js/components/data-list/Search.vue | 2 +- resources/js/components/data-list/Table.vue | 2 +- resources/js/components/entries/Listing.vue | 2 +- .../js/components/entries/PublishActions.vue | 4 +- .../js/components/entries/PublishForm.vue | 14 +-- .../components/field-conditions/Builder.vue | 2 +- .../components/field-conditions/Condition.vue | 4 +- .../components/fields/FieldtypeSelector.vue | 18 +-- .../js/components/fields/ImportSettings.vue | 8 +- resources/js/components/fields/Settings.vue | 10 +- .../js/components/fieldsets/CreateForm.vue | 2 +- .../components/fieldtypes/CodeFieldtype.vue | 2 +- .../components/fieldtypes/ColorFieldtype.vue | 2 +- .../components/fieldtypes/GroupFieldtype.vue | 4 +- .../components/fieldtypes/IconFieldtype.vue | 4 +- .../components/fieldtypes/RangeFieldtype.vue | 4 +- .../components/fieldtypes/VideoFieldtype.vue | 2 +- .../components/fieldtypes/assets/AssetRow.vue | 6 +- .../fieldtypes/assets/AssetsFieldtype.vue | 2 +- .../fieldtypes/bard/BardFieldtype.vue | 2 +- .../js/components/fieldtypes/bard/Image.vue | 4 +- .../fieldtypes/bard/LinkToolbar.vue | 16 +-- .../js/components/fieldtypes/bard/Set.vue | 6 +- .../fieldtypes/date/RangeInline.vue | 5 + .../fieldtypes/date/RangePopover.vue | 9 +- .../fieldtypes/date/SingleInline.vue | 5 + .../fieldtypes/date/SinglePopover.vue | 7 +- .../js/components/fieldtypes/grid/Grid.vue | 4 +- .../js/components/fieldtypes/grid/Stacked.vue | 4 +- .../components/fieldtypes/grid/StackedRow.vue | 2 +- .../fieldtypes/markdown/MarkdownFieldtype.vue | 2 +- .../fieldtypes/replicator/AddSetButton.vue | 4 +- .../fieldtypes/replicator/Replicator.vue | 18 +-- resources/js/components/forms/CreateForm.vue | 2 +- .../js/components/forms/SubmissionListing.vue | 2 +- resources/js/components/globals/Create.vue | 2 +- resources/js/components/globals/EditForm.vue | 2 +- .../js/components/globals/PublishForm.vue | 4 +- .../inputs/relationship/CreateButton.vue | 2 +- .../inputs/relationship/InlinePublishForm.vue | 2 +- .../inputs/relationship/RelationshipInput.vue | 2 +- .../inputs/relationship/Selector.vue | 16 +-- .../components/live-preview/LivePreview.vue | 2 +- .../components/modals/ConfirmationModal.vue | 8 +- resources/js/components/nav/Branch.vue | 2 +- resources/js/components/nav/ItemEditor.vue | 4 +- resources/js/components/nav/SectionEditor.vue | 4 +- .../js/components/navigation/CreateForm.vue | 2 +- .../js/components/navigation/EditForm.vue | 2 +- resources/js/components/navigation/View.vue | 24 ++-- .../components/revision-history/History.vue | 6 +- .../components/revision-history/Revision.vue | 2 +- .../js/components/roles/PermissionTree.vue | 4 +- resources/js/components/roles/PublishForm.vue | 4 +- resources/js/components/structures/Branch.vue | 8 +- .../js/components/structures/PageEditor.vue | 10 +- .../js/components/taxonomies/CreateForm.vue | 2 +- resources/js/components/terms/Listing.vue | 2 +- .../js/components/terms/PublishActions.vue | 4 +- resources/js/components/terms/PublishForm.vue | 6 +- .../js/components/users/ChangePassword.vue | 2 +- resources/js/components/users/Listing.vue | 2 +- resources/svg/icons/regular/dark-mode.svg | 2 +- resources/svg/icons/regular/light-mode.svg | 1 + resources/svg/icons/regular/system.svg | 1 + .../collections/blueprints/create.blade.php | 2 +- resources/views/collections/empty.blade.php | 24 ++-- resources/views/forms/show.blade.php | 4 +- resources/views/forms/widget.blade.php | 4 +- resources/views/layout.blade.php | 2 +- resources/views/licensing.blade.php | 16 +-- resources/views/nav/duplicates.blade.php | 2 +- resources/views/partials/breadcrumb.blade.php | 2 +- .../views/partials/docs-callout.blade.php | 2 +- .../views/partials/global-header.blade.php | 20 +-- resources/views/partials/head.blade.php | 8 ++ resources/views/playground.blade.php | 29 ++++- .../taxonomies/blueprints/create.blade.php | 2 +- resources/views/taxonomies/empty.blade.php | 18 +-- resources/views/utilities/cache.blade.php | 40 +++--- resources/views/utilities/git.blade.php | 16 +-- resources/views/utilities/index.blade.php | 4 +- resources/views/utilities/search.blade.php | 2 +- resources/views/widgets/collection.blade.php | 4 +- .../views/widgets/getting-started.blade.php | 32 ++--- src/Auth/User.php | 5 + tailwind.config.js | 36 ++++++ 157 files changed, 1049 insertions(+), 604 deletions(-) create mode 100644 resources/css/dark.css create mode 100644 resources/js/components/DarkModeToggle.vue create mode 100644 resources/svg/icons/regular/light-mode.svg create mode 100644 resources/svg/icons/regular/system.svg diff --git a/resources/css/components/array.css b/resources/css/components/array.css index 1266e738a2..4dcedbc5cd 100644 --- a/resources/css/components/array.css +++ b/resources/css/components/array.css @@ -7,9 +7,9 @@ } .array-table-wrapper { - @apply border rounded overflow-hidden; + @apply border dark:border-dark-900 rounded overflow-hidden; &:focus-within { - @apply ring-2 ring-blue-300; + @apply ring-2 ring-blue-300 dark:ring-dark-blue-100; } } .array-table { @@ -20,12 +20,12 @@ tr:not(:last-child) { th, td { - @apply border-b; + @apply border-b dark:border-dark-900; } } th { - @apply rtl:border-l ltr:border-r p-2 bg-gray-300; + @apply rtl:border-l ltr:border-r dark:border-dark-900 p-2 bg-gray-300 dark:bg-dark-500; } td { @@ -54,12 +54,12 @@ } td:focus-within { - @apply bg-gray-200; + @apply bg-gray-200 dark:bg-dark-600; } /* Read Only */ .read-only-field & { - th { @apply text-gray-500; } - tr td { @apply bg-gray-200; } + th { @apply text-gray-500 dark:text-dark-150; } + tr td { @apply bg-gray-200 dark:bg-dark-600; } } } diff --git a/resources/css/components/assets.css b/resources/css/components/assets.css index a59e3cf64b..90c27667c9 100644 --- a/resources/css/components/assets.css +++ b/resources/css/components/assets.css @@ -34,7 +34,7 @@ ========================================================================== */ .asset-table-listing { - @apply border rounded relative overflow-hidden; + @apply border dark:border-dark-900 rounded relative overflow-hidden; table { @@ -45,7 +45,7 @@ } tbody tr:not(:last-child) { - @apply border-b; + @apply border-b dark:border-dark-900; } tbody tr td { @@ -84,7 +84,7 @@ ========================================================================== */ .asset-grid-listing { - @apply bg-white grid relative p-4 gap-4; + @apply bg-white dark:bg-dark-800 grid relative p-4 gap-4; grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); } @@ -93,7 +93,7 @@ ========================================================================== */ .asset-tile { - @apply bg-white relative min-w-0 flex items-center flex-col justify-between cursor-pointer border rounded; + @apply bg-white dark:bg-dark-500 relative min-w-0 flex items-center flex-col justify-between cursor-pointer border rounded border-dark-200; .asset-thumb { @apply flex justify-center items-center w-full h-full rounded; @@ -112,7 +112,7 @@ } .asset-meta { - @apply border-t w-full text-2xs text-gray-700; + @apply border-t dark:border-dark-200 w-full text-2xs text-gray-700 dark:text-dark-100; } .asset-filename { @@ -125,12 +125,12 @@ } .asset-tile.selected { - @apply border-blue; + @apply border-blue dark:border-dark-blue-100; box-shadow: 0 0 0 1px theme('colors.blue.DEFAULT'); } .asset-thumbnail { - @apply border border-white; + @apply border border-white dark:border-dark-950; } /* The Asset Editor diff --git a/resources/css/components/blueprints.css b/resources/css/components/blueprints.css index be798ec828..71d6683062 100644 --- a/resources/css/components/blueprints.css +++ b/resources/css/components/blueprints.css @@ -15,8 +15,7 @@ } .blueprint-drag-handle { - @apply flex-none; - cursor: move; + @apply flex-none w-4 ltr:border-r rtl:border-l dark:border-dark-500 cursor-move; background: rgba(0, 0, 0, 0.01) url('../../svg/icons/light/drag-dots.svg') 50% 50% no-repeat; background-size: 7px 17px; } @@ -26,6 +25,7 @@ .blueprint-section-field-inner { @apply relative border rounded bg-gray-200 shadow-sm flex outline-none z-10; + @apply dark:border-none dark:shadow-dark dark:bg-dark-600 } &.draggable-source--is-dragging { @@ -44,6 +44,10 @@ top: -3px; left: 6px ; right: 0 ; bottom: 3px; z-index: 1; [dir="rtl"] & { left: 0 ; right: 6px ; } + + .dark & { + @apply border-dark-300 bg-dark-550; + } } } @@ -65,10 +69,10 @@ } .blueprint-add-section-button { - @apply relative w-full border border-gray-500 border-dashed rounded-lg flex justify-center items-center text-gray-700; + @apply relative w-full border border-gray-500 dark:border-dark-200 border-dashed rounded-lg flex justify-center items-center text-gray-700 dark:text-dark-150; &:hover { - @apply border-gray text-gray-950; + @apply border-gray dark:border-dark-175 text-gray-950 dark:text-dark-100; } .blueprint-section-draggable-zone { diff --git a/resources/css/components/cards.css b/resources/css/components/cards.css index 019f7b8ea1..521d3bf605 100644 --- a/resources/css/components/cards.css +++ b/resources/css/components/cards.css @@ -4,6 +4,7 @@ .card { @apply shadow bg-white rounded-md p-2; + @apply dark:bg-dark-600 dark:shadow-dark; } @screen md { diff --git a/resources/css/components/fieldtypes/assets.css b/resources/css/components/fieldtypes/assets.css index a2d38bba6f..fda1e76520 100644 --- a/resources/css/components/fieldtypes/assets.css +++ b/resources/css/components/fieldtypes/assets.css @@ -7,7 +7,7 @@ } .assets-fieldtype .assets-fieldtype-picker { - @apply flex flex-col @sm:flex-row items-start @sm:items-center px-4 py-2 bg-gray-200 border rounded; + @apply flex flex-col @sm:flex-row items-start @sm:items-center px-4 py-2 bg-gray-200 dark:bg-dark-650 border dark:border-dark-900 rounded; &.is-expanded { @apply border-b-0 rounded-b-none; diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css index f464f55b43..6acb0e9740 100644 --- a/resources/css/components/fieldtypes/bard.css +++ b/resources/css/components/fieldtypes/bard.css @@ -1,11 +1,11 @@ .bard-fieldtype-wrapper { - @apply border rounded relative outline-none; + @apply border dark:border-dark-900 rounded relative outline-none; * { outline: none; } } .bard-editor { - @apply text-gray-800 bg-gray-100 shadow-inner p-0 relative rounded; + @apply text-gray-800 dark:text-dark-150 bg-gray-100 dark:bg-dark-650 shadow-inner p-0 relative rounded; } .bard-editor .ProseMirror { @@ -13,7 +13,7 @@ @apply @md/bard:p-2 text-md leading-normal; @apply @lg/bard:p-4; &:focus { - @apply ring-2 ring-inset ring-blue-200; + @apply ring-2 ring-inset ring-blue-200 dark:ring-blue-600; } } @@ -23,7 +23,7 @@ /* Modes */ .bard-editor.mode\:read-only .ProseMirror { - @apply bg-gray-300 text-gray-700; + @apply bg-gray-300 dark:bg-dark-600 text-gray-700 dark:text-dark-175; } .bard-editor.mode\:minimal .ProseMirror { @@ -39,21 +39,21 @@ } .bard-fixed-toolbar { - @apply bg-white shadow-none rounded-t border-b text-sm flex items-start justify-between p-1 z-5 top-0; + @apply bg-white dark:bg-dark-800 shadow-none rounded-t border-b dark:border-dark-900 text-sm flex items-start justify-between p-1 z-5 top-0; .bard-toolbar-button { - @apply text-gray-800 rounded px-1 flex text-center justify-center items-center text-base h-8 w-8 m-0; + @apply text-gray-800 dark:text-dark-150 rounded px-1 flex text-center justify-center items-center text-base h-8 w-8 m-0; svg { @apply w-auto h-4; } } .bard-toolbar-button:hover { - @apply bg-gray-200; + @apply bg-gray-200 dark:bg-dark-700; } .bard-toolbar-button.active { - @apply bg-gray-300 text-black; + @apply bg-gray-300 dark:bg-dark-800 text-black dark:text-dark-100; } .bard-toolbar-button:focus { @@ -63,7 +63,7 @@ .bard-toolbar-button:disabled { @apply opacity-50; &:hover { - @apply text-gray-800; + @apply text-gray-800 dark:text-dark-100; } } @@ -167,7 +167,7 @@ } .bard-footer-toolbar { - @apply bg-white shadow-none text-gray-700 rounded-b border-t text-xs p-2 flex items-center justify-between; + @apply bg-white dark:bg-dark-550 shadow-none text-gray-700 dark:text-dark-175 rounded-b border-t dark:border-dark-300 text-xs p-2 flex items-center justify-between; padding: 8px 12px; .bard-fullscreen & { @@ -206,14 +206,14 @@ ========================================================================== */ .bard-fullscreen { - @apply fixed bg-gray-200 inset-0 min-h-screen overflow-scroll rounded-none pt-16; + @apply fixed bg-gray-200 dark:bg-dark-700 inset-0 min-h-screen overflow-scroll rounded-none pt-16; & > .bard-editor { - @apply bg-white shadow max-w-xl mx-auto rounded relative my-6 px-8; + @apply bg-white dark:bg-dark-800 shadow dark:shadow-dark max-w-xl mx-auto rounded relative my-6 px-8; } & > .bard-fixed-toolbar { - @apply shadow h-12 fixed w-full bg-gradient-to-b from-white to-gray-100; + @apply shadow dark:shadow-dark h-12 fixed w-full bg-gradient-to-b from-white to-gray-100 dark:from-dark-400 dark:to-dark-500; padding: 7px 8px; top: 0; z-index: 999; @@ -265,7 +265,7 @@ .bard-fieldtype .bard-content > { p { - @apply text-gray-800; + @apply text-gray-800 dark:text-dark-150; word-break: break-all; word-break: break-word; @@ -287,7 +287,7 @@ em, i { font-style: italic } a { - @apply text-blue underline break-words; + @apply text-blue dark:text-dark-blue-100 underline break-words; } a:active, @@ -315,7 +315,7 @@ } hr { - @apply bg-gray-600; + @apply bg-gray-600 dark:bg-dark-300; height: 4px; padding: 0; margin: 1.7em 0; @@ -418,7 +418,7 @@ } blockquote { - @apply text-gray-800 rtl:border-r-4 ltr:border-l-4 border-blue px-4; + @apply text-gray-800 dark:text-dark-150 rtl:border-r-4 ltr:border-l-4 border-blue dark:border-dark-blue-100 px-4; margin: 0 0 .85em; } @@ -434,16 +434,16 @@ blockquote > .tableWrapper table, ol li > .tableWrapper table, ul li > .tableWrapper table { - @apply w-full overflow-hidden m-0 mb-4 bg-white text-sm ; + @apply w-full overflow-hidden m-0 mb-4 bg-white dark:bg-dark-500 text-sm ; border-collapse: collapse; table-layout: fixed; th { - @apply font-bold rtl:text-right ltr:text-left bg-gray-200; + @apply font-bold rtl:text-right ltr:text-left bg-gray-200 dark:bg-dark-575; } td, th { - @apply border align-top relative py-1 px-2; + @apply border dark:border-dark-200 align-top relative py-1 px-2; min-width: 1em; } @@ -451,13 +451,13 @@ @apply relative; &:after { - @apply bg-gray-400 absolute inset-0 pointer-events-none opacity-25; + @apply bg-gray-400 dark:bg-dark-200 absolute inset-0 pointer-events-none opacity-25; content: ''; } } a { - @apply text-blue underline break-words; + @apply text-blue dark:text-dark-blue-100 underline break-words; } a:active, @@ -469,7 +469,7 @@ } p > code { - @apply font-mono bg-gray-400 rounded-sm text-xs; + @apply font-mono bg-gray-400 dark:bg-dark-750 rounded-sm text-xs; padding: 2px 4px; top: -1px; } @@ -479,7 +479,7 @@ } pre code { - @apply font-mono bg-gray-400 text-xs p-4 block w-full rounded; + @apply font-mono bg-gray-400 dark:bg-dark-950 dark:text-dark-100 text-xs p-4 block w-full rounded; line-height: 1.8; } } @@ -488,7 +488,7 @@ ========================================================================== */ .bard-fieldtype .ProseMirror > p.is-editor-empty:first-child::before { - @apply text-gray-600; + @apply text-gray-600 dark:text-dark-200; content: attr(data-placeholder); float: left ; [dir="rtl"] & { float: right ; } height: 0; @@ -517,7 +517,7 @@ } .bard-inline-image-container { - @apply relative bg-white border rounded whitespace-normal mb-6; + @apply relative bg-white dark:bg-dark-600 border dark:border-dark-900 rounded whitespace-normal mb-6; &:hover { cursor: grab; } diff --git a/resources/css/components/fieldtypes/code.css b/resources/css/components/fieldtypes/code.css index 2f9dcf276b..7b411b7775 100644 --- a/resources/css/components/fieldtypes/code.css +++ b/resources/css/components/fieldtypes/code.css @@ -1,10 +1,11 @@ .code-fieldtype-container { direction: ltr; + @apply dark:border dark:border-dark-800 rounded; } .code-fieldtype-toolbar { - @apply bg-white shadow-none rounded-t border border-b-0 text-sm flex flex-wrap items-center justify-end gap-2; - padding: 4px 8px; + @apply bg-white shadow-none py-1 px-2 rounded-t border border-b-0 text-sm flex flex-wrap items-center justify-end gap-2; + @apply dark:bg-dark-800 dark:border-l-0 dark:border-r-0 dark:border-t-0 dark:border-b dark:border-dark-900; [dir='rtl'] & { direction: rtl; @@ -17,9 +18,13 @@ .code-fieldtype-container.code-fullscreen { - @apply fixed bg-gray-200 inset-0 min-h-screen overflow-scroll rounded-none pt-12; + @apply fixed bg-gray-200 dark:bg-dark-600 inset-0 min-h-screen overflow-scroll rounded-none pt-12; .code-fieldtype-toolbar { - @apply fixed z-2 top-0 w-full px-6 py-2 h-12 shadow text-base rounded-none bg-gradient-to-b from-white to-gray-100; + @apply fixed z-2 top-0 w-full px-6 py-2 h-12 shadow dark:shadow-dark text-base rounded-none bg-gradient-to-b from-white to-gray-100 dark:from-dark-550 dark:to-dark-600; } } + +.CodeMirror { + @apply dark:text-dark-150 dark:shadow-inner-dark; +} diff --git a/resources/css/components/fieldtypes/grid.css b/resources/css/components/fieldtypes/grid.css index b070bedcee..ceabd56b02 100644 --- a/resources/css/components/fieldtypes/grid.css +++ b/resources/css/components/fieldtypes/grid.css @@ -3,7 +3,7 @@ ========================================================================== */ .grid-table { - @apply w-full rtl:text-right ltr:text-left border text-gray relative mb-4 outline-none shadow-sm rounded; + @apply w-full rtl:text-right ltr:text-left border dark:border-dark-900 text-gray dark:text-dark-150 relative mb-4 outline-none shadow-sm rounded; border-collapse: separate; border-spacing: 0; table-layout: auto; @@ -11,7 +11,7 @@ .grid-table thead { th { - @apply font-medium px-2 py-2 border-b z-10 bg-gray-200 text-gray-900 text-sm; + @apply font-medium px-2 py-2 border-b dark:border-dark-900 z-10 bg-gray-200 dark:bg-dark-650 text-gray-900 dark:text-dark-150 text-sm; display: table-cell; position: sticky; top: -1px; @@ -37,7 +37,7 @@ } > tr > td { - @apply border-b px-2 py-3 align-top; + @apply border-b dark:border-dark-900 px-2 py-3 align-top; &:first-child.grid-cell { @apply rtl:pr-3 ltr:pl-3; @@ -50,6 +50,10 @@ background: theme('colors.gray.200') url('../../../svg/icons/light/drag-dots.svg') center center no-repeat; background-size: 7px 17px; &:hover { @apply bg-gray-300; } + + .dark & { + background-color: theme('colors.dark.700'); + } } } diff --git a/resources/css/components/fieldtypes/markdown.css b/resources/css/components/fieldtypes/markdown.css index 609d7d4905..9c824f2f71 100644 --- a/resources/css/components/fieldtypes/markdown.css +++ b/resources/css/components/fieldtypes/markdown.css @@ -3,10 +3,10 @@ ========================================================================== */ .markdown-fieldtype-wrapper { - @apply border rounded overflow-hidden relative; + @apply border dark:border-dark-900 rounded overflow-hidden relative; .markdown-toolbar { - @apply bg-white shadow-none rounded-t border-b text-sm flex flex-wrap items-center justify-between; + @apply bg-white dark:bg-dark-700 shadow-none rounded-t border-b dark:border-dark-900 text-sm flex flex-wrap items-center justify-between; padding: 4px 8px; } @@ -15,21 +15,21 @@ } .markdown-buttons button { - @apply text-gray-800 rounded px-1 flex items-center justify-center text-base text-center h-8 w-8; + @apply text-gray-800 dark:text-dark-150 rounded px-1 flex items-center justify-center text-base text-center h-8 w-8; &:hover { - @apply bg-gray-200; + @apply bg-gray-200 dark:bg-dark-750; } &.active { - @apply bg-gray-300 text-black; + @apply bg-gray-300 dark:bg-dark-800 text-black dark:text-dark-175; } } .markdown-buttons button:disabled { @apply opacity-50; &:hover { - @apply text-gray-800; + @apply text-gray-800 dark:text-dark-200; } } @@ -37,24 +37,24 @@ @apply flex items-center; button { - @apply text-gray-700 inline-block focus:outline-none px-2 py-1 rtl:ml-1 ltr:mr-1; + @apply text-gray-700 dark:text-dark-150 inline-block focus:outline-none px-2 py-1 rtl:ml-1 ltr:mr-1; &:hover { @apply text-blue; } &.active { - @apply bg-blue-100 text-blue-800 rounded; + @apply bg-blue-100 dark:bg-dark-800 text-blue-800 dark:text-dark-150 rounded; } } } .CodeMirror { - @apply bg-gray-100 shadow-inner h-auto font-mono leading-normal px-0 py-1 @md/markdown:p-3 text-xs; + @apply bg-gray-100 dark:bg-dark-650 shadow-inner dark:shadow-inner-dark h-auto font-mono leading-normal px-0 py-1 @md/markdown:p-3 text-xs dark:text-dark-150; border-radius: 0 0 3px 3px; &:focus-within { - @apply ring-2 ring-inset ring-blue-200; + @apply ring-2 ring-inset ring-blue-200 dark:ring-dark-blue-150; } .cm-comment { @@ -65,7 +65,7 @@ .CodeMirror-code { min-height: 100px; } .helpers { - @apply border-t text-xs text-gray-800 flex items-center; + @apply border-t dark:border-dark-900 text-xs text-gray-800 dark:text-dark-150 flex items-center; button:hover { @apply text-blue; @@ -85,7 +85,8 @@ /* Dark Mode ========================================================================== */ -.markdown-fieldtype-wrapper.markdown-fullscreen.markdown-dark-mode { +.markdown-fieldtype-wrapper.markdown-fullscreen.markdown-dark-mode, +.dark .markdown-fieldtype-wrapper.markdown-fullscreen { @apply bg-gray-800 border-none; .markdown-toolbar { @@ -141,7 +142,7 @@ ========================================================================== */ .markdown-fieldtype.read-only-field .CodeMirror { - @apply bg-gray-300 text-gray-700; + @apply bg-gray-300 dark:bg-dark-600 text-gray-700 dark:text-dark-200; } @@ -164,7 +165,7 @@ ========================================================================== */ .markdown-fieldtype .cm-header { - @apply text-gray-800; + @apply text-gray-800 dark:text-dark-150; &.cm-header-1 { @apply text-lg; @@ -180,7 +181,7 @@ } .markdown-fieldtype .cm-quote { - @apply text-gray-800 italic text-sm; + @apply text-gray-800 dark:text-dark-150 italic text-sm; } @@ -201,7 +202,7 @@ } pre { - @apply rounded px-4 py-2; + @apply rounded px-4 py-2 dark:bg-dark-700 dark:text-red-500; color: #c7254e; background-color: #f9f2f4; direction: ltr; diff --git a/resources/css/components/fieldtypes/replicator.css b/resources/css/components/fieldtypes/replicator.css index 55b54cc677..46c7d7dcae 100644 --- a/resources/css/components/fieldtypes/replicator.css +++ b/resources/css/components/fieldtypes/replicator.css @@ -7,22 +7,22 @@ } .replicator-set { - @apply shadow-set rounded bg-white outline-none relative; + @apply shadow-set dark:shadow-dark-set rounded bg-white dark:bg-dark-800 outline-none relative; } .replicator-set-header { - @apply bg-gray-300 border-b rounded-t rtl:pl-3 ltr:pr-3 flex select-none; + @apply bg-gray-300 dark:bg-dark-650 border-b dark:border-dark-900 rounded-t rtl:pl-3 ltr:pr-3 flex select-none; &.collapsed { @apply rounded border-b-0; } .sortable-handle { - @apply w-4 rtl:border-l ltr:border-r rtl:rounded-tr ltr:rounded-tl p-2; + @apply w-4 rtl:border-l ltr:border-r dark:border-dark-900 rtl:rounded-tr ltr:rounded-tl p-2; cursor: grab; background: transparent url('../../../svg/icons/light/drag-dots.svg') center center no-repeat; background-size: 7px 17px; - &:hover { @apply bg-gray-200; } + &:hover { @apply bg-gray-200 dark:bg-dark-700; } } img { diff --git a/resources/css/components/fieldtypes/section.css b/resources/css/components/fieldtypes/section.css index 5600d19185..5339d8024b 100644 --- a/resources/css/components/fieldtypes/section.css +++ b/resources/css/components/fieldtypes/section.css @@ -4,6 +4,7 @@ .section-fieldtype { @apply border-t border-b bg-gray-200; + @apply dark:border-dark-900 dark:bg-dark-700 dark:shadow-inner-dark; @apply -mt-px; /* Avoid adjacent borders just in case they're stacked */ &.form-group { @@ -46,4 +47,4 @@ @apply rounded-t-none; } } -} \ No newline at end of file +} diff --git a/resources/css/components/fieldtypes/table.css b/resources/css/components/fieldtypes/table.css index 95f1b235e4..4b5261e44b 100644 --- a/resources/css/components/fieldtypes/table.css +++ b/resources/css/components/fieldtypes/table.css @@ -3,7 +3,7 @@ ========================================================================== */ .table-fieldtype-table { - @apply w-full rtl:text-right ltr:text-left border text-gray relative mb-4 outline-none shadow-sm rounded; + @apply w-full rtl:text-right ltr:text-left border dark:border-dark-900 text-gray dark:text-dark-150 relative mb-4 outline-none shadow-sm rounded; border-collapse: separate; border-spacing: 0; table-layout: fixed; @@ -11,7 +11,7 @@ .table-fieldtype-table thead { th { - @apply font-medium rtl:border-l ltr:border-r p-2 border-b z-10 bg-gray-200 text-gray-900 text-sm; + @apply font-medium rtl:border-l ltr:border-r p-2 border-b dark:border-dark-900 z-10 bg-gray-200 dark:bg-dark-700 text-gray-900 dark:text-dark-150 text-sm; display: table-cell; position: sticky; top: -1px; @@ -26,8 +26,9 @@ .table-fieldtype-table .input-text { @apply bg-white border-none rounded-none shadow-none outline-none text-sm; + @apply dark:bg-dark-650; &:focus { - @apply shadow-inner bg-gray-100 ring-0; + @apply shadow-inner bg-gray-100 dark:bg-dark-700 ring-0; } } @@ -39,7 +40,7 @@ } td { - @apply border-b rtl:border-l ltr:border-r p-0; + @apply border-b rtl:border-l ltr:border-r dark:border-dark-900 p-0; &:first-child.grid-cell { @apply rtl:pr-3 ltr:pl-3; @@ -54,7 +55,12 @@ cursor: grab; background: theme('colors.gray.200') url('../../../svg/icons/light/drag-dots.svg') center center no-repeat; background-size: 7px 17px; - &:hover { @apply bg-gray-300; } + + .dark & { + background-color: theme(colors.dark.600); + } + + &:hover { @apply bg-gray-300 dark:bg-dark-750; } } } @@ -65,7 +71,7 @@ } tr.draggable-source--is-dragging td { - @apply bg-gray-100; + @apply bg-gray-100 dark:bg-dark-800; } } @@ -73,7 +79,7 @@ @apply w-8 rtl:pr-0 ltr:pl-0 text-center; vertical-align: middle; &:focus-within { - @apply bg-gray-200; + @apply bg-gray-200 dark:bg-dark-750; button { @apply outline-none ring-0; } diff --git a/resources/css/components/fieldtypes/textarea.css b/resources/css/components/fieldtypes/textarea.css index 6eba949320..83da1d874d 100644 --- a/resources/css/components/fieldtypes/textarea.css +++ b/resources/css/components/fieldtypes/textarea.css @@ -3,11 +3,11 @@ ========================================================================== */ .textarea-fieldtype textarea { - @apply border-gray-500 text-md leading-normal; + @apply border-gray-500 dark:border-dark-900 dark:shadow-inner-dark text-md leading-normal; min-height: 80px; &:not(.focus-within-only):focus, &:not(.focus-within-only):focus-within { - @apply ring-2 ring-blue-300 outline-none shadow-none; + @apply ring-2 ring-blue-300 dark:ring-blue-600 outline-none shadow-none; } } @@ -15,5 +15,5 @@ ========================================================================== */ .grid-fieldtype .textarea-fieldtype textarea { - @apply bg-white; + @apply bg-white dark:bg-dark-600; } diff --git a/resources/css/components/fieldtypes/video.css b/resources/css/components/fieldtypes/video.css index 3261716751..a6ad494408 100644 --- a/resources/css/components/fieldtypes/video.css +++ b/resources/css/components/fieldtypes/video.css @@ -1,5 +1,5 @@ .video-fieldtype-container { - @apply bg-gray-200 p-4 border rounded; + @apply bg-gray-200 dark:bg-dark-700 p-4 border dark:border-dark-950 rounded; } .video-fieldtype .video-preview-wrapper { diff --git a/resources/css/components/fieldtypes/width.css b/resources/css/components/fieldtypes/width.css index 7219724d0e..20e75ded34 100644 --- a/resources/css/components/fieldtypes/width.css +++ b/resources/css/components/fieldtypes/width.css @@ -5,18 +5,18 @@ @apply w-12 h-5 flex relative cursor-pointer; .field-width-label { - @apply absolute text-4xs font-bold w-full text-center z-10 text-gray-700 inset-0 flex items-center justify-center pointer-events-none; + @apply absolute text-4xs font-bold w-full text-center z-10 text-gray-700 dark:text-dark-150 inset-0 flex items-center justify-center pointer-events-none; } .field-width-notch { - @apply relative border border-gray-400 rtl:border-r-0 ltr:border-l-0 flex-1; + @apply relative border border-gray-400 dark:border-dark-300 rtl:border-r-0 ltr:border-l-0 flex-1; &:first-of-type { @apply rtl:border-r ltr:border-l rtl:rounded-r-sm ltr:rounded-l-sm; } &.filled { - @apply border-gray-400 rtl:border-l-0 ltr:border-r-0 rtl:pl-px ltr:pr-px bg-white -my-px; + @apply border-gray-400 dark:border-dark-400 rtl:border-l-0 ltr:border-r-0 rtl:pl-px ltr:pr-px bg-white dark:bg-dark-575 -my-px; } &.selected { @@ -32,13 +32,13 @@ @apply w-16 h-9 mt-px; .field-width-notch { - @apply bg-gray-200 border-r-gray-400 border-y-gray-500; + @apply bg-gray-200 dark:bg-dark-550 border-r-gray-400 dark:border-dark-700 border-y-gray-500 dark:border-y-dark-750; &:last-child { - @apply border-r-gray-500 rtl:rounded-l-sm ltr:rounded-r-sm; + @apply border-r-gray-500 dark:border-dark-750 rtl:rounded-l-sm ltr:rounded-r-sm; } &.filled { - @apply bg-gradient-to-b from-white to-gray-100 border-gray-500; + @apply bg-gradient-to-b from-white to-gray-100 dark:from-dark-300 dark:to-dark-400 border-gray-500 dark:border-dark-750; } } diff --git a/resources/css/components/global-header.css b/resources/css/components/global-header.css index 7a7c1f405e..6e231e9467 100644 --- a/resources/css/components/global-header.css +++ b/resources/css/components/global-header.css @@ -3,10 +3,24 @@ ========================================================================== */ .global-header { - @apply bg-white shadow rtl:pl-4 ltr:pr-4 h-13 items-center flex relative w-full; + @apply bg-white dark:bg-dark-600 shadow dark:shadow-dark rtl:pl-4 ltr:pr-4 h-13 items-center flex relative w-full; z-index: 3; /* The search focus overlay sits underneath using z-index 2. */ + + .dark & { + .logo { + path { + fill: theme(colors.dark.100) !important; + } + } + } + + .global-header-icon-button { + @apply h-7 w-7 block outline-none p-1 text-gray hover:text-gray-800 rounded-full hover:bg-gray-200 border border-transparent hover:border-gray-400; + @apply dark:text-dark-100 dark:hover:text-dark-100 dark:hover:bg-dark-800 dark:border-transparent dark:hover:border-dark-900; + } } + /* Responsive Wangjangling ========================================================================== */ @@ -17,11 +31,11 @@ /* Search ========================================================================== */ .global-search { - @apply rounded-md px-2 hidden py-0 flex items-center relative border; + @apply rounded-md px-2 hidden py-0 flex items-center relative border dark:border-dark-300; transition: .12s ease-out; .search-input { - @apply text-sm w-full max-w-full; + @apply text-sm w-full max-w-full dark:bg-dark-600 dark:text-dark-150; padding-left: 5px ; padding-right: 20px ; [dir="rtl"] & { padding-left: 20px ; padding-right: 5px ; } height: 32px; @@ -32,6 +46,7 @@ .global-search-results { @apply shadow-lg absolute p-0 w-full bg-white rounded border border-gray-500; + @apply dark:bg-dark-650 dark:border-dark-900; top: 36px; left: -1px ; [dir="rtl"] & { left: auto ; right: -1px ; } /* border offset */ z-index: 999; @@ -43,7 +58,7 @@ } .global-search-result-item { - @apply border-t cursor-pointer; + @apply border-t cursor-pointer dark:bg-dark-600 dark:border-dark-800 dark:text-dark-150; &:first-child { @apply rounded-t border-none; @@ -54,8 +69,13 @@ } } + .global-search-result-badge { + @apply rounded px-1 text-2xs border bg-gray-200 text-gray; + @apply dark:bg-dark-600 dark:text-dark-100 dark:border-dark-700; + } + .active { - @apply bg-gray-300; + @apply bg-gray-300 dark:bg-dark-650; } .title { @@ -74,15 +94,12 @@ } .icon { - @apply text-gray; + @apply text-gray dark:text-dark-175 relative cursor-pointer overflow-hidden; font-size: 18px; - cursor: pointer; - position: relative; top: 1px; width: 20px; height: 20px; line-height: 20px; - overflow: hidden; } .reset { diff --git a/resources/css/components/items.css b/resources/css/components/items.css index 8940523217..13a16c67bc 100644 --- a/resources/css/components/items.css +++ b/resources/css/components/items.css @@ -1,12 +1,19 @@ .item { - @apply text-sm outline-none flex w-full justify-between rounded border bg-white shadow-sm items-center; + @apply text-sm outline-none bg-white flex w-full justify-between rounded border shadow-sm items-center; + @apply dark:border-dark-900 dark:bg-dark-550 dark:shadow-dark-sm; .item-move { - @apply w-4 self-stretch rtl:border-l ltr:border-r rtl:rounded-r ltr:rounded-l p-2; - cursor: grab; - background: theme('colors.gray.200') url('../../svg/icons/light/drag-dots.svg') center center no-repeat; + @apply w-4 self-stretch rtl:border-l ltr:border-r rtl:rounded-r ltr:rounded-l p-2 cursor-grab; + @apply dark:border-dark-900; + background: theme('colors.gray.600') url('../../svg/icons/light/drag-dots.svg') center center no-repeat; + background-size: 7px 17px; - &:hover { @apply bg-gray-300; } + &:hover { @apply bg-gray-300 dark:bg-dark-700; } + + .dark & { + + background-color: theme('colors.dark.550'); + } } .item-inner { @@ -15,7 +22,7 @@ &.invalid { .item-inner { - @apply border-red-300 bg-red-100 text-red-500; + @apply border-red-300 dark:border-dark-red bg-red-100 dark:bg-red-400 text-red-500 dark:text-red-950; } } diff --git a/resources/css/components/modal.css b/resources/css/components/modal.css index 378f36598f..dfe608c8c1 100644 --- a/resources/css/components/modal.css +++ b/resources/css/components/modal.css @@ -6,7 +6,7 @@ } .vm--modal { - @apply rounded-lg !important; + @apply rounded-lg dark:bg-dark-600 dark:shadow-dark !important; [dir='rtl'] & { direction: rtl; diff --git a/resources/css/components/nav-main.css b/resources/css/components/nav-main.css index 85dfbada93..07c7960670 100644 --- a/resources/css/components/nav-main.css +++ b/resources/css/components/nav-main.css @@ -4,6 +4,8 @@ .nav-main { @apply hidden select-none bg-white shadow h-screen absolute rtl:right-0 ltr:left-0 overflow-scroll w-56; + @apply dark:bg-dark-800 dark:shadow-dark; + transition: all .3s; h6 { @apply mt-6; } @@ -18,23 +20,27 @@ } li a { - @apply p-0 flex items-center text-gray-800; + @apply p-0 flex items-center text-gray-800 dark:text-dark-150; transition: all .08s ease-in-out; &:hover { - @apply text-blue; + @apply text-blue dark:text-blue-300; + i { + @apply dark:text-blue-300; + } } i { @apply block h-7 p-1 w-7 rtl:ml-2 ltr:mr-2 rounded-full; + @apply dark:text-dark-150/70; } } li.current > a { - @apply text-gray-900 font-medium; + @apply text-gray-900 font-medium dark:text-white; i { - @apply bg-white; + @apply bg-white dark:bg-dark-600 dark:text-dark-100; } } @@ -63,7 +69,7 @@ @screen md { .nav-main { - @apply fixed flex bg-transparent shadow-none overflow-auto rtl:border-l ltr:border-r; + @apply fixed flex bg-transparent shadow-none overflow-auto rtl:border-l ltr:border-r dark:border-dark-900; height: calc(100% - 52px); .showing-license-banner & { height: calc(100% - 120px); @@ -80,7 +86,7 @@ outline: none !important; &:hover { - @apply bg-gray-200; + @apply bg-gray-200 dark:bg-dark-500; } } diff --git a/resources/css/components/notifications.css b/resources/css/components/notifications.css index 631db9fa9a..352edc9175 100644 --- a/resources/css/components/notifications.css +++ b/resources/css/components/notifications.css @@ -13,7 +13,7 @@ } .toasted-container .toasted.statamic { - @apply bg-white text-gray-800 mt-4 text-base rounded shadow p-0; + @apply bg-white dark:bg-dark-900 text-gray-800 dark:text-dark-100 mt-4 text-base rounded shadow p-0; height: 48px; i { @@ -21,21 +21,21 @@ } &.success i { - @apply bg-green-400 text-green-700; + @apply bg-green-400 dark:bg-green-600 text-green-700 dark:text-green-950; } &.error i { - @apply bg-red-500; + @apply bg-red-500 dark:bg-red-600; } &.default i { - @apply bg-gray-800; + @apply bg-gray-800 dark:bg-dark-900; } .action { - @apply font-normal text-xl px-4 h-full text-gray-600 m-0 rtl:mr-2 ltr:ml-2 flex items-center; + @apply font-normal text-xl px-4 h-full text-gray-600 dark:text-dark-150 m-0 rtl:mr-2 ltr:ml-2 flex items-center; &:hover { - @apply no-underline text-gray-900; + @apply no-underline text-gray-900 dark:text-dark-100; } } } diff --git a/resources/css/components/page-tree.css b/resources/css/components/page-tree.css index 254dae356b..8016035f5d 100644 --- a/resources/css/components/page-tree.css +++ b/resources/css/components/page-tree.css @@ -1,10 +1,15 @@ .page-tree { + .tree-node { + @apply dark:mb-1; + } + .tree-node-inner { @apply relative text-xs bg-white shadow rounded; + @apply dark:bg-dark-600 dark:shadow-dark; &:hover { - @apply bg-gray-100; + @apply bg-gray-100 dark:bg-dark-650; } } @@ -15,20 +20,24 @@ * { display: none; } } -.page-move { - @apply w-6 rtl:border-l ltr:border-r rtl:rounded-r ltr:rounded-l; + .page-move { + @apply w-6 rtl:border-l ltr:border-r rtl:rounded-r ltr:rounded-l dark:text-dark-175 dark:border-dark-900; cursor: grab; background-color: hsla(210, 30%, 95%, .5); background-image: url('../../svg/icons/light/drag-dots.svg'); background-size: 7px 17px; background-position: center center; background-repeat: no-repeat; - &:hover { @apply bg-gray-300; } + &:hover { @apply bg-gray-300 dark:bg-dark-700; } + + .dark & { + background-color: hsla(180, 1%, 18%, 0.5); + } } .page-root { background-color: hsla(210, 30%, 95%, .5); - @apply flex w-6 rtl:rounded-r ltr:rounded-l items-center rtl:border-l ltr:border-r; + @apply flex w-6 rtl:rounded-r ltr:rounded-l items-center rtl:border-l ltr:border-r dark:border-dark-900; } } diff --git a/resources/css/components/pagination.css b/resources/css/components/pagination.css index cc1ec453ff..6a3846ddb0 100644 --- a/resources/css/components/pagination.css +++ b/resources/css/components/pagination.css @@ -3,21 +3,21 @@ ========================================================================== */ .pagination { - @apply flex justify-center shadow items-center list-none p-0 rounded overflow-hidden; + @apply flex justify-center shadow dark:shadow-dark items-center list-none p-0 rounded overflow-hidden; li a { - @apply h-full px-3 py-2 rtl:border-l ltr:border-r bg-white block text-gray-800; + @apply h-full px-3 py-2 rtl:border-l ltr:border-r dark:border-dark-900 bg-white dark:bg-dark-600 block text-gray-800 dark:text-dark-150; &:hover { - @apply bg-gray-100 text-gray-800; + @apply bg-gray-100 dark:bg-dark-700 text-gray-800 dark:text-dark-100; } } li > .unclickable { - @apply h-full px-3 py-2 rtl:border-l ltr:border-r bg-white block text-gray-500; + @apply h-full px-3 py-2 rtl:border-l ltr:border-r dark:border-dark-900 bg-white dark:bg-dark-600 block text-gray-500 dark:text-dark-200; &:hover { - cursor: text; + cursor: text; } } @@ -26,7 +26,7 @@ } li.current a { - @apply bg-gray-100 text-blue shadow-inner; + @apply bg-gray-100 dark:bg-dark-700 text-blue dark:text-dark-blue-100 shadow-inner; } } diff --git a/resources/css/components/popover.css b/resources/css/components/popover.css index a5b4231f48..8698d86018 100644 --- a/resources/css/components/popover.css +++ b/resources/css/components/popover.css @@ -55,12 +55,12 @@ } .rotating-dots-button { - @apply text-gray-700 rounded-full flex items-center justify-center; + @apply text-gray-700 dark:text-dark-150 rounded-full flex items-center justify-center; height: 24px; width: 24px; &:hover { - @apply text-gray-950; + @apply text-gray-950 dark:text-dark-100; } &:focus { diff --git a/resources/css/components/preview.css b/resources/css/components/preview.css index 20f0152645..11b4d96d2c 100644 --- a/resources/css/components/preview.css +++ b/resources/css/components/preview.css @@ -7,6 +7,11 @@ background: linear-gradient(180deg, #fff, #f9fafb); border-bottom: 1px solid #c4cdd6; z-index: 2; + + .dark & { + background: linear-gradient(180deg, theme(colors.dark.500), theme(colors.dark.550)); + border-color: theme(colors.dark.900); + } } @@ -16,7 +21,7 @@ } .live-preview-editor { - @apply flex relative bg-gray-200 h-full; + @apply flex relative bg-gray-200 dark:bg-dark-800 h-full; z-index: 3; } @@ -35,7 +40,7 @@ } .live-preview .tabs-container { - @apply bg-gray-300 mb-0; + @apply bg-gray-300 dark:bg-dark-550 mb-0; @apply @4xl/live-preview:mb-6; } @@ -66,11 +71,15 @@ } .live-preview-resizer { - @apply w-4 rtl:border-r ltr:border-l rtl:border-l ltr:border-r border-gray-400 shadow-sm; + @apply w-4 rtl:border-r ltr:border-l rtl:border-l ltr:border-r border-gray-400 dark:border-dark-900 shadow-sm; z-index: 1; cursor: ew-resize; background: theme('colors.gray.100') url('../../svg/icons/light/drag-dots.svg') center center no-repeat; background-size: 7px 17px; + + .dark & { + background-color: theme('colors.dark.500'); + } } diff --git a/resources/css/components/publish.css b/resources/css/components/publish.css index 98b427dabf..1095093f76 100644 --- a/resources/css/components/publish.css +++ b/resources/css/components/publish.css @@ -85,7 +85,7 @@ code.parent-url { } .publish-section-header { - @apply border-b border-gray-400 bg-gray-100 rounded-t-lg; + @apply border-b border-gray-400 dark:border-dark-900 bg-gray-100 dark:bg-dark-700 rounded-t-lg; } .publish-section-header-inner { diff --git a/resources/css/components/revisions.css b/resources/css/components/revisions.css index bba44f0df2..17649ad950 100644 --- a/resources/css/components/revisions.css +++ b/resources/css/components/revisions.css @@ -11,12 +11,12 @@ } .revision-item { - @apply p-2 text-sm block cursor-pointer border-t; + @apply p-2 text-sm block cursor-pointer border-t dark:border-dark-900; &:hover { - @apply bg-gray-200; + @apply bg-gray-200 dark:bg-dark-400; } &:last-child { - @apply border-b; + @apply border-b dark:border-dark-900; } } @@ -39,7 +39,7 @@ &.publish { @apply bg-green-600; } &.revision, - &.restore { @apply text-gray-700; } + &.restore { @apply text-gray-700 dark:text-dark-150 dark:bg-dark-300; } &.unpublish { @apply bg-red-500; } } @@ -54,6 +54,6 @@ .revision-item.status-working-copy { @apply text-blue; - .revision-item-bullet { @apply bg-blue; } - .badge { @apply bg-blue; } + .revision-item-bullet { @apply bg-blue dark:bg-dark-blue-100; } + .badge { @apply bg-blue dark:bg-dark-blue-100; } } diff --git a/resources/css/components/settings.css b/resources/css/components/settings.css index 7670aa566d..f411af20aa 100644 --- a/resources/css/components/settings.css +++ b/resources/css/components/settings.css @@ -1,5 +1,5 @@ .config-field { - @apply md:flex flex-wrap border-b border-gray-400 w-full; + @apply md:flex flex-wrap border-b border-gray-400 dark:border-dark-900 w-full; @apply p-3 @sm:p-4 m-0; .field-inner { diff --git a/resources/css/components/tabs.css b/resources/css/components/tabs.css index bcd44c46d9..ddf818b733 100644 --- a/resources/css/components/tabs.css +++ b/resources/css/components/tabs.css @@ -3,10 +3,10 @@ ========================================================================== */ .tabs-container { - @apply w-full border-b text-md relative flex mb-6; + @apply w-full border-b dark:border-dark-500 text-md relative flex mb-6; .fade-left, .fade-right { - @apply absolute w-4 inset-y-0 from-gray-300 pointer-events-none z-2; + @apply absolute w-4 inset-y-0 from-gray-300 dark:from-dark-800 pointer-events-none z-2; } .fade-left { @@ -19,7 +19,7 @@ } .card .tabs-container .fade-left, .card .tabs-container .fade-right { - @apply from-white; + @apply from-white dark:from-dark-600; } .tabs { @@ -30,15 +30,15 @@ } .tab-button { - @apply flex items-center px-2 py-2 text-gray-700 select-none border-b-2 border-transparent whitespace-nowrap shrink-0; + @apply flex items-center px-2 py-2 text-gray-700 dark:text-dark-150 select-none border-b-2 border-transparent whitespace-nowrap shrink-0; &:hover { - @apply text-gray-800; + @apply text-gray-800 dark:text-dark-100; } &:focus-visible { - @apply ring-inset ring-2 ring-blue-500 outline-none rounded-t; + @apply ring-inset ring-2 ring-blue-500 dark:ring-dark-blue-100 outline-none rounded-t; } &.active { - @apply text-blue-500 border-blue-500; + @apply text-blue-500 dark:text-blue-400 border-blue-500 dark:border-blue-400; } &.has-error { @apply text-red-500; @@ -54,14 +54,14 @@ ========================================================================== */ .pill-tab { - @apply text-gray-700 flex items-center focus:outline-none px-2 py-1 rounded; + @apply text-gray-700 dark:text-dark-175 flex items-center focus:outline-none px-2 py-1 rounded; &:hover { - @apply text-gray-900; + @apply text-gray-900 dark:text-dark-100; } &.active { - @apply bg-blue-100 text-blue-900; + @apply bg-blue-100 dark:bg-dark-400 text-blue-900 dark:text-dark-150; } } diff --git a/resources/css/components/toggle.css b/resources/css/components/toggle.css index 193ddcd05f..b2f2195ed1 100644 --- a/resources/css/components/toggle.css +++ b/resources/css/components/toggle.css @@ -11,9 +11,9 @@ } .inline-label { - @apply rtl:mr-2 ltr:ml-2 font-normal text-gray-700; + @apply rtl:mr-2 ltr:ml-2 font-normal text-gray-700 dark:text-dark-175; a { - @apply text-gray-800 underline; + @apply text-gray-800 dark:text-dark-150 underline; &:hover { @apply text-blue; } @@ -27,7 +27,7 @@ } .toggle-container { - @apply bg-white cursor-pointer relative border shrink-0; + @apply bg-white dark:bg-dark-700 cursor-pointer relative border dark:border-dark-900 shrink-0; height: 22px; width: 46px; border-radius: 20px; @@ -51,16 +51,16 @@ } .toggle-knob { - position: absolute; - top: 1px; + @apply absolute top-px outline-none bg-white rounded-full; right: 0 ; [dir="rtl"] & { right: auto ; left: 0 ; } width: 20px; height: 20px; - border-radius: 50%; - background: white; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); - outline: none; transition: box-shadow 0.1s, background-color 0.2s ease-in-out; + + .dark & { + background: theme(colors.dark.500); + } } .toggle-knob:hover { @@ -75,6 +75,9 @@ .toggle-knob:focus { box-shadow: 0 0 10px theme(colors.green.500/70); + .dark & { + box-shadow: none; + } } } diff --git a/resources/css/core/layout.css b/resources/css/core/layout.css index 723d52489b..f381cda4fc 100644 --- a/resources/css/core/layout.css +++ b/resources/css/core/layout.css @@ -3,7 +3,7 @@ ========================================================================== */ body { - @apply w-full bg-gray-300 relative; + @apply w-full bg-gray-300 relative dark:bg-dark-800; } #statamic { diff --git a/resources/css/core/typography.css b/resources/css/core/typography.css index bc6edeffc3..fcf197f09f 100644 --- a/resources/css/core/typography.css +++ b/resources/css/core/typography.css @@ -3,7 +3,7 @@ ========================================================================== */ body { - @apply font-sans text-gray-900 text-base tracking-normal; + @apply font-sans text-gray-900 text-base tracking-normal dark:text-dark-100; font-variant: common-ligatures tabular-nums; font-feature-settings: "zero", "ss01", "calt" off; @@ -42,10 +42,10 @@ h6 { } a:not([class^="btn"]) { - @apply text-gray-800 cursor-pointer; + @apply text-gray-800 dark:text-dark-150 cursor-pointer; &:hover { - @apply text-blue; + @apply text-blue dark:text-blue-300; } } @@ -59,7 +59,7 @@ a:not([class^="btn"]) { } p, ol, ul, pre { - @apply text-gray-700 text-sm leading-normal mb-2; + @apply text-gray-700 text-sm leading-normal mb-2 dark:text-dark-150; a { @apply text-blue; @@ -120,10 +120,9 @@ sup { } code { - @apply font-mono rounded; + @apply font-mono rounded text-[#c7254e] dark:text-blue-400 dark:bg-dark-700; padding: 2px 4px; font-size: 90%; - color: #c7254e; background-color: #f9f2f4; } diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css index 6d7405a7f2..2e9c3ce7b2 100644 --- a/resources/css/core/utilities.css +++ b/resources/css/core/utilities.css @@ -7,7 +7,7 @@ } .focus-outline { - @apply border border-blue-300; + @apply border border-blue-300 dark:border-dark-blue-200; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0,125,255,.25); } @@ -76,13 +76,18 @@ background-image: linear-gradient(45deg, #EDF2F6 25%, transparent 25%), linear-gradient(-45deg, #EDF2F6 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #EDF2F6 75%), linear-gradient(-45deg, transparent 75%, #EDF2F6 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0px; + + .dark & { + background-color: theme(colors.dark.600); + background-image: linear-gradient(45deg, theme(colors.dark.950) 25%, transparent 25%), linear-gradient(-45deg, theme(colors.dark.950) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, theme(colors.dark.950) 75%), linear-gradient(-45deg, transparent 75%, theme(colors.dark.950) 75%); + } } .clickable { - @apply text-gray-800 select-none cursor-pointer border bg-gradient-to-b from-white to-gray-100; + @apply text-gray-800 dark:text-dark-175 select-none cursor-pointer border dark:border-dark-800 bg-gradient-to-b from-white to-gray-100 dark:from-dark-550 dark:to-dark-600; &:hover { - @apply border-gray-500 from-white to-gray-200; + @apply border-gray-500 dark:border-dark-900 from-white to-gray-200 dark:from-dark-550 dark:to-dark-700; } } diff --git a/resources/css/dark.css b/resources/css/dark.css new file mode 100644 index 0000000000..c2759e9a09 --- /dev/null +++ b/resources/css/dark.css @@ -0,0 +1,39 @@ +.prose { + @apply dark:text-dark-150; + + :where(h2), :where(h3) { + &:not(:where([class~=not-prose] *)) { + @apply dark:text-dark-100; + } + } + + :where(pre), :where(code) { + &:not(:where([class~=not-prose] *)) { + @apply dark:bg-dark-950 dark:text-dark-100; + } + } +} + +.dark { + input:-webkit-autofill { + -webkit-box-shadow: inset 0 0 0 50px theme('colors.dark.250'); + -webkit-text-fill-color: theme('colors.dark.150'); + + &:focus, &:active { + -webkit-box-shadow: inset 0 0 0 50px theme('colors.dark.200') !important; + -webkit-text-fill-color: theme('colors.dark.100'); + } + } + + .CodeMirror-selected { + background: rgba(255, 255, 255, 0.10); + } + + .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { + background: rgba(255, 255, 255, 0.10); + } + + .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { + background: rgba(255, 255, 255, 0.10); + } +} diff --git a/resources/css/elements/badges.css b/resources/css/elements/badges.css index 9c87f4de6d..50243e544f 100644 --- a/resources/css/elements/badges.css +++ b/resources/css/elements/badges.css @@ -3,16 +3,16 @@ ========================================================================== */ .badge { - @apply text-3xs not-italic bg-gray-300 text-gray-800 rounded-md leading-normal; + @apply text-3xs not-italic bg-gray-300 dark:bg-dark-700 text-gray-800 dark:text-dark-150 rounded-md leading-normal; padding: 1px 5px 0; } .badge-pill { - @apply bg-gray-300 px-2 py-1 rounded; + @apply bg-gray-300 dark:bg-dark-700 px-2 py-1 rounded; } .badge-pill-sm { - @apply bg-gray-300 px-1 py-px rounded; + @apply bg-gray-300 dark:bg-dark-700 px-1 py-px rounded; } .badge-updates { @@ -21,21 +21,21 @@ } .badge-sm { - @apply bg-gray-300 uppercase text-4xs text-white rounded-sm leading-normal; + @apply bg-gray-300 dark:bg-dark-700 uppercase text-4xs text-white dark:text-dark-100 rounded-sm leading-normal; height: 16px; padding: 1px 5px 2px; } .filter-badge { - @apply text-2xs text-gray-800 bg-white border border-dashed border-gray-600 flex items-center rounded-full; + @apply text-2xs text-gray-800 dark:text-dark-150 bg-white dark:bg-dark-550 border border-dashed border-gray-600 dark:border-dark-900 flex items-center rounded-full; height: 1.625rem; padding-left: 10px ; [dir="rtl"] & { padding-right: 10px ; padding-left: 0 ; } button { - @apply px-2 text-base text-gray-600 flex items-center rounded; + @apply px-2 text-base text-gray-600 dark:text-dark-175 flex items-center rounded; &:hover { - @apply text-gray-800; + @apply text-gray-800 dark:text-dark-100; } &:focus { @@ -44,6 +44,6 @@ } &.filter-badge-control { - @apply bg-gray-100 border border-solid rounded-full border-gray-500 hover:border-gray-600 hover:bg-gray-200; + @apply bg-gray-100 dark:bg-dark-600 border border-solid rounded-full border-gray-500 dark:border-dark-900 hover:border-gray-600 dark:hover:border-dark-800 hover:bg-gray-200 dark:hover:bg-dark-800; } } diff --git a/resources/css/elements/buttons.css b/resources/css/elements/buttons.css index e190f872e1..7950906118 100644 --- a/resources/css/elements/buttons.css +++ b/resources/css/elements/buttons.css @@ -17,6 +17,7 @@ button { padding: .475rem 1.25rem; &:focus { + /* @apply ring-2 outline-none dark:outline-2 dark:outline-dark-blue-100; */ @apply ring-2 outline-none; } @@ -31,41 +32,62 @@ button { /* Default, non-primary action button */ .btn, .btn-default { - @apply text-gray-800 shadow-button; + @apply text-gray-800 dark:text-dark-150 shadow-button; background: linear-gradient(180deg, #fff, #f9fafb); border: 1px solid #D3DDE7; border-bottom: 1px solid #c4cdd6; box-shadow: inset 0 1px 0 0 #fff, 0 1px 0 0 rgba(0, 0, 0,.05), 0 2px 1px 0 theme(colors.gray.600 / .15), 0 0 0 0 transparent; + .dark & { + background: linear-gradient(180deg, theme(colors.dark.550), theme(colors.dark.600)); + border-color: theme(colors.dark.700); + box-shadow: inset 0 1px 0 0 theme(colors.dark.300), 0 1px 0 0 rgba(200, 200, 200,.05), 0 2px 1px 0 theme(colors.dark.900 / .15), 0 0 0 0 transparent; + } + &:hover:not(:disabled), &:active:not(:disabled) { - @apply text-gray-800; + @apply text-gray-800 dark:text-dark-150; background: linear-gradient(180deg, #f9fafb, #f4f6f8); border-bottom: 1px solid #BFC7D0; + + .dark & { + background: linear-gradient(180deg, theme(colors.dark.600), theme(colors.dark.700)); + border-color: theme(colors.dark.800); + } + } + + &:focus { + @apply ring-2 dark:ring-dark-blue-100; } &.active, &.active:hover { box-shadow: inset 2px 2px 3px 0px rgba(25,30,35,.1); background: theme('colors.gray.400'); border-color: #aeb9c3 !important; + + .dark & { + @apply shadow-inner-dark; + background: theme('colors.dark.400'); + border-color: theme(colors.dark.700) !important; + } } &:disabled { - @apply text-gray-700 opacity-75; + @apply text-gray-700 dark:text-dark-200 opacity-75; } } /* Primary action button */ .btn-primary { - @apply text-white bg-gradient-to-b from-blue-500 to-blue-600 border border-blue-700 border-b-blue-800 !important; + @apply text-white bg-gradient-to-b from-blue-500 to-blue-600 dark:from-dark-blue-100 dark:to-dark-blue-150 border border-blue-700 dark:border-blue-900 border-b-blue-800 dark:border-b-dark-blue-200 !important; box-shadow: inset 0 1px 0 0 theme('colors.blue.400'), 0 1px 0 0 rgba(25,30,35,.05), 0 3px 2px -1px theme(colors.blue.900 / .15), 0 0 0 0 transparent; &:hover:not(:disabled), :active:not(:disabled) { - @apply from-blue-600 to-blue-700 border-blue-800 border-b-blue-900 !important; + @apply from-blue-600 to-blue-700 dark:from-dark-blue-125 dark:to-dark-blue-175 border-blue-800 dark:border-blue-900 border-b-blue-900 dark:border-b-dark-blue-200 !important; box-shadow: inset 0 1px 0 0 theme('colors.blue.500'), 0 1px 0 0 rgba(25,30,35,.05), 0 3px 2px -1px theme(colors.blue.900 / .15), 0 0 0 0 transparent; } &:disabled { - @apply text-blue-200 opacity-75; + @apply text-blue-200 dark:text-dark-blue-200 opacity-75 !important; } } @@ -90,11 +112,11 @@ button { /* Earth isn't flat but these buttons are */ .btn-flat { - @apply text-white text-gray-800 bg-gray-300 flex items-center; + @apply text-white text-gray-800 dark:text-dark-150 bg-gray-300 dark:bg-dark-700 flex items-center; position: inherit; &:hover:not(:disabled), &:active:not(:disabled), &.active { - @apply bg-gray-400; + @apply bg-gray-400 dark:bg-dark-750; } &:focus { @@ -102,11 +124,11 @@ button { } &:active, &:focus:active { - @apply bg-gray-500; + @apply bg-gray-500 dark:bg-dark-800; } &:disabled { - @apply text-gray-600 opacity-75; + @apply text-gray-600 dark:text-dark-200 opacity-75; } } @@ -142,9 +164,19 @@ button { height: 32px; width: 32px; + .dark & { + background: linear-gradient(180deg, theme(colors.dark.500), theme(colors.dark.550)); + border-color: theme(colors.dark.400); + } + &:hover:not(:disabled), &:active:not(:disabled) { background: linear-gradient(180deg, #f9fafb, #f4f6f8); border-color: #c4cdd5; + + .dark & { + background: linear-gradient(180deg, theme(colors.dark.550), theme(colors.dark.600)); + border-color: theme(colors.dark.500); + } } span { @@ -247,14 +279,14 @@ td .btn-icon { ========================================================================== */ .btn-close { - @apply rtl:mr-4 ltr:ml-4 text-center p-0 text-xl text-gray-600 rounded-full w-8 h-8 outline-none shrink-0 leading-none inline-flex items-center justify-center; + @apply rtl:mr-4 ltr:ml-4 text-center p-0 text-xl text-gray-600 dark:text-dark-150 rounded-full w-8 h-8 outline-none shrink-0 leading-none inline-flex items-center justify-center; &:hover { - @apply bg-gray-400; + @apply bg-gray-400 dark:bg-dark-700; } &:active, &:focus:hover { outline: none; - @apply bg-gray-500; + @apply bg-gray-500 dark:bg-dark-750; } } diff --git a/resources/css/elements/dropdowns.css b/resources/css/elements/dropdowns.css index 5d9d4c8d5a..bc47b91285 100644 --- a/resources/css/elements/dropdowns.css +++ b/resources/css/elements/dropdowns.css @@ -6,12 +6,12 @@ @apply p-2; button, a { - @apply block w-full rtl:text-right ltr:text-left rounded-sm text-xs font-normal px-2 py-1 text-gray-800; + @apply block w-full rtl:text-right ltr:text-left rounded-sm text-xs font-normal px-2 py-1 text-gray-800 dark:text-dark-100; line-height: 1.4; white-space: nowrap; &:hover { - @apply bg-blue text-white; + @apply bg-blue dark:bg-dark-600 text-white; } .icon { @@ -38,7 +38,7 @@ } .divider { - @apply h-px bg-gray-400 overflow-hidden; + @apply h-px bg-gray-400 dark:bg-dark-900 overflow-hidden; margin: 6px -8px; /* Hide dividers that come first, last or immediately after another (due to v-if) */ & + &, diff --git a/resources/css/elements/forms.css b/resources/css/elements/forms.css index b615e32a44..649e26c284 100644 --- a/resources/css/elements/forms.css +++ b/resources/css/elements/forms.css @@ -3,11 +3,11 @@ ========================================================================== */ label { - @apply text-gray-800 font-normal text-sm block leading-normal; + @apply text-gray-800 dark:text-dark-150 font-normal text-sm block leading-normal; } input { - @apply placeholder:text-gray-600; + @apply placeholder:text-gray-600 dark:placeholder:text-dark-175; } input[type="checkbox"], @@ -24,12 +24,12 @@ select { ========================================================================== */ .input-text { - @apply appearance-none bg-gray-100 text-gray-800 max-w-full w-full border p-2 rounded shadow-inner placeholder:text-gray-600 text-md @lg:text-base; - @apply border; + @apply appearance-none bg-gray-100 text-gray-800 border max-w-full w-full p-2 rounded shadow-inner placeholder:text-gray-600 text-md @lg:text-base; + @apply dark:bg-dark-650 dark:text-dark-150 dark:border-dark-900 dark:placeholder:text-dark-175 dark:shadow-inner-dark; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; &:focus, &:focus-within { - @apply ring-2 ring-blue-300 outline-none; + @apply ring-2 ring-blue-300 dark:ring-blue-600 outline-none; } &:not(textarea) { @@ -39,10 +39,10 @@ select { /* Used inside tables, grids, and so on */ .input-text-minimal { - @apply appearance-none shadow-none bg-white w-full p-2; + @apply appearance-none shadow-none bg-white dark:bg-dark-550 w-full p-2; &:focus { - @apply outline-none bg-gray-200; + @apply outline-none bg-gray-200 dark:bg-dark-600; } } @@ -52,7 +52,7 @@ input.input-text:read-only, textarea.input-text:read-only, input.input-text-minimal:read-only, .input-text.read-only { - @apply bg-gray-300 text-gray-700; + @apply bg-gray-300 dark:bg-dark-600 text-gray-700 dark:text-dark-200; } /* Input Groups @@ -60,10 +60,12 @@ input.input-text-minimal:read-only, .input-group { @apply appearance-none text-gray-800 w-full p-0 rounded flex items-center; + @apply dark:text-dark-150; height: 2.375rem; &:not(.focus-within-only):focus, &:not(.focus-within-only):focus-within { @apply ring-2 ring-blue-300; + @apply dark:ring-blue-600; .input-text:focus, .input-group-prepend:focus, .input-group-append:focus, .input-group-item:focus { outline: 0; @@ -73,6 +75,7 @@ input.input-text-minimal:read-only, .input-text { @apply flex-1 border-gray-500 min-w-0; + @apply dark:border-dark-900; } .input-text:not(:first-child) { @@ -88,18 +91,30 @@ input.input-text-minimal:read-only, } .input-group-prepend, .input-group-append, .input-group-item { - @apply rtl:rounded-r ltr:rounded-l px-2 border text-sm text-gray-800 select-none; + @apply rtl:rounded-r ltr:rounded-l px-2 border dark:border-dark-900 text-sm text-gray-800 dark:text-dark-150 select-none; background: linear-gradient(180deg, #fff, #f9fafb); border: 1px solid #c4cdd6; box-shadow: 0 1px 0 0 rgba(25,30,35,.05); height: 2.375rem; line-height: 36px; + .dark & { + background: linear-gradient(180deg, theme(colors.dark.500), theme(colors.dark.600)); + border-color: theme(colors.dark.900); + box-shadow: 0 1px 0 0 rgba(0,0,0,.05); + } + &button { @apply cursor-pointer; } } + &:has(.input-text) { + .input-group-prepend, .input-group-append, .input-group-item { + @apply dark:border-dark-900; + } + } + &.focus-within-only { .input-text:focus, .input-group-prepend:focus, .input-group-append:focus, .input-group-item:focus { @apply focus-outline; @@ -119,6 +134,11 @@ input.input-text-minimal:read-only, button.input-group-append:active:not(:disabled) { background: linear-gradient(180deg, #f9fafb, #f4f6f8); border-color: #c4cdd5; + + .dark & { + background: linear-gradient(180deg, theme(colors.dark.550), theme(colors.dark.600)); + border-color: theme(colors.dark.900); + } } .input-group-append { @@ -189,7 +209,7 @@ input.input-text-minimal:read-only, @apply rounded relative; select { - @apply text-sm text-gray-800 shadow-button cursor-pointer block w-full h-full rtl:text-right ltr:text-left relative max-w-full; + @apply text-sm text-gray-800 dark:text-dark-150 shadow-button cursor-pointer block w-full h-full rtl:text-right ltr:text-left relative max-w-full; @apply select-none rounded leading-normal align-middle whitespace-nowrap appearance-none subpixel-antialiased; background: linear-gradient(180deg, #fff, #f9fafb); @@ -198,14 +218,24 @@ input.input-text-minimal:read-only, letter-spacing: -0.01em; padding: .475rem 1.75rem .475rem .75rem ; [dir="rtl"] & { padding: .475rem .75rem .475rem 1.75rem ; } + .dark & { + background: linear-gradient(180deg, theme(colors.dark.500), theme(colors.dark.600)); + border-color: theme(colors.dark.800); + } + &:hover:not(:disabled), &:active:not(:disabled) { background: linear-gradient(180deg, #f9fafb, #f4f6f8); border-color: #c4cdd5; + + .dark & { + background: linear-gradient(180deg, theme(colors.dark.700), theme(colors.dark.750)); + border-color: theme(colors.dark.900); + } } } .select-input-toggle { - @apply pointer-events-none absolute inset-y-0 rtl:left-0 ltr:right-0 flex items-center px-2 text-gray-900; + @apply pointer-events-none absolute inset-y-0 rtl:left-0 ltr:right-0 flex items-center px-2 text-gray-900 dark:text-dark-150; svg { @apply fill-current h-4 w-4; @@ -277,11 +307,11 @@ input[type="file"] { } .help-block { - @apply block mb-2 text-gray-700 text-xs; + @apply block mb-2 text-gray-700 dark:text-dark-150/70 text-xs; a { - @apply text-gray-800 underline; + @apply text-gray-800 dark:text-dark-175 underline; &:hover { - @apply text-blue; + @apply text-blue dark:text-dark-blue-100; } } } diff --git a/resources/css/elements/icons.css b/resources/css/elements/icons.css index 93feb8b045..aa6fc67a7d 100644 --- a/resources/css/elements/icons.css +++ b/resources/css/elements/icons.css @@ -9,6 +9,54 @@ svg { vertical-align: baseline; } +.dark svg { + [fill="#EAEEF9"] { + fill: theme(colors.dark.575); + } + [fill="#989FB0"] { + fill: theme(colors.dark.700); + } + [stroke="#EAEEF9"] { + stroke: theme(colors.dark.200); + } + [stroke="#C2C8D6"] { + stroke: theme(colors.dark.700); + } + [fill="white"] { + fill: theme(colors.dark.200); + } + [stop-color="#B0BACC"] { + stop-color: theme(colors.dark.800); + } + [stop-color="#969EAE"] { + stop-color: theme(colors.dark.950); + } + [stop-color="#FDFEFF"] { + stop-color: theme(colors.dark.200); + } + [stop-color="#ECF0F5"] { + stop-color: theme(colors.dark.250); + } + [fill="#D6DCE8"] { + fill: theme(colors.dark.300); + } + [stroke="#AAB2C5"] { + stroke: theme(colors.dark.950); + } + [fill="#AAB2C5"] { + fill: theme(colors.dark.950); + } + [fill="#D5DDEA"] { + fill: theme(colors.dark.700) + } + [fill="#C2C8D6"] { + fill: theme(colors.black) + } + [stroke="#989FB0"] { + stroke: theme(colors.dark.200); + } +} + .heroicon-component-accent { fill: theme('colors.blue.DEFAULT'); } @@ -27,10 +75,10 @@ svg { } .icon-header-avatar { + @apply rounded-full shadow overflow-hidden flex-shrink-0; height: 32px; width: 32px; line-height: 32px; - @apply rounded-full shadow overflow-hidden; } .icon-user-initials { diff --git a/resources/css/elements/tables.css b/resources/css/elements/tables.css index a420bb28ee..60cd18585a 100644 --- a/resources/css/elements/tables.css +++ b/resources/css/elements/tables.css @@ -16,16 +16,16 @@ } .data-list-bulk-actions { - @apply bg-white absolute w-full py-2 z-1; + @apply bg-white dark:bg-dark-750 absolute w-full py-2 z-1; padding-left: 56px ; [dir="rtl"] & { padding-right: 56px ; padding-left: 0 ; } } .mode-grid .data-list-bulk-actions { - @apply bg-white w-full pt-3 pb-1 z-10 rtl:pr-4 ltr:pl-4 static; + @apply bg-white dark:bg-dark-800 w-full pt-3 pb-1 z-10 rtl:pr-4 ltr:pl-4 static; } .mode-grid .rotating-dots-button { - @apply bg-white; + @apply bg-white dark:bg-dark-400; } .data-list-footer { @@ -33,14 +33,15 @@ } .data-table { - @apply rtl:text-right ltr:text-left text-gray-700 outline-none max-w-full w-full; + @apply rtl:text-right ltr:text-left text-gray-700 dark:text-dark-150 outline-none max-w-full w-full; overflow-x: auto; thead { @apply bg-gray-100 text-xs text-gray-900; + @apply dark:bg-dark-700 dark:text-dark-100; tr { - @apply border-b; + @apply border-b dark:border-dark-900; } th { @@ -48,7 +49,7 @@ &:first-child { @apply rtl:rounded-tr-lg ltr:rounded-tl-lg; } &:last-child { @apply rtl:rounded-tl-lg ltr:rounded-tr-lg; } &:hover { - @apply text-gray-900; + @apply text-gray-900 dark:text-dark-100; } } th.handle-column { @@ -62,10 +63,10 @@ tbody { outline: none; tr { - @apply border-b border-gray-400 text-sm; + @apply border-b border-gray-400 dark:border-dark-900 text-sm; &.row-selected { - @apply bg-gray-200; + @apply bg-gray-200 dark:bg-dark-600; } &:first-child { @@ -91,7 +92,7 @@ } &:hover { - @apply bg-gray-100; + @apply bg-gray-100 dark:bg-dark-575; } th { @@ -99,7 +100,7 @@ } td { - @apply py-2 px-4 break-words ; + @apply py-2 px-4 break-words; } td.table-drag-handle { @@ -117,7 +118,7 @@ @apply cursor-pointer select-none; &:hover { - @apply text-blue-500; + @apply text-blue-500 dark:text-dark-blue-100; } &.current-column { @@ -148,6 +149,19 @@ @apply absolute rtl:right-0 ltr:left-0 rtl:left-0 ltr:right-0 top-0 bottom-0 -z-1 ; content: ''; background-image: linear-gradient(to right, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%); + + .dark & { + background-image: linear-gradient(to right, theme(colors.dark.550) 70%, theme(colors.dark.550 / 0%) 100%); + } + } + + &:has(input:checked) { + &:after { + .dark & { + background-image: linear-gradient(to right, theme(colors.dark.750) 70%, theme(colors.dark.750 / 0%) 100%); + @apply border-b border-dark-550; + } + } } } @@ -159,6 +173,19 @@ @apply absolute rtl:right-0 ltr:left-0 rtl:left-0 ltr:right-0 top-0 bottom-0 -z-1; content: ''; background-image: linear-gradient(to left, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%); + + .dark & { + background-image: linear-gradient(to left, theme(colors.dark.550) 70%, theme(colors.dark.550 / 0%) 100%); + } + } + + &:has(input:checked) { + &:after { + .dark & { + background-image: linear-gradient(to left, theme(colors.dark.750) 70%, theme(colors.dark.750 / 0%) 100%); + @apply border-b border-dark-550; + } + } } } @@ -168,6 +195,10 @@ @apply absolute rtl:right-0 ltr:left-0 rtl:left-0 ltr:right-0 top-0 bottom-0 -z-1; content: ''; background-image: linear-gradient(to right, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%); + + .dark & { + background-image: linear-gradient(to right, theme(colors.dark.600) 70%, theme(colors.dark.600 / 0%) 100%); + } } } @@ -179,42 +210,46 @@ @apply absolute rtl:right-0 ltr:left-0 rtl:left-0 ltr:right-0 top-0 bottom-0 -z-1; content: ''; background-image: linear-gradient(to left, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%); + + .dark & { + background-image: linear-gradient(to left, theme(colors.dark.600) 70%, theme(colors.dark.600 / 0%) 100%); + } } } tbody tr.row-selected .checkbox-column:after { background-image: linear-gradient(to right, theme(colors.gray.200) 70%, theme(colors.gray.200 / 0%) 100%); + + .dark & { + background-image: linear-gradient(to right, theme(colors.dark.600) 70%, theme(colors.dark.600 / 0%) 100%); + } } tbody tr.row-selected .actions-column:after { background-image: linear-gradient(to left, theme(colors.gray.200) 70%, theme(colors.gray.200 / 0%) 100%); + + .dark & { + background-image: linear-gradient(to left, theme(colors.dark.600) 70%, theme(colors.dark.600 / 0%) 100%); + } } tbody tr:hover .checkbox-column:after { background-image: linear-gradient(to right, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%); + + .dark & { + background-image: linear-gradient(to right, theme(colors.dark.500) 70%, theme(colors.dark.500 / 0%) 100%); + } } tbody tr:hover .actions-column:after { background-image: linear-gradient(to left, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%); - } -} -/* .data-table[data-size="sm"] { - thead th.checkbox-column, - thead th.actions-column, - tbody th.checkbox-column, - tbody th.actions-column { - position: static !important; - background: none !important; + .dark & { + background-image: linear-gradient(to left, theme(colors.dark.500) 70%, theme(colors.dark.500 / 0%) 100%); + } } -} */ - +} -/* @screen md { - .data-table { - @apply w-full table; - } -} */ .data-list-header ~ .data-table { thead th { @@ -223,30 +258,35 @@ } .data-list-filter-link { - @apply border-gray-400 text-gray-600 rtl:ml-2 ltr:mr-2 p-3 pb-2; + @apply border-gray-400 dark:border-dark-900 text-gray-600 dark:text-dark-150 rtl:ml-2 ltr:mr-2 p-3 pb-2; &:hover { - @apply border-b-3 text-gray-700; + @apply border-b-3 dark:border-dark-900 text-gray-700 dark:text-dark-100; } &:focus { - @apply border-blue-300; + @apply border-blue-300 dark:border-dark-blue-100; outline: 0; box-shadow: inset 0 0 0 0.2rem rgba(0,125,255,.25); } &.active { - @apply border-b-3 border-blue text-gray-800; + @apply border-b-3 border-blue dark:border-dark-blue-100 text-gray-800 dark:text-dark-100; } } td.table-drag-handle { - @apply w-3 rtl:border-l ltr:border-r h-full p-2; + @apply w-3 rtl:border-l ltr:border-r dark:border-dark-900 h-full p-2; min-width: 16px; cursor: grab; background: theme('colors.gray.200') url('../../svg/icons/light/drag-dots.svg') center center no-repeat; background-size: 7px 17px; - &:hover { @apply bg-gray-300; } + + .dark & { + background-color: theme(colors.dark.700); + } + + &:hover { @apply bg-gray-300 dark:bg-dark-750; } } .table-row-placeholder { @@ -343,7 +383,7 @@ table.control { .relationship-index-field { min-width: 10vw; .relationship-index-field-item { - @apply rounded bg-gray-100 border px-1 flex items-center text-2xs rtl:ml-1 ltr:mr-1; + @apply rounded bg-gray-100 dark:bg-dark-500 border dark:border-dark-400 px-1 flex items-center text-2xs rtl:ml-1 ltr:mr-1; a { @apply line-clamp-1; } @@ -351,7 +391,7 @@ table.control { } .date-index-field { - @apply whitespace-nowrap text-gray-800; + @apply whitespace-nowrap text-gray-800 dark:text-dark-150; } .slug-index-field { @@ -359,14 +399,14 @@ table.control { } .status-index-field { - @apply inline-block text-xs bg-gray-300 text-gray-800 shrink rounded-full px-2 py-0.5 text-center justify-center; + @apply inline-block text-xs bg-gray-300 dark:bg-dark-200 text-gray-800 dark:text-dark-150 shrink rounded-full px-2 py-0.5 text-center justify-center; &.status-published:not(.status-private) { - @apply text-green-900 bg-green-200 ; + @apply text-green-900 dark:text-green-950 bg-green-200 dark:bg-green-300; } &.status-scheduled { - @apply text-amber-900 bg-amber-200; + @apply text-amber-900 dark:text-amber-950 bg-amber-200 dark:bg-amber-300; } } @@ -375,6 +415,6 @@ table.control { .role-index-field-item, .groups-index-field-item { - @apply rounded bg-gray-100 border px-1 inline-block text-2xs line-clamp-1 mb-1; + @apply rounded bg-gray-100 dark:bg-dark-700 border dark:border-dark-900 px-1 inline-block text-2xs line-clamp-1 mb-1; } } diff --git a/resources/css/tailwind.css b/resources/css/tailwind.css index 86aa4b6304..59bfe33411 100644 --- a/resources/css/tailwind.css +++ b/resources/css/tailwind.css @@ -4,3 +4,4 @@ @import "tailwindcss/utilities"; @import "core/utilities"; @import "rtl"; +@import "dark"; diff --git a/resources/css/vendors/codemirror.css b/resources/css/vendors/codemirror.css index bace752367..940fca8a2a 100644 --- a/resources/css/vendors/codemirror.css +++ b/resources/css/vendors/codemirror.css @@ -109,18 +109,18 @@ .cm-link {text-decoration: underline;} .cm-strikethrough {text-decoration: line-through;} - .cm-s-default .cm-keyword {color: #708;} + .cm-s-default .cm-keyword {color: #708; @apply dark:text-purple-dark;} .cm-s-default .cm-atom {color: #219;} .cm-s-default .cm-number {color: #164;} - .cm-s-default .cm-def {color: #00f;} + .cm-s-default .cm-def {color: #00f; @apply dark:text-blue-600;} .cm-s-default .cm-variable, .cm-s-default .cm-punctuation, .cm-s-default .cm-property, .cm-s-default .cm-operator {} - .cm-s-default .cm-variable-2 {color: #05a;} - .cm-s-default .cm-variable-3 {color: #085;} - .cm-s-default .cm-comment {color: #a50;} - .cm-s-default .cm-string {color: #a11;} + .cm-s-default .cm-variable-2 {color: #05a; @apply dark:text-blue-600;} + .cm-s-default .cm-variable-3 {color: #085; @apply dark:text-green-600;} + .cm-s-default .cm-comment {color: #a50; @apply dark:text-orange-dark;} + .cm-s-default .cm-string {color: #a11; @apply dark:text-red-500;} .cm-s-default .cm-string-2 {color: #f50;} .cm-s-default .cm-meta {color: #555;} .cm-s-default .cm-qualifier {color: #555;} @@ -129,7 +129,7 @@ .cm-s-default .cm-tag {color: #170;} .cm-s-default .cm-attribute {color: #00c;} .cm-s-default .cm-hr {color: #999;} - .cm-s-default .cm-link {color: #00c;} + .cm-s-default .cm-link {color: #00c; @apply dark:text-blue-500;} .cm-s-default .cm-error {color: #f00;} .cm-invalidchar {color: #f00;} @@ -375,12 +375,14 @@ ========================================================================== */ .cm-s-material.CodeMirror { - background-color: #263238; + background: #263238; + @apply dark:bg-dark-650; color: #EEFFFF; } .cm-s-material .CodeMirror-gutters { background: #263238; + @apply dark:bg-dark-650; color: #546E7A; border: none; } diff --git a/resources/css/vendors/vue-select.css b/resources/css/vendors/vue-select.css index a279b3159f..9547ce964b 100644 --- a/resources/css/vendors/vue-select.css +++ b/resources/css/vendors/vue-select.css @@ -26,7 +26,7 @@ } .vs--disabled .vs__dropdown-toggle { - @apply bg-gray-200; + @apply bg-gray-200 dark:bg-dark-550; } .v-select[dir=rtl] .vs__actions { @@ -48,7 +48,8 @@ } .vs__dropdown-toggle { - @apply appearance-none text-gray-800 w-full p-0 rounded flex items-center bg-gray-100 shadow-inner border border-gray-500; + @apply appearance-none text-gray-800 w-full p-0 rounded flex items-center bg-gray-100 shadow-inner border border-gray-500; + @apply dark:text-dark-150 dark:bg-dark-650 dark:border-dark-900 dark:shadow-inner-dark; height: 2.375rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; @@ -71,7 +72,7 @@ } .v-select .vs__selected-options { - @apply appearance-none text-gray-800 text-sm; + @apply appearance-none text-gray-800 dark:text-dark-150 text-sm; @apply flex basis-1 grow rounded-s relative h-full py-1 rtl:pr-2 ltr:pl-2 leading-normal; width: calc(100% - 32px); @@ -104,12 +105,12 @@ .vs__open-indicator { @apply clickable; - @apply flex items-center rounded-e px-2 text-sm shrink-0 h-full border-e-0; + @apply flex items-center rounded-e px-2 text-sm shrink-0 h-full border-e-0 dark:border-dark-800; /* height: 2.375rem; */ } .vs__open-indicator svg { - @apply flex items-center text-gray-900 relative w-4 h-4; + @apply flex items-center text-gray-900 dark:text-dark-100 relative w-4 h-4; transform: translateY(1px) scale(1); transition: -webkit-transform .15s cubic-bezier(1, -.115, .975, .855); transition: transform .15s cubic-bezier(1, -.115, .975, .855); @@ -127,7 +128,7 @@ } .vs__clear { - @apply text-gray-900 rtl:pl-2 ltr:pr-2 rtl:pr-px ltr:pl-px rtl:@xs:pr-2 ltr:@xs:pl-2 cursor-pointer text-base bg-transparent shadow-none; + @apply text-gray-900 dark:text-dark-100 rtl:pl-2 ltr:pr-2 rtl:pr-px ltr:pl-px rtl:@xs:pr-2 ltr:@xs:pl-2 cursor-pointer text-base bg-transparent shadow-none; &:hover { @apply text-blue; } @@ -135,7 +136,7 @@ .vs__dropdown-menu { @apply block absolute z-top m-0 w-full; - @apply bg-white flex flex-col shadow-popover block p-4 rounded-md rtl:text-right ltr:text-left; + @apply bg-white dark:bg-dark-550 flex flex-col shadow-popover dark:shadow-dark-popover block p-4 rounded-md rtl:text-right ltr:text-left; top: 46px; padding: 0; max-height: 350px; @@ -154,12 +155,12 @@ } .vs__dropdown-option { - @apply block text-sm text-gray-800 cursor-pointer; + @apply block text-sm text-gray-800 dark:text-dark-100 cursor-pointer; padding: 6px 12px; } .vs__dropdown-option--highlight { - @apply bg-gray-300; + @apply bg-gray-300 dark:bg-dark-blue-200; } .vs__dropdown-option--selected { @@ -175,10 +176,10 @@ } .vs__deselect { - @apply flex items-center cursor-pointer text-gray-600 rtl:mr-1 ltr:ml-1 p-0 outline-none; + @apply flex items-center cursor-pointer text-gray-600 dark:text-dark-175 rtl:mr-1 ltr:ml-1 p-0 outline-none; &:hover { - @apply text-gray-700; + @apply text-gray-700 dark:text-dark-100; } &:focus { @@ -219,7 +220,7 @@ .vs__search, .vs__search:focus { - @apply appearance-none text-sm text-gray-800 rtl:pl-2 ltr:pr-2 border-transparent outline-none m-0 p-0 bg-transparent max-w-full; + @apply appearance-none text-sm text-gray-800 dark:text-dark-150 rtl:pl-2 ltr:pr-2 border-transparent outline-none m-0 p-0 bg-transparent max-w-full; line-height: 1.4; border-left: none; box-shadow: none; diff --git a/resources/js/app.js b/resources/js/app.js index e6a6b6b000..5e7a78fcfe 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -100,6 +100,7 @@ import './components/Permission'; import GlobalSearch from './components/GlobalSearch.vue'; import GlobalSiteSelector from './components/GlobalSiteSelector.vue'; +import DarkModeToggle from './components/DarkModeToggle.vue'; import Login from './components/login/login'; import LoginModal from './components/login/LoginModal.vue'; import BaseEntryCreateForm from './components/entries/BaseCreateForm.vue'; @@ -156,6 +157,7 @@ Statamic.app({ components: { GlobalSearch, GlobalSiteSelector, + DarkModeToggle, Login, LoginModal, BaseEntryCreateForm, diff --git a/resources/js/components/AddonList.vue b/resources/js/components/AddonList.vue index bb03a468f1..7411f6c0bf 100644 --- a/resources/js/components/AddonList.vue +++ b/resources/js/components/AddonList.vue @@ -3,7 +3,7 @@