Hello there,
In CS Discoveries, Unit 2 Web Development there is a video in level 4 that shows Code Studio in “Dark Mode”. Here is the video: Web Development: Intro to CSS - YouTube . Many of my students noticed that Code Studio has a Dark Mode (shown in the video 1:31-2:33) but I haven’t been able to find a way to do this. Is this a feature that is available to students?
Thank you!
1 Like
Hello @haley.kalinichenko ! Unfortunately, the “dark mode” view shown in that video was created and animated just for the video itself, and is not available on any Code.org programming environments at this time. We hope to add a dark mode in future updates, as this is highly requested!
1 Like
Thank you, Josh, for your response.
Themes actually were a thing since 2020, they were created with the help of an extension called “tampermonkey”. I have a version of it, but it only works on GameLab and AppLab. It actually took me only a few days, not complicated, there’s even a prettifier button to prettify your code (So it’s not only a theme, it also gives you interesting functions you wouldn’t usually be able to do without it)
Here’s my version:
// ==UserScript==
// @name Code.org tools
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Helps code on code.org
// @author IMPixel
// @match https://studio.code.org/projects/gamelab/*
// @icon https://www.google.com/s2/favicons?domain=code.org
// @grant none
// ==/UserScript==
let html = `
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.13.13/beautify.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Mono&display=swap" rel="stylesheet">
<style>
@keyframes themeColorChange {
0% {
background-color: #e300d8;
}
25% {
background-color: #9d03fc;
}
50% {
background-color: #03b1fc;
}
75% {
background-color: #9d03fc;
}
100% {
background-color: #e300d8;
}
}
@keyframes themeTextColorChange {
0% {
color: #e300d8;
}
25% {
color: #9d03fc;
}
50% {
color: #03b1fc;
}
75% {
color: #9d03fc;
}
100% {
color: #e300d8;
}
}
.ace_content {
background-color: #333333;
font-family: 'DM Mono', monospace;
}
.ace_identifier {
color: #ffe6fd !important;
}
.ace_comment {
color: #3bed7d !important;
}
.ace_type {
color: #eb34e1 !important;
}
.ace_function {
color: #ff369a !important;
}
.ace_paren {
color: #a8a8a8 !important;
}
.ace_punctuation {
color: #a8a8a8 !important;
}
.ace_keyword {
color: #eb34e1 !important;
}
.ace_numeric {
color: #0ab3d1 !important;
font-weight: bold;
}
.ace_string {
color: #0ab3d1 !important;
font-weight: bold;
}
.ace_constant {
color: #0ab3d1 !important;
font-weight: bold;
}
.ace_operator {
color: #a8a8a8 !important;
}
.ace_gutter-cell {
background-color: #666666 !important;
color: white !important;
}
.wrapper {
background-color: #333333 !important;
}
.droplet-palette-canvas {
background-color: #666666 !important;
}
.small-footer-base {
background-color: #333333 !important;
border-top: 1px solid #333333
}
.droplet-palette-header {
background-color: #666666 !important;
}
.droplet-palette-group-header {
color: #000000 ! important;
border: 5px solid #333333;
}
.droplet-palette-scroller {
background-color: #666666 !important;
}
#gameButtons {
color: white;
}
#debug-commands {
background-color: #333333;
}
#debug-output {
background-color: #333333;
border-width: 0px !important;
}
#debug-watch {
background-color: #333333;
}
.header-text {
color: white;
}
.fa-chevron-circle-up {
color: white;
}
#hide-toolbox-icon {
color: white;
}
#codeWorkspace {
border-width: 0px !important;
}
.fa-chevron-circle-down {
color: white;
}
.fa-eraser {
background-color: #ffffff !important;
color: #e300d8 !important
}
#clear-console-header {
background-color: #ffffff !important;
color: #e300d8 !important;
}
#versions-header {
background-color: #ffffff !important;
}
#show-code-header {
background-color: #ffffff !important;
color: #e300d8 !important;
}
body {
::-moz-selection { background: yellow; !important}
::selection { background: yellow; !important}
background-color: #333333 !important;
}
.ace_active-line {
background-color: #252525 !important;
}
.ace_cursor {
color: #ff2b6e !important;
}
.droplet-palette-header {
border: none !important;
}
#codeTextbox {
border: none !important;
}
.droplet-palette-element {
background-color: #666666 !important;
}
.ace_gutter-layer {
border-left: 3px solid #333333 !important;
}
.ace_indent-guide {
border: none !important;
outline: none !important;
}
.animationList {
background-color: #666666 !important;
}
#left-column {
background-color: #666666 !important;
}
#tools-container {
background-color: #666666 !important;
}
.ace_indent-guide {
background-image: none !important;
}
#indentSizeButton {
margin-left: 5px !important;
}
.header_left {
background-color: #e300d8;
}
.project_edit {
background-color: #e300d8;
}
.project_remix {
background-color: #e300d8;
}
.header_right {
background-color: #e300d8;
}
.container {
background-color: #e300d8;
}
.project_share {
background-color: #e300d8;
}
.header_level {
background-color: #e300d8;
}
#sign_in_or_user {
background-color: #e300d8;
}
#codeModeHeaders {
background-color: #e300d8;
}
#workspace-header {
background-color: #e300d8;
}
.header-wrapper .header {
background-color: #e300d8;
}
.header-wrapper .header_button.header_button_light {
background-color: #e300d8;
}
#versions-header span span {
color: #e300d8;
}
#versions-header span i {
color: #e300d8;
}
.watch-unavailable{
color: #ff369a !important;
font-family: 'DM Mono', monospace !important;
font-size: 14px !important;
font-width: 5px !important;
overflow-x: visible !important;
}
.watch-variable {
color: #eb34e1 !important;
font-family: 'DM Mono', monospace !important;
font-size: 14px !important;
font-width: 5px !important;
overflow-x: visible !important;
}
#defaultCanvas0 {
border: 1px #ffffff solid !important;
}
</style>
`
var debugAreaStyleCheck = setInterval(function() {
if(document.getElementById("debug-area-header") != null){
document.getElementById("debug-area-header").style.backgroundColor = "#e300d8"
clearInterval(debugAreaStyleCheck)
}
}, 1)
function copy(text) {
var input = document.createElement('textarea');
input.innerHTML = text;
document.body.appendChild(input);
input.select();
var result = document.execCommand('copy');
document.body.removeChild(input);
return result;
}
setInterval(function() {
if($("#codeMode:hover").length != 0){
if(mouseDown) {
resetThemeAnimation()
}
}
}, 1)
var mouseDown = 0;
document.body.onmousedown = function() {
mouseDown++;
}
document.body.onmouseup = function() {
mouseDown--;
}
function formatCode() {
__mostRecentGameLabInstance.studioApp_.editor.aceEditor.setValue(js_beautify(__mostRecentGameLabInstance.studioApp_.editor.aceEditor.getValue(), {"indent_size": 2}))
}
var listOfUiToTheme = {
classes: [
".header_left",
".project_edit",
".project_remix",
".header_right",
".container",
".project_share",
".header_level",
],
ids: [
"#sign_in_or_user",
"#codeModeHeaders",
"#workspace-header",
"#debug-area-header",
]
}
function resetThemeAnimation() {
$(".header_left").css("animation", "")
$(".project_edit").css("animation", "")
$(".project_remix").css("animation", "")
$(".header_right").css("animation", "")
$(".container").css("animation", "")
$(".project_share").css("animation", "")
$(".header_level").css("animation", "")
$("#sign_in_or_user").css("animation", "")
$("#codeModeHeaders").css("animation", "")
$("#workspace-header").css("animation", "")
$("#debug-area-header").css("animation", "")
setTimeout(function() {
$(".header_left").css("animation", "themeColorChange 20s infinite")
$(".project_edit").css("animation", "themeColorChange 20s infinite")
$(".project_remix").css("animation", "themeColorChange 20s infinite")
$(".header_right").css("animation", "themeColorChange 20s infinite")
$(".container").css("animation", "themeColorChange 20s infinite")
$(".project_share").css("animation", "themeColorChange 20s infinite")
$(".header_level").css("animation", "themeColorChange 20s infinite")
$("#sign_in_or_user").css("animation", "themeColorChange 20s infinite")
$("#codeModeHeaders").css("animation", "themeColorChange 20s infinite")
$("#workspace-header").css("animation", "themeColorChange 20s infinite")
$("#debug-area-header").css("animation", "themeColorChange 20s infinite")
}, 100)
}
var checkIfHeaderMiddleLoaded = setInterval(function () {
if(document.getElementsByClassName("header_middle_content")){
setTimeout(function() {
$("#header_middle_content").append("<button class=\"prettify_button header_button no-mc\">Prettify</button>")
$(".prettify_button").click(formatCode)
}, 5000)
clearInterval(checkIfHeaderMiddleLoaded)
}
}, 1)
console.log(document.getElementById("defaultCanvas0"))
$(document).ready(function() {
$("head").append(html)
setTimeout(function() {
$(".header_left").css("animation", "themeColorChange 20s infinite")
$(".project_edit").css("animation", "themeColorChange 20s infinite")
$(".project_remix").css("animation", "themeColorChange 20s infinite")
$(".header_right").css("animation", "themeColorChange 20s infinite")
$(".container").css("animation", "themeColorChange 20s infinite")
$(".project_share").css("animation", "themeColorChange 20s infinite")
$(".header_level").css("animation", "themeColorChange 20s infinite")
$("#sign_in_or_user").css("animation", "themeColorChange 20s infinite")
$("#codeModeHeaders").css("animation", "themeColorChange 20s infinite")
$("#workspace-header").css("animation", "themeColorChange 20s infinite")
$("#debug-area-header").css("animation", "themeColorChange 20s infinite")
$("#versions-header span span").css("animation", "themeTextColorChange 20s infinite")
$("#versions-header span i").css("animation", "themeTextColorChange 20s infinite")
$("#debug-watch div input").css("background-color", "#666666")
$("#debug-watch div input").css("outline", "none !important")
$("#debug-watch div input").css("border", "none !important")
$("#debug-watch div input").css("background-color", "#666666")
$("#debug-watch div input").css("outline", "none !important")
$("#debug-watch div input").css("border", "none !important")
}, 3000)
});
To use this, you need to download the tampermonkey extension available on chrome and some other browsers.
Hello @haley.kalinichenko 
I have created this dark mode extension for code.org and I think you can use it. it works for microsoft edge. It converts the main website and the studio to dark mode. Link: code.org Dark mode - Microsoft Edge Addons
1 Like