diff --git a/js/toolbar.js b/js/toolbar.js
index 28fea156c1..4d63f2cd44 100644
--- a/js/toolbar.js
+++ b/js/toolbar.js
@@ -68,6 +68,8 @@ class Toolbar {
["enableHorizScrollIcon", _("Enable horizontal scrolling")],
["disableHorizScrollIcon", _("Disable horizontal scrolling")],
["themeSelectIcon", _("Change theme")],
+ ["light", _("Light Mode")],
+ ["dark", _("Dark Mode")],
["mergeWithCurrentIcon", _("Merge with current project")],
["chooseKeyIcon", _("Set Pitch Preview")],
["toggleJavaScriptIcon", _("JavaScript Editor")],
@@ -104,10 +106,7 @@ class Toolbar {
["ar", _("عربى"), "innerHTML"],
["te", _("తెలుగు"), "innerHTML"],
["he", _("עִברִית"), "innerHTML"],
- ["ur", _("اردو"), "innerHTML"],
- ["light", _("Light Mode"), "innerHTML"],
- ["dark", _("Dark Mode"), "innerHTML"],
- // ["custom", _("Custom Theme"), "innerHTML"],
+ ["ur", _("اردو"), "innerHTML"]
];
// Workaround for FF
@@ -134,7 +133,9 @@ class Toolbar {
_("Delete plugin"),
_("Enable horizontal scrolling"),
_("Disable horizontal scrolling"),
- _("Change theme"),
+ _("Change theme"),
+ _("Light Mode"),
+ _("Dark Mode"),
_("Merge with current project"),
_("Set Pitch Preview"),
_("JavaScript Editor"),
@@ -177,10 +178,7 @@ class Toolbar {
_("igbo"),
_("عربى"),
_("עִברִית"),
- _("اردو"),
- _("Light Mode"),
- _("Dark Mode")
- // _("Custom Theme"),
+ _("اردو")
];
} else {
strings = [
@@ -207,6 +205,8 @@ class Toolbar {
["enableHorizScrollIcon", _("Enable horizontal scrolling")],
["disableHorizScrollIcon", _("Disable horizontal scrolling")],
["themeSelectIcon", _("Change theme")],
+ ["light", _("Light Mode")],
+ ["dark", _("Dark Mode")],
["mergeWithCurrentIcon", _("Merge with current project")],
["toggleJavaScriptIcon", _("JavaScript Editor")],
["restoreIcon", _("Restore")],
@@ -238,10 +238,7 @@ class Toolbar {
["ar", _("عربى"), "innerHTML"],
["te", _("తెలుగు"), "innerHTML"],
["he", _("עִברִית"), "innerHTML"],
- ["ur", _("اردو"), "innerHTML"],
- ["light", _("Light Mode"), "innerHTML"],
- ["dark", _("Dark Mode"), "innerHTML"]
- // ["custom", _("Custom Theme"), "innerHTML"],
+ ["ur", _("اردو"), "innerHTML"]
];
// Workaround for FF
@@ -268,7 +265,9 @@ class Toolbar {
_("Delete plugin"),
_("Enable horizontal scrolling"),
_("Disable horizontal scrolling"),
- _("Change theme"),
+ _("Change theme"),
+ _("Light Mode"),
+ _("Dark Mode"),
_("Merge with current project"),
_("JavaScript Editor"),
_("Restore"),
@@ -300,10 +299,7 @@ class Toolbar {
_("igbo"),
_("عربى"),
_("עִברִית"),
- _("اردو"),
- _("Light Mode"),
- _("Dark Mode")
- // _("Custom Theme"),
+ _("اردو")
];
}
@@ -472,6 +468,12 @@ class Toolbar {
}
renderThemeSelectIcon(themeBox, themes) {
+ const icon = document.getElementById("themeSelectIcon")
+ themes.forEach((theme) =>{
+ if(localStorage.themePreference === theme){
+ icon.innerHTML = document.getElementById(theme).innerHTML;
+ }
+ })
const themeSelectIcon = docById("themeSelectIcon");
let themeList = themes;
themeSelectIcon.onclick = () => {
diff --git a/js/utils/README.md b/js/utils/README.md
index d18c8128fc..a76eccac74 100644
--- a/js/utils/README.md
+++ b/js/utils/README.md
@@ -29,34 +29,30 @@ This guide explains how you can add your own custom theme or customize an existi
Note: If you want to customise an existing theme, just put your changes in the dark mode and choose dark mode from the theme dropdown. You can skip to step no. 6 if that is your goal.
-1. **Adding your theme's name to the list in index.html**
+1. **Adding your theme's icon to the list in index.html**
- Go to index.html from root, and add your theme to the list (please follow the conventions used by other themes for proper implementation)
+ Go to index.html from root, and add your theme's icon to the list (please follow the conventions used by other themes for proper implementation)
+ Add your theme's icon to the bottom of the list, you can find icons in [Material Icons](https://materializecss.com/icons.html).
```javascript
-
- -
-
-
- -
-
-
- -
-
-
+
```
2. **Now go to js/toolbar.js, find init(activity){...}**
There will be 4 arrays named string (two in an if statement, rest two in the else statement).
- Add your theme's name to the bottom of the array
+ Add your theme's name to the bottom of the pre-existing themes.
+
```javascript
string = [[...],
- ["light", _("Light Mode"), "innerHTML"],
- ["dark", _("Dark Mode"), "innerHTML"],
- ["custom", _("Custom Theme"), "innerHTML"]];
+ ["light", _("Light Mode")],
+ ["dark", _("Dark Mode")],
+ ["custom", _("Custom Theme")]];
```
```javascript
@@ -177,7 +173,7 @@ Note: If you want to customise an existing theme, just put your changes in the d
6. **Now to add styling for your theme**
- (If you skipped to here, these are the files responsible for styling, the CSS is easy to understand and modify, but to change the color of elements in javascript files, look at the entire code base and search for "platformColor". You will find all the places where JS is used to style. You don't have to add your own theme, you can just change styling in dark mode CSS and JS, and then choose dark mode n the toolbar.)
+ (If you skipped to here, these are the files responsible for styling, the CSS is easy to understand and modify, but to change the color of elements in javascript files, look at the entire code base and search for "platformColor". You will find all the places where JS is used to style. You don't have to add your own theme, you can just change styling in dark mode CSS and JS, and then choose dark mode in the toolbar.)
You have to add styling to three places,
diff --git a/js/widgets/jseditor.js b/js/widgets/jseditor.js
index 99be399369..0aa592ed10 100644
--- a/js/widgets/jseditor.js
+++ b/js/widgets/jseditor.js
@@ -210,7 +210,7 @@ class JSEditor {
menuRight.appendChild(styleBtn);
menubar.appendChild(menuRight);
this._editor.appendChild(menubar);
- generateTooltip(styleBtn, "Change Theme", "left");
+ generateTooltip(styleBtn, "Change theme", "left");
const editorContainer = document.createElement("div");
editorContainer.id = "editor_container";
diff --git a/localization.ini b/localization.ini
index aede53de65..86b4b02efe 100644
--- a/localization.ini
+++ b/localization.ini
@@ -6233,6 +6233,9 @@ Load-plugin = प्लगइन लोड करें
Delete-plugin = प्लगइन हटाएं
Enable-horizontal-scrolling = क्षैतिज स्क्रोलिंग सक्षम करें
Disable-horizontal-scrolling = क्षैतिज स्क्रोलिंग अक्षम करें
+Change-theme = थीम बदलें
+Light-Mode = प्रकाश मोड
+Dark-Mode = अंधेरा मोड
Merge-with-current-project = वर्तमान परियोजना के साथ मर्ज करें
Set-Pitch-Preview = पिच पूर्वावलोकन सेट करें
Restore = पुनर्स्थापित करें