From c86fedc453b76fd8b35e3b971c16284ee9277680 Mon Sep 17 00:00:00 2001
From: Amrit <iamamrit27@gmail.com>
Date: Thu, 16 Jan 2025 13:53:53 +0530
Subject: [PATCH] Add dark mode toggle and related styles to improve user
experience
---
css/dark-theme.css | 34 +++++++++++++++
index.html | 8 ++++
js/theme.js | 23 ++++++++++
planet/css/dark-theme.css | 13 ++++++
planet/css/style.css | 90 +++++++++++++++++++++++++++++++++++++++
planet/index.html | 55 ++++++++++++++++++------
planet/js/theme.js | 20 +++++++++
7 files changed, 229 insertions(+), 14 deletions(-)
create mode 100644 css/dark-theme.css
create mode 100644 js/theme.js
create mode 100644 planet/css/dark-theme.css
create mode 100644 planet/js/theme.js
diff --git a/css/dark-theme.css b/css/dark-theme.css
new file mode 100644
index 0000000000..f704e3f5a5
--- /dev/null
+++ b/css/dark-theme.css
@@ -0,0 +1,34 @@
+/* Target body with maximum specificity */
+html[data-theme="dark"] body#body,
+body#body[data-theme="dark"],
+body#body[style*="background"][data-theme="dark"],
+#body[data-theme="dark"],
+[data-theme="dark"]#body {
+ background: #121212 !important;
+ background-color: #121212 !important;
+}
+
+/* Target the main container */
+body[data-theme="dark"] #main,
+body[data-theme="dark"] #canvas,
+body[data-theme="dark"] .canvasHolder {
+ background: #121212 !important;
+ background-color: #121212 !important;
+}
+
+/* Keep toolbar dark */
+body[data-theme="dark"] #toolbars,
+body[data-theme="dark"] .nav-wrapper {
+ background-color: #1e1e1e !important;
+}
+
+/* Override any dynamic background changes */
+@keyframes darkMode {
+ from { background: #121212 !important; }
+ to { background: #121212 !important; }
+}
+
+body[data-theme="dark"] {
+ animation: darkMode 1ms forwards !important;
+ transition: none !important;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index aea8f6d80a..4d1df06aff 100644
--- a/index.html
+++ b/index.html
@@ -113,6 +113,11 @@
doSearch();
});
</script>
+
+ <link rel="stylesheet" href="css/activity.css">
+ <link rel="stylesheet" href="css/dark-theme.css">
+ <script src="js/theme.js"></script>
+ <link rel="stylesheet" href="lib/materialize-iso.css">
</head>
<!-- #96D3F3-->
@@ -542,6 +547,9 @@
<a id="record" class="left tooltipped" data-tooltip="Record">
</a>
</li>
+ <li>
+ <a id="theme-toggle" class="nav-item tooltipped" data-position="bottom" style="color: white; padding: 0 15px;">Dark Mode</a>
+ </li>
</ul>
<ul class="main right">
diff --git a/js/theme.js b/js/theme.js
new file mode 100644
index 0000000000..bc4fa4b2e6
--- /dev/null
+++ b/js/theme.js
@@ -0,0 +1,23 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const themeToggle = document.getElementById('theme-toggle');
+
+ if (localStorage.getItem('theme') === 'dark') {
+ document.documentElement.setAttribute('data-theme', 'dark');
+ document.body.setAttribute('data-theme', 'dark');
+ themeToggle.textContent = 'Light Mode';
+ }
+
+ themeToggle.addEventListener('click', () => {
+ if (document.body.getAttribute('data-theme') === 'dark') {
+ document.documentElement.removeAttribute('data-theme');
+ document.body.removeAttribute('data-theme');
+ localStorage.setItem('theme', 'light');
+ themeToggle.textContent = 'Dark Mode';
+ } else {
+ document.documentElement.setAttribute('data-theme', 'dark');
+ document.body.setAttribute('data-theme', 'dark');
+ localStorage.setItem('theme', 'dark');
+ themeToggle.textContent = 'Light Mode';
+ }
+ });
+});
\ No newline at end of file
diff --git a/planet/css/dark-theme.css b/planet/css/dark-theme.css
new file mode 100644
index 0000000000..e2bef299e8
--- /dev/null
+++ b/planet/css/dark-theme.css
@@ -0,0 +1,13 @@
+/* Only apply dark theme to main content, not loading screen */
+body[data-theme="dark"] {
+ background-color: #121212 !important;
+ color: #ffffff !important;
+}
+
+body[data-theme="dark"] .nav-extended {
+ background-color: #1e1e1e !important;
+}
+
+body[data-theme="dark"] .card {
+ background-color: #242424 !important;
+}
\ No newline at end of file
diff --git a/planet/css/style.css b/planet/css/style.css
index 064d6bd6dc..b74a9f357b 100644
--- a/planet/css/style.css
+++ b/planet/css/style.css
@@ -508,4 +508,94 @@ a {
cursor: pointer;
font-size: 16px;
outline: none;
+}
+
+.switch label {
+ display: flex;
+ align-items: center;
+}
+
+.switch label i {
+ margin: 0 5px;
+ font-size: 20px;
+}
+
+/* Customize switch colors for dark mode */
+[data-theme="dark"] .switch label input[type=checkbox]:checked + .lever {
+ background-color: #4a4a4a;
+}
+
+[data-theme="dark"] .switch label input[type=checkbox]:checked + .lever:after {
+ background-color: #26a69a;
+}
+
+/* Theme switch styling */
+.theme-switch {
+ padding: 0 15px;
+ display: flex;
+ align-items: center;
+}
+
+.theme-switch .switch {
+ margin: 0;
+}
+
+.theme-switch .switch label {
+ display: flex;
+ align-items: center;
+}
+
+.theme-switch .switch label i {
+ margin: 0 5px;
+ font-size: 20px;
+ color: #fff;
+}
+
+.theme-switch .switch .lever {
+ margin: 0 8px;
+}
+
+/* Ensure the switch is visible in both light and dark modes */
+.theme-switch .switch .lever:after {
+ background-color: #f1f1f1;
+}
+
+[data-theme="dark"] .theme-switch .switch .lever:after {
+ background-color: #26a69a;
+}
+
+/* Theme toggle styling */
+.nav-wrapper .switch {
+ margin: 0 15px;
+}
+
+.nav-wrapper .switch label {
+ display: flex;
+ align-items: center;
+ height: 64px;
+}
+
+.nav-wrapper .switch label i {
+ color: #fff;
+ margin: 0 8px;
+ font-size: 20px;
+}
+
+.nav-wrapper .switch .lever {
+ margin: 0 4px;
+}
+
+/* Theme toggle in nav */
+.nav-wrapper .switch {
+ padding: 0 10px;
+ margin-top: 15px;
+}
+
+.nav-wrapper .switch label i {
+ color: #fff;
+ vertical-align: middle;
+}
+
+.nav-wrapper .switch .lever {
+ margin: 0 8px;
}
\ No newline at end of file
diff --git a/planet/index.html b/planet/index.html
index 69e33021dc..8a66e953f3 100644
--- a/planet/index.html
+++ b/planet/index.html
@@ -4,7 +4,7 @@
<title>Music Blocks </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--Import Google Icon Font-->
- <link type="text/css" href="fonts/material-icons.css" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="libs/materialize.min.css" media="screen,projection"/>
@@ -17,6 +17,30 @@
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+ <script>
+ window.addEventListener('load', function() {
+ const themeToggle = document.getElementById('theme-toggle');
+ if (!themeToggle) {
+ console.error('Theme toggle not found');
+ return;
+ }
+
+ if (localStorage.getItem('theme') === 'dark') {
+ document.body.setAttribute('data-theme', 'dark');
+ }
+
+ themeToggle.onclick = function() {
+ if (document.body.getAttribute('data-theme') === 'dark') {
+ document.body.removeAttribute('data-theme');
+ localStorage.setItem('theme', 'light');
+ } else {
+ document.body.setAttribute('data-theme', 'dark');
+ localStorage.setItem('theme', 'dark');
+ }
+ };
+ });
+ </script>
+
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="libs/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="libs/materialize.min.js"></script>
@@ -40,6 +64,9 @@
<script type="text/javascript" src="js/Planet.js"></script>
<script type="text/javascript" src="js/main.js"></script>
+
+ <link rel="stylesheet" href="css/dark-theme.css">
+ <script src="js/theme.js" defer></script>
</head>
<script>
document.addEventListener("scroll", function () {
@@ -66,28 +93,28 @@
<nav class="nav-extended light-green lighten-1" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" class="brand-logo inactiveLink"><i class="material-icons" id="planeticon">public</i></a>
+ <ul class="right"><li><a id="theme-toggle" class="waves-effect waves-light">Dark Mode</a></li></ul>
<ul class="right"><li><a id="close-planet" class="tooltipped" data-position="bottom" data-delay="50" data-tooltip=""><i class="material-icons">close</i></a></li></ul>
<ul class="right"><li><a id="planet-open-file" class="tooltipped" data-position="bottom" data-delay="50" data-tooltip=""><i class="material-icons">folder_open</i></a></li></ul>
<ul class="right"><li><a id="planet-new-project" class="tooltipped" data-position="bottom" data-delay="50" data-tooltip=""><i class="material-icons">note_add</i></a></li></ul>
<ul class="right tabs tabs-transparent" id="localglobal">
<li class="tab"><a class="active" id="local-tab" href="#local"></a></li>
<li class="tab"><a id="global-tab" href="#global"></a></li>
- <li>
- <li id="s_one">
- <div class="nav-content" id="searchcontainer-one">
- <div class="container">
- <div class="input-field search">
- <i class="material-icons prefix "
- id="searchicon">search</i><input
- placeholder="Search here" id="global-search"
- type="text"><span><i
- class="material-icons"
- id="search-close">clear</i></span>
- </div>
+ <li id="s_one">
+ <div class="nav-content" id="searchcontainer-one">
+ <div class="container">
+ <div class="input-field search">
+ <i class="material-icons prefix "
+ id="searchicon">search</i><input
+ placeholder="Search here" id="global-search"
+ type="text"><span><i
+ class="material-icons"
+ id="search-close">clear</i></span>
</div>
</div>
- </li>
+ </div>
</li>
+ </li>
</ul>
</div>
</div>
diff --git a/planet/js/theme.js b/planet/js/theme.js
new file mode 100644
index 0000000000..8ed7f0f7e6
--- /dev/null
+++ b/planet/js/theme.js
@@ -0,0 +1,20 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const themeToggle = document.getElementById('theme-toggle');
+
+ if (localStorage.getItem('theme') === 'dark') {
+ document.body.setAttribute('data-theme', 'dark');
+ themeToggle.textContent = 'Light Mode';
+ }
+
+ themeToggle.addEventListener('click', () => {
+ if (document.body.getAttribute('data-theme') === 'dark') {
+ document.body.removeAttribute('data-theme');
+ localStorage.setItem('theme', 'light');
+ themeToggle.textContent = 'Dark Mode';
+ } else {
+ document.body.setAttribute('data-theme', 'dark');
+ localStorage.setItem('theme', 'dark');
+ themeToggle.textContent = 'Light Mode';
+ }
+ });
+});
\ No newline at end of file