diff --git a/public/css/style.css b/public/css/style.css
index ae48e89..25ebc4b 100644
--- 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
new file mode 100644
index 0000000..1329b5c
--- /dev/null
+++ 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
index 7a3be63..376394a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,7 +8,9 @@
+
+
@@ -23,6 +25,9 @@
diff --git a/public/js/main.js b/public/js/main.js
index abf00df..1aa9d21 100644
--- 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();
-});
\ No newline at end of file
+ });
+
+ 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);
+});