tanabe · Airbus6804 · Mar 11, 2023 · Mar 11, 2023
diff --git a/public/css/style.css b/public/css/style.css
@@ -69,8 +69,17 @@ img {
 
 #preview-wrapper {
   padding-left: 10px;
+
+
 }
 
+#output[dark="true"], #output[dark="true"] * , #preview-wrapper[dark="true"], #container[dark="true"]{
+  background-color: #1d1f21 !important;
+  color: #b8c1bf;
+}
+
+
+
 .column {
   padding: 0;
   margin: 0;
@@ -123,3 +132,8 @@ img {
   color: #fff;
   text-decoration: none;
 }
+
+#toggleLightModeLabel{
+  position: absolute;
+  left: 1rem;
+} 
diff --git a/public/css/switch.css b/public/css/switch.css
@@ -0,0 +1,67 @@
+/***
+
+Switch from https://www.cssscript.com/realistic-ios-switch-pure-css/
+
+***/
+
+.form-switch {
+  display: inline-block;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  color: white
+}
+
+.form-switch i {
+  position: relative;
+  display: inline-block;
+ margin-right: .5rem;
+  width: 46px;
+  height: 26px;
+  background-color: #e6e6e6;
+  border-radius: 23px;
+  vertical-align: text-bottom;
+  transition: all 0.3s linear;
+}
+
+.form-switch i::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 42px;
+  height: 22px;
+  background-color: #fff;
+  border-radius: 11px;
+  transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
+  transition: all 0.25s linear;
+}
+
+.form-switch i::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 22px;
+  height: 22px;
+  background-color: #fff;
+  border-radius: 11px;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
+  transform: translate3d(2px, 2px, 0);
+  transition: all 0.2s ease-in-out;
+}
+
+.form-switch:active i::after {
+  width: 28px;
+  transform: translate3d(2px, 2px, 0);
+}
+
+.form-switch:active input:checked + i::after { transform: translate3d(16px, 2px, 0); }
+
+.form-switch input { display: none; }
+
+.form-switch input:checked + i { background-color: #4c4e4d; }
+
+.form-switch input:checked + i::before { transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0); }
+
+.form-switch input:checked + i::after { transform: translate3d(22px, 2px, 0); }
+
+
+
diff --git a/public/index.html b/public/index.html
@@ -8,7 +8,9 @@
     <meta name="description" content="This is the online markdown editor with live preview.">
 
     <link rel="stylesheet" type="text/css" href="css/style.css">
+    <link rel="stylesheet" href="css/switch.css">
     <link rel="stylesheet" type="text/css" href="css/github-markdown.css">
+
     <link rel="icon" type="image/png" href="favicon.png">
 
     <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
@@ -23,6 +25,9 @@
   <body>
 
     <div id="header">
+      <label class="form-switch" id="toggleLightModeLabel">
+        <input type="checkbox" id="toggleLightModeInput">
+      <i></i> Toggle dark mode </label>
       <h1><a href="/">Markdown Live Preview</a></h1>
     </div>
 

diff --git a/public/js/main.js b/public/js/main.js
@@ -1,50 +1,89 @@
-$(function() {
-    let isEdited = false;
-
-    let adjustScreen = () => {
-        let screenHeight = $(window).height();
-        let headerHeight = $('#header').outerHeight();
-        let footerHeight = $('#footer').outerHeight();
-        let containerHeight = screenHeight - headerHeight - footerHeight;
-        $('#container').css({ top: `${headerHeight}px` });
-        $('.column').css({ height: `${containerHeight}px`});
-    };
-
-    $(window).resize(() => {
-        adjustScreen();
-    });
-
-    // Setup editor
-    let editor = ace.edit('editor');
-    editor.getSession().setUseWrapMode(true);
-    editor.renderer.setScrollMargin(10, 10, 10, 10);
-    editor.setOptions({
-        maxLines: Infinity,
-        indentedSoftWrap: false,
-        fontSize: 14,
-        autoScrollEditorIntoView: true,
-        theme: 'ace/theme/github',
-        // TODO consider some options
-    });
-    editor.on('change', () => {
-        isEdited = true;
-        convert();
-        adjustScreen();
-    });
-
-    let convert = () => {
-        let html = marked(editor.getValue());
-        let sanitized = DOMPurify.sanitize(html);
-        $('#output').html(sanitized);
-    }
-
-    //leave
-    $(window).bind('beforeunload', function() {
-      if (isEdited) {
-        return 'Are you sure you want to leave? Your changes will be lost.';
-      }
-    });
+$(function () {
+  let isEdited = false;
+
+  let adjustScreen = () => {
+    let screenHeight = $(window).height();
+    let headerHeight = $("#header").outerHeight();
+    let footerHeight = $("#footer").outerHeight();
+    let containerHeight = screenHeight - headerHeight - footerHeight;
+    $("#container").css({ top: `${headerHeight}px` });
+    $(".column").css({ height: `${containerHeight}px` });
+  };
+
+  $(window).resize(() => {
+    adjustScreen();
+  });
+
+  // Setup editor
+  let editor = ace.edit("editor");
+  editor.getSession().setUseWrapMode(true);
+  editor.renderer.setScrollMargin(10, 10, 10, 10);
+  editor.setOptions({
+    maxLines: Infinity,
+    indentedSoftWrap: false,
+    fontSize: 14,
+    autoScrollEditorIntoView: true,
+    theme: "ace/theme/github",
+    // TODO consider some options
+  });
 
+  ////ace/theme/tomorrow_night
+
+  editor.on("change", () => {
+    isEdited = true;
     convert();
     adjustScreen();
-});
+  });
+
+  let convert = () => {
+    let html = marked(editor.getValue());
+    let sanitized = DOMPurify.sanitize(html);
+    $("#output").html(sanitized);
+  };
+
+  //leave
+  $(window).bind("beforeunload", function () {
+    if (isEdited) {
+      return "Are you sure you want to leave? Your changes will be lost.";
+    }
+  });
+
+  convert();
+  adjustScreen();
+
+  //DARK MODE FUNCTIONALITIES
+
+  document.getElementById("toggleLightModeInput").checked = JSON.parse(
+    localStorage.getItem("darkmode") ?? "true"
+  );
+  updateLightMode();
+
+  function updateLightMode() {
+    const toggle = document.getElementById("toggleLightModeInput");
+
+    if (toggle.checked) {
+      editor.setOptions({
+        theme: "ace/theme/tomorrow_night",
+      });
+    } else {
+      editor.setOptions({
+        theme: "ace/theme/github",
+      });
+    }
+
+    document
+      .getElementById("output")
+      .setAttribute("dark", toggle.checked.toString());
+    document
+      .getElementById("preview-wrapper")
+      .setAttribute("dark", toggle.checked.toString());
+    document
+      .getElementById("container")
+      .setAttribute("dark", toggle.checked.toString());
+    localStorage.setItem("darkmode", `${toggle.checked}`);
+  }
+
+  document
+    .getElementById("toggleLightModeInput")
+    .addEventListener("click", updateLightMode);
+});