schollz · January 18, 2023 02:45
diff --git a/dark_mode.html b/dark_mode.html
 <html>

 <head>
    <style>
    html {
        font-family: Roboto, arial, sans-serif;
        font-size: 18px;
        margin: auto;
        max-width: 700px;
    }

    pre,
    code {
        font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
        ;
        font-size: 16px;
        background-color: #e2e2e2;
        color: #1b1b1b;
        border-radius: 3px;
    }

    pre {
        overflow: auto;
        word-wrap: normal;
        padding: 1em;
        line-height: 1.45;
        text-align: left;
    }

    pre code {
        background: transparent;
        display: inline;
        padding: 0;
        line-height: inherit;
        word-wrap: normal;
    }

    pre code::before,
    pre code::after {
        content: normal;
    }

    pre>code {
        border: 0;
        white-space: pre;
        word-break: normal;
    }

    code {
        padding: 0.2em 0;
        margin: 0;
    }

    code::before,
    code::after {
        letter-spacing: -0.2em;
        content: '\00a0';
    }

    img {
        width: 100%;
    }



    body {
        background: #fff;
        color: #202124;
    }

    body.dark {
        background: #202124;
        color: #bdc1c6;
    }

    .dark pre,
    .dark code {
        font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
        ;
        font-size: 16px;
        background-color: #303134;
        color: #dde1e6;
        border-radius: 3px;
    }


    a:hover {
        text-decoration: underline;
    }

    a {
        text-decoration: none;
    }

    .dark a {
        color: #8ab4f8;
        -webkit-tap-highlight-color: rgba(255, 255, 255, .1);
    }

    .dark a:visited {
        color: #c58af9;
    }
    </style>
 </head>

 <body class="">
    <span style="top:1em;right:1em;position: absolute;">
        <div class="sun" style="display: inline;">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun">
                <circle cx="12" cy="12" r="5"></circle>
                <line x1="12" y1="1" x2="12" y2="3"></line>
                <line x1="12" y1="21" x2="12" y2="23"></line>
                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                <line x1="1" y1="12" x2="3" y2="12"></line>
                <line x1="21" y1="12" x2="23" y2="12"></line>
                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
            </svg>
        </div>
        <div class="moon" style="display: none;">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon">
                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
            </svg>
        </div>
    </span>
    <pre><code>$ apt install something
 $ apt update</code></pre>
    hi <a href="test">ok</a>
    <script>
    function setDarkMode(cvalue) {
        cname = "darkmode";
        exdays = 1;
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toUTCString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    }

    function getDarkMode() {
        var cname = "darkmode";
        var name = cname + "=";
        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return "";
    }
    document.querySelector(".moon").addEventListener("click", function() {
        console.log("moon");
        document.querySelector("body").classList.toggle("dark");
        document.querySelector(".moon").style = "display:none;";
        document.querySelector(".sun").style = "display:inline;";
        setDarkMode("off");
    });
    document.querySelector(".sun").addEventListener("click", function() {
        console.log("sun");
        document.querySelector("body").classList.toggle("dark");
        document.querySelector(".sun").style = "display:none;";
        document.querySelector(".moon").style = "display:inline;";
        setDarkMode("on");
    });
    window.onload = (event) => {
        if (getDarkMode() == "on") {
            console.log("moon");
            document.querySelector("body").classList.toggle("dark");
            document.querySelector(".sun").style = "display:none;";
            document.querySelector(".moon").style = "display:inline;";
        }
    };
    </script>
 </body>

 </html>
	<html>

	<head>
	<style>
	html {
	font-family: Roboto, arial, sans-serif;
	font-size: 18px;
	margin: auto;
	max-width: 700px;
	}

	pre,
	code {
	font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
	;
	font-size: 16px;
	background-color: #e2e2e2;
	color: #1b1b1b;
	border-radius: 3px;
	}

	pre {
	overflow: auto;
	word-wrap: normal;
	padding: 1em;
	line-height: 1.45;
	text-align: left;
	}

	pre code {
	background: transparent;
	display: inline;
	padding: 0;
	line-height: inherit;
	word-wrap: normal;
	}

	pre code::before,
	pre code::after {
	content: normal;
	}

	pre>code {
	border: 0;
	white-space: pre;
	word-break: normal;
	}

	code {
	padding: 0.2em 0;
	margin: 0;
	}

	code::before,
	code::after {
	letter-spacing: -0.2em;
	content: '\00a0';
	}

	img {
	width: 100%;
	}



	body {
	background: #fff;
	color: #202124;
	}

	body.dark {
	background: #202124;
	color: #bdc1c6;
	}

	.dark pre,
	.dark code {
	font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
	;
	font-size: 16px;
	background-color: #303134;
	color: #dde1e6;
	border-radius: 3px;
	}


	a:hover {
	text-decoration: underline;
	}

	a {
	text-decoration: none;
	}

	.dark a {
	color: #8ab4f8;
	-webkit-tap-highlight-color: rgba(255, 255, 255, .1);
	}

	.dark a:visited {
	color: #c58af9;
	}
	</style>
	</head>

	<body class="">
	<span style="top:1em;right:1em;position: absolute;">
	<div class="sun" style="display: inline;">
	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun">
	<circle cx="12" cy="12" r="5"></circle>
	<line x1="12" y1="1" x2="12" y2="3"></line>
	<line x1="12" y1="21" x2="12" y2="23"></line>
	<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
	<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
	<line x1="1" y1="12" x2="3" y2="12"></line>
	<line x1="21" y1="12" x2="23" y2="12"></line>
	<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
	<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
	</svg>
	</div>
	<div class="moon" style="display: none;">
	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon">
	<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
	</svg>
	</div>
	</span>
	<pre><code>$ apt install something
	$ apt update</code></pre>
	hi <a href="test">ok</a>
	<script>
	function setDarkMode(cvalue) {
	cname = "darkmode";
	exdays = 1;
	var d = new Date();
	d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
	var expires = "expires=" + d.toUTCString();
	document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
	}

	function getDarkMode() {
	var cname = "darkmode";
	var name = cname + "=";
	var decodedCookie = decodeURIComponent(document.cookie);
	var ca = decodedCookie.split(';');
	for (var i = 0; i < ca.length; i++) {
	var c = ca[i];
	while (c.charAt(0) == ' ') {
	c = c.substring(1);
	}
	if (c.indexOf(name) == 0) {
	return c.substring(name.length, c.length);
	}
	}
	return "";
	}
	document.querySelector(".moon").addEventListener("click", function() {
	console.log("moon");
	document.querySelector("body").classList.toggle("dark");
	document.querySelector(".moon").style = "display:none;";
	document.querySelector(".sun").style = "display:inline;";
	setDarkMode("off");
	});
	document.querySelector(".sun").addEventListener("click", function() {
	console.log("sun");
	document.querySelector("body").classList.toggle("dark");
	document.querySelector(".sun").style = "display:none;";
	document.querySelector(".moon").style = "display:inline;";
	setDarkMode("on");
	});
	window.onload = (event) => {
	if (getDarkMode() == "on") {
	console.log("moon");
	document.querySelector("body").classList.toggle("dark");
	document.querySelector(".sun").style = "display:none;";
	document.querySelector(".moon").style = "display:inline;";
	}
	};
	</script>
	</body>

	</html>