It looks like that is an instructional guide to doing it, yes; once you have logged in and created an account, we automatically generate a page for you with a precompiled game, which will load more quickly – e.g. I made an extension recently and you can see the test code I set for it here; https://jwunderl.github.io/arcade-winter-effects/, from the repo set here: https://github.com/jwunderl/arcade-winter-effects.
For a quick description, GitHub is closer to a storage location for accessing repositories (in it’s most basic form, you can probably think of this as a folder with a history of all changes and be pretty close) that are created using a tool / app known as Git. For example, much of our source code is publicly available on github in repos like this: https://github.com/microsoft/pxt-arcade, which shows much of the changes we make to the makecode arcade website. GitHub offers some other features that go further than just storage, like hosting simple website and providing ways to run code whenever you push (submit) changes. With our github integration that they showed in that link you gave, if you have a github account, you can use it to store your projects, track changes in it, and show it off to others with the created page.
And for your other point, the teal is actually changeable now, I added support for that in a recent release (in particular for multiplayer where we use different color sims for each player, and microcode (though it looks like that transitioned from a dark theme to full screen mode)). It’s a little tedious to set up right now, as I didn’t have time to fully expose it for most users it in a nice way, but it’s doable; you have to add it in as yet another query parameter, and this one takes in a list of the styles you want to set. For example, it could look something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>my cool game</title>
</head>
<body style="overflow:hidden;">
<iframe style="position:absolute;top:0;left:0;width:100vw;height:100vh;overflow:hidden" src="https://arcade.makecode.com/---run?id=S35510-75592-74609-07291&fullscreen=1&autofocus=1&nofooter=1&simParams=background-color%3Dabcdef%26button-fill%3D123456%26button-stroke%3D654321%26text-color%3Dfedcba%26dpad-fill%3Dabc123" allowfullscreen="allowfullscreen" sandbox="allow-popups allow-forms allow-scripts allow-same-origin" frameborder="0"></iframe>
</body>
</html>
– the simParams parameter is the one in which you have to pass uriencoded colors to set in the sim. This one is super ugly as I just completely randomly chose hex values for the colors, but if you search for a color picker online and take the color (you only want the part after the # that will show up if you get a hex color picker) and format them like this: background-color=abcdef&button-fill=123456&button-stroke=654321&text-color=fedcba&dpad-fill=abc123, then run that through a urlencoder (e.g. https://www.urlencoder.org/ seems fine, but it’s just a native javascript api https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) – the end result should be the same with = swapped to %#D and & swapped to %26. (note that dpad-fill will default to button-stroke if no value is set, it’s just an extra option)
