<?xml version="1.0" encoding="UTF-8" ?>

<b:skin><![CDATA[

    * {

        margin: 0;

        padding: 0;

        box-sizing: border-box;

        font-family: Arial, sans-serif;

        transition: background 0.3s, color 0.3s;

    }

    

    /* Mode terang */

    body {

        background-color: #ffffff;

        color: #121212;

        text-align: center;

    }

    /* Mode gelap */

    body.dark {

        background-color: #121212;

        color: white;

    }

    .toggle-button {

        padding: 10px;

        background: #ff5722;

        color: white;

        border: none;

        cursor: pointer;

        border-radius: 5px;

        transition: 0.3s;

    }

    .toggle-button:hover {

        background: #e64a19;

    }

]]></b:skin>

<b:section id="header" class="header" />

<b:section id="content">

    <button class="toggle-button" onclick="toggleMode()">🌙 Ganti Mode</button>

</b:section>

<script type="text/javascript">

    function toggleMode() {

        document.body.classList.toggle("dark");

        var button = document.querySelector(".toggle-button");

        if (document.body.classList.contains("dark")) {

            button.innerHTML = "☀️ Mode Terang";

        } else {

            button.innerHTML = "🌙 Ganti Mode";

        }

    }

</script>