diff --git a/public/css/style.scss b/public/css/style.scss
index dc3fcb168..363dc1148 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -308,6 +308,29 @@ a:hover {
   }
 }
 
+#customThemeShareWrapper {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.75);
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 1000;
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  padding: 5rem 0;
+
+  #customThemeShare {
+    width: 50vw;
+    background: var(--bg-color);
+    border-radius: var(--roundness);
+    padding: 2rem;
+    display: grid;
+    gap: 1rem;
+    overflow-y: scroll;
+  }
+}
 
 #resultEditTagsPanelWrapper {
   width: 100%;
diff --git a/public/index.html b/public/index.html
index a24345acc..0dc9e673b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -37,6 +37,12 @@
     Important information about your account. Please click this message.
   </div>
   <div class="notification">Signed in</div>
+  <div id="customThemeShareWrapper" class="hidden">
+    <div id="customThemeShare" action="">
+      <input type="text">
+      <div class="button">ok</div>
+    </div>
+  </div>
   <div id="tagsWrapper" class="hidden">
     <div id="tagsEdit" action="" tagid="">
       <div class="title"></div>
@@ -999,7 +1005,10 @@
                 <label for="--colorful-error-extra-color">#e2b714</label>
                 <input type="color" value="" id="--colorful-error-extra-color">
               </span>
-              <div class="button saveCustomThemeButton" style="grid-column: 4;">Save</div>
+              <div style="grid-column: 3/5;display:grid;gap:1rem;grid-auto-flow: column;">
+                <div class="button" id="shareCustomThemeButton">share</div>
+                <div class="button saveCustomThemeButton">save</div>
+              </div>
             </div>
             <div tabContent="preset" class="tabContent buttons">
             </div>
diff --git a/public/js/settings.js b/public/js/settings.js
index ae2ad8d39..983ff17aa 100644
--- a/public/js/settings.js
+++ b/public/js/settings.js
@@ -71,6 +71,73 @@ function updateSettingsPage() {
   }
 }
 
+function showCustomThemeShare() {
+  if ($("#customThemeShareWrapper").hasClass("hidden")) {
+    let save = [];
+    $.each(
+      $(".pageSettings .section.customTheme [type='color']"),
+      (index, element) => {
+        save.push($(element).attr("value"));
+      }
+    );
+    $("#customThemeShareWrapper input").val(JSON.stringify(save));
+    $("#customThemeShareWrapper")
+      .stop(true, true)
+      .css("opacity", 0)
+      .removeClass("hidden")
+      .animate({ opacity: 1 }, 100, (e) => {
+        $("#customThemeShare input").focus();
+        $("#customThemeShare input").select();
+        $("#customThemeShare input").focus();
+      });
+  }
+}
+
+function hideCustomThemeShare() {
+  if (!$("#customThemeShareWrapper").hasClass("hidden")) {
+    try {
+      config.customThemeColors = JSON.parse(
+        $("#customThemeShareWrapper input").val()
+      );
+    } catch (e) {
+      showNotification(
+        "Something went wrong. Reverting to default custom colors.",
+        3000
+      );
+      config.customThemeColors = defaultConfig.customThemeColors;
+    }
+    setCustomThemeInputs();
+    applyCustomThemeColors();
+    $("#customThemeShareWrapper input").val("");
+    $("#customThemeShareWrapper")
+      .stop(true, true)
+      .css("opacity", 1)
+      .animate(
+        {
+          opacity: 0,
+        },
+        100,
+        (e) => {
+          $("#customThemeShareWrapper").addClass("hidden");
+        }
+      );
+  }
+}
+
+$("#customThemeShareWrapper").click((e) => {
+  if ($(e.target).attr("id") === "customThemeShareWrapper") {
+    hideCustomThemeShare();
+  }
+});
+
+$("#customThemeShare .button").click((e) => {
+  hideCustomThemeShare();
+});
+
+$("#shareCustomThemeButton").click((e) => {
+  showCustomThemeShare();
+});
+
 function refreshTagsSettingsSection() {
   if (firebase.auth().currentUser !== null && dbSnapshot !== null) {
     let tagsEl = $(".pageSettings .section.tags .tagsList").empty();
@@ -192,7 +259,9 @@ function setActiveTimerColorButton() {
 }
 
 function setActiveTimerOpacityButton() {
-  $(`.pageSettings .section.timerOpacity .buttons .button`).removeClass("active");
+  $(`.pageSettings .section.timerOpacity .buttons .button`).removeClass(
+    "active"
+  );
   $(
     `.pageSettings .section.timerOpacity .buttons .button[opacity="` +
       config.timerOpacity +