Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Generalised Dark Mode into General Theme #4348

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+633 −399
Open

Feature: Generalised Dark Mode into General Theme #4348

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
49c6456
Refactored the dark mode into general theme, Automatic reload after t…
arjunjayan999 Feb 5, 2025
b3ae5e0
Grammatical Revisions
arjunjayan999 Feb 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 0 additions & 12 deletions css/activities.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,7 @@
outline: none;
}

body:not(.dark-mode) #helpfulSearch,
body:not(.dark-mode) .ui-autocomplete {
background-color: #fff !important;
color: #000 !important;
}

body:not(.dark-mode) .ui-autocomplete li:hover {
background-color: #ddd !important;
}

body:not(.dark-mode) #helpfulSearchDiv {
background-color: #f9f9f9 !important;
}

.modal {
display: none;
Expand Down
81 changes: 0 additions & 81 deletions css/darkmode.css
View file
Open in desktop

This file was deleted.

88 changes: 88 additions & 0 deletions css/themes.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
/* Dark Mode */

.dark .blue {
background-color: #022363 !important;
}

.dark .blue.darken-1 {
background-color: #01143b !important;
}

.dark #floatingWindows > .windowFrame {
border: 2px solid #000000;
background-color: #454545;
}

.dark .wfbtItem {
background-color: #225a91;
}

.dark #floatingWindows > .windowFrame > .wfTopBar .wftTitle {
color: #e8e8e8;
}

.dark .popupMsg {
background-color: #084e86;
color: #e8e8e8;
}

.dark #printText {
border-color: #000000;
}

.dark #loading-image-container {
background: #1a1a1a !important;
background-color: #1a1a1a !important;
}

.dark #loadingText {
color: white !important;
}

.dark .dropdown-content li > a {
background-color: #1c1c1c;
color: #3fe0d1;
}

.dark .dropdown-content li > a:hover {
color: #252525;
}

.dark .dropdown-content {
background-color: #1c1c1c;
}

.dark .language-link {
color: #fff;
}

.dark .modal-content {
background-color: #1c1c1c;
color: #fff;
}

.dark #submitLilypond {
background-color: rgb(0, 102, 255);
}

.dark #search,
#helpfulSearch,
.ui-autocomplete {
background-color: #1c1c1c;
color: #fff;
}

.dark .ui-autocomplete li:hover {
background-color: #225a91;
}

.dark #helpfulSearchDiv {
background-color: transparent;
}

.dark #crossButton {
color: #fff;
}


/* Your Custom Theme can go here if you don't want to modify the existing dark mode */
22 changes: 14 additions & 8 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@

<link type="text/css" href="fonts/material-icons.css" rel="stylesheet"/>
<link rel="stylesheet" href="lib/materialize-iso.css" />
<link rel="stylesheet" href="css/darkmode.css" />
<link rel="stylesheet" href="css/themes.css" />

<script src="lib/easeljs.min.js" defer></script>

Expand Down Expand Up @@ -776,13 +776,13 @@
>
</li>
<li>
<a
id="darkModeIcon"
class="tooltipped"
data-position="bottom"
><i class="material-icons md-48"
>brightness_4</i
></a>
<a
id="themeSelectIcon"
class="tooltipped dropdown-trigger"
data-position="left"
data-activates="themedropdown"
><i class="material-icons md-48">brightness_4</i></a
>
</li>
<li>
<a
Expand Down Expand Up @@ -920,6 +920,12 @@
<li><a id="he"></a></li>
<li><a id="ur"></a></li>
</ul>

<ul id="themedropdown" class="dropdown-content">
<li><a id="light"></a></li>
<li><a id="dark"></a></li>
</ul>

<div id="modal-container" style="display: none;z-index: 999;">
<ul id="newdropdown" class="dropdown-content" style="padding: 24px;">
</ul>
Expand Down
46 changes: 15 additions & 31 deletions js/activity.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
getMacroExpansion, getOctaveRatio, getTemperament, GOHOMEBUTTON,
GOHOMEFADEDBUTTON, GRAND, HelpWidget, HIDEBLOCKSFADEDBUTTON,
hideDOMLabel, initBasicProtoBlocks, initPalettes,
INLINECOLLAPSIBLES, jQuery, JSEditor, LanguageBox, Logo, MSGBLOCK,
INLINECOLLAPSIBLES, jQuery, JSEditor, LanguageBox, ThemeBox, Logo, MSGBLOCK,
NANERRORMSG, NOACTIONERRORMSG, NOBOXERRORMSG, NOINPUTERRORMSG,
NOMICERRORMSG, NOSQRTERRORMSG, NOSTRINGERRORMSG, PALETTEFILLCOLORS,
PALETTESTROKECOLORS, PALETTEHIGHLIGHTCOLORS, HIGHLIGHTSTROKECOLORS,
Expand Down Expand Up @@ -85,6 +85,7 @@ let MYDEFINES = [
"activity/turtle-singer",
"activity/turtle-painter",
"activity/languagebox",
"activity/themebox",
"activity/basicblocks",
"activity/blockfactory",
"activity/piemenus",
Expand Down Expand Up @@ -272,15 +273,17 @@ class Activity {
//Flag to check if any other input box is active or not
this.isInputON = false;

// If the theme is set to "darkMode", enable dark mode else diable
this.themes = ["light", "dark"];
try {
if (this.storage.myThemeName === "darkMode") {
body.classList.add("dark-mode");
} else {
body.classList.remove("dark-mode");
for (let i = 0; i < this.themes.length; i++) {
if (this.themes[i] === this.storage.themePreference) {
body.classList.add(this.themes[i]);
} else {
body.classList.remove(this.themes[i]);
}
}
} catch (e) {
console.error("Error accessing myThemeName storage:", e);
console.error("Error accessing themePreference storage:", e);
}

this.beginnerMode = true;
Expand Down Expand Up @@ -385,6 +388,7 @@ class Activity {
this.logo = null;
this.pasteBox = null;
this.languageBox = null;
this.themeBox = null;
this.planet = null;
window.converter = null;
this.buttonsVisible = true;
Expand Down Expand Up @@ -6665,28 +6669,7 @@ class Activity {

this._createErrorContainers();

// Function to toggle theme mode
this.toggleThemeMode = () => {
if (this.storage.myThemeName === "darkMode") {
delete this.storage.myThemeName;
localStorage.setItem("darkMode", "disabled");
} else {
this.storage.myThemeName = "darkMode";
localStorage.setItem("darkMode", "enabled");
}
const planetIframe = document.getElementById("planet-iframe");
if (planetIframe) {
planetIframe.contentWindow.postMessage(
{ darkMode: localStorage.getItem("darkMode") },
"*"
);
}
try {
window.location.reload();
} catch (e) {
console.error("Error reloading the window:", e);
}
};


/* Z-Order (top to bottom):
* menus
Expand Down Expand Up @@ -6714,6 +6697,7 @@ class Activity {

this.pasteBox = new PasteBox(this);
this.languageBox = new LanguageBox(this);
this.themeBox = new ThemeBox(this);

// Show help on startup if first-time user.
if (this.firstTimeUser) {
Expand Down Expand Up @@ -6755,7 +6739,7 @@ class Activity {
this.toolbar.renderModeSelectIcon(doSwitchMode, doRecordButton, doAnalytics, doOpenPlugin, deletePlugin, setScroller);
this.toolbar.renderRunSlowlyIcon(doSlowButton);
this.toolbar.renderRunStepIcon(doStepButton);
this.toolbar.renderDarkModeIcon(this.toggleThemeMode);
this.toolbar.renderThemeSelectIcon(this.themeBox, this.themes);
this.toolbar.renderMergeIcon(_doMergeLoad);
this.toolbar.renderRestoreIcon(restoreTrash);
if (_THIS_IS_MUSIC_BLOCKS_) {
Expand Down Expand Up @@ -7320,7 +7304,7 @@ class Activity {
saveLocally() {
try {
localStorage.setItem('beginnerMode', this.beginnerMode.toString());
localStorage.setItem('isDarkModeON', this.isDarkModeON.toString());
localStorage.setItem("themePreference", this.themePreference.toString());
} catch (e) {
// eslint-disable-next-line no-console
console.error('Error saving to localStorage:', e);
Expand Down
Loading