Merge pull request #33 from georapbox/dark-theme

Dark theme

package.json

@@ -21,23 +21,24 @@
   "author": "George Raptis <[email protected]>",
   "license": "MIT",
   "devDependencies": {
+    "@eslint/js": "~9.13.0",
     "@parcel/packager-raw-url": "~2.12.0",
     "@parcel/transformer-webmanifest": "~2.12.0",
+    "eslint": "~9.13.0",
     "gh-pages": "~6.2.0",
+    "globals": "~15.11.0",
     "npm-run-all": "~4.1.5",
     "parcel": "~2.12.0",
+    "prettier": "~3.3.3",
     "rimraf": "~6.0.1",
-    "workbox-cli": "~7.1.0",
-    "@eslint/js": "~9.12.0",
-    "eslint": "~9.12.0",
-    "globals": "~15.11.0",
-    "prettier": "~3.3.3"
+    "workbox-cli": "~7.1.0"
   },
   "browserslist": "> 0.5%, last 2 versions, not dead",
   "dependencies": {
     "@georapbox/capture-photo-element": "~5.0.0",
     "@georapbox/files-dropzone-element": "~2.0.1",
     "@georapbox/modal-element": "~1.8.0",
+    "@georapbox/theme-toggle-element": "~4.0.2",
     "@georapbox/web-share-element": "~3.1.1",
     "bootstrap": "~5.3.3",
     "emoji-picker-element": "~1.22.8",

src/css/main.css

@@ -1,5 +1,4 @@
 :root {
-  --body-bg-color: #eae9e9;
   --body-color: #212529;
   --move-btn-width: 60px;
   --move-btn-height: 34px;
@@ -16,7 +15,6 @@
 
 body {
   overflow-x: hidden;
-  background-color: var(--body-bg-color);
 }
 
 [hidden] {
@@ -143,6 +141,20 @@ details summary:focus-visible {
   padding: 1rem;
   text-align: center;
   text-wrap: balance;
+  background-color: var(--bs-tertiary-bg);
+  color: var(--bs-body-color);
+}
+
+.instructions__image {
+  width: 60px;
+  height: 60px;
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-image: url(../assets/icons/add-image-light.svg);
+}
+
+:root[data-bs-theme="dark"] .instructions__image {
+  content: url(../assets/icons/add-image-dark.svg);
 }
 
 .errors-container {
@@ -179,10 +191,14 @@ button[data-button="delete-text-box"] {
 }
 
 button[data-button="duplicate-text-box"] {
-  background-image: url(../assets/icons/duplicate.svg);
+  background-image: url(../assets/icons/duplicate-light.svg);
   background-size: 70%;
 }
 
+:root[data-bs-theme="dark"] button[data-button="duplicate-text-box"] {
+  background-image: url(../assets/icons/duplicate-dark.svg);
+}
+
 button[data-button="delete-text-box"] {
   background-image: url(../assets/icons/trash.svg);
   margin-inline-start: 0.25rem;
@@ -308,8 +324,11 @@ capture-photo[loading] [slot="actions"] {
 modal-element {
   --me-width: fit-content;
   --me-border-radius: var(--bs-border-radius);
-  --me-border-width: 0;
+  --me-border-width: 1px;
+  --me-border-color: var(--bs-border-color);
   --me-box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.30);
+  --me-backdrop-background: rgba(0, 0, 0, 0.7);
+  --me-backdrop-filter: blur(2px);
 }
 
 #videoModal {
@@ -335,11 +354,11 @@ modal-element::part(base):focus-visible {
 
 modal-element [slot="header"] {
   margin: 0;
-  color: var(--body-color);
+  color: var(--bs-body-color);
 }
 
 modal-element::part(close) {
-  color: var(--body-color);
+  color: var(--bs-body-color);
   border-radius: var(--bs-border-radius);
   transition: box-shadow 0.15s ease-in-out;
 }
@@ -376,6 +395,10 @@ modal-element [slot="footer"] {
 }
 
 @media screen and (min-width: 768px) {
+  .meme-column {
+    border-inline-end: 1px solid var(--bs-border-color);
+  }
+
   .dropzone {
     position: sticky;
     top: 0.25rem;
@@ -404,14 +427,14 @@ modal-element [slot="footer"] {
 /* Emoji picker */
 .emoji-picker-details {
   margin-bottom: 0.5rem;
-  background-color: var(--bs-gray-200);
+  background-color: var(--bs-body-bg);
   border-radius: var(--bs-border-radius);
+  border: 1px solid var(--bs-border-color);
 }
 
 .emoji-picker-details > summary {
   padding: 0.5rem 1rem;
-  background-color: var(--bs-gray-300);
-  border: 1px solid var(--bs-gray-300);
+  background-color: var(--bs-body-bg);
   border-radius: var(--bs-border-radius);
   cursor: pointer;
 }
@@ -423,21 +446,40 @@ modal-element [slot="footer"] {
 
 emoji-picker {
   --border-color: var(--bs-border-color);
-  --background: #ffffff;
+  --background: var(--bs-bg);
   --input-border-color: var(--bs-border-color);
   --input-border-radius: var(--bs-border-radius);
   --input-padding: 0.375rem 0.75rem;
   --outline-color: #0d6efd40;
   --outline-size: 4px;
   --indicator-color: var(--bs-primary);
   --button-hover-background: var(--bs-gray-300);
+  --input-font-color: var(--bs-body-color);
 
   width: 100%;
   height: 255px;
-  border: 0;
   padding: 0 0.5rem 0.5rem 0.5rem;
 }
 
+/* Theme toggle */
+theme-toggle {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+}
+
+theme-toggle::part(base) {
+  padding: 0.5rem;
+  border-radius: var(--bs-border-radius);
+  font-size: 1.1429rem;
+  transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+theme-toggle::part(base):focus-visible {
+  outline: 0;
+  box-shadow: var(--focus-ring);
+}
+
 /* Utils */
 
 .text-underline {