change2DarkTheme



<!DOCTYPE html>
<html>
    <head>
        <meta name='viewport' content='width=device-width, initial-scale=1'>
        <title>html Editor</title>
    </head>
    <body>
        <div class='logo'>
            <b>
                <span class='brackets left'><</span>
                <span>html</span>
                <span class='brackets right'>></span>
            </b>
            Editor
        </div>

        <p class='sample'>This is the simple example of how HTML Editor works. You can change the code if you want.</p>

        <button id='button' onClick='changeTheme()'>Reeks Too Kool Dark Theme</button>


<style>
@import url('https://fonts.googleapis.com/css?family=&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Advent+Pro&display=swap');

html, button{
    font-family: Quicksand, sans-serif;
}

body{
    background: white;
    color:#555;
    text-align: center;
}

.logo{
    margin-top:30%;
    font-size:30px;
    font-weight:normal;
}

.brackets{
    font-family: Advent Pro, sans-serif;
}

.left{
    color:tomato;
}

.right{
    color:dodgerblue;
}

.sample{
    padding:20px;
    font-size:18px;
    background: inherit;
    color:inherit;
}

#button{
    margin-top:10px;
    background:dodgerblue;
    color:white;
    width:80%;
    height:60px;
    font-size: 20px;
    outline: none;
    border:5px solid deepskyblue;
    border-radius: 5px;
}

#button:active{
    transform: scale(0.95);
}

</style>

<script>
function changeTheme(){
    if(document.getElementById('button').innerHTML==='Dark Theme'){
        document.body.style.background='#074b83';
        document.body.style.color='#aaa';
        document.getElementById('button').innerHTML='Light Theme';
    }
    else{
        document.body.style.background='#06233a';
        document.body.style.color='#074b83';
        document.getElementById('button').innerHTML='Dark Theme';
    }
}

</script>


</body>
</html>