Use CSS instead of JS for the dark themes, some style improvements!

docs/third_parties.rst

@@ -47,7 +47,7 @@ The API endpoint supports several keys:
 
 - ``notifications`` (``List[Dict[Literal["message", "category"], str]]``): A list of notifications to display to the user. Each notification is a dict with a ``category`` (``info``, ``warning``, ``error``, or ``success``) and a ``message`` (e.g., ``[{"message": "Hi!", "category": "success"}]``).
 
-- ``web_content`` (``Dict[str, Any]``): The Flask/Django/Jinja2 template in ``source`` will be displayed in the browser, inside a third party template (consistency with the rest of the Dashboard). It can contain HTML, CSS, and JavaScript. You can use ``"standalone": True`` to make your own complete page. You can use ``"fullscreen": True`` to use the template but without the sidebar and the guild profile. All other kwargs will be passed to the template. For example: ``{"source": "Hello, {{ user_name }}!", "user_name": "Test"}``.
+- ``web_content`` (``Dict[str, Any]``): The Flask/Django/Jinja2 template in ``source`` will be displayed in the browser, inside a third party template (consistency with the rest of the Dashboard). It can contain HTML, CSS, and JavaScript. You can use ``"standalone": True`` to make your own complete page. You can use ``"fullscreen": True`` to use the template but without the sidenav and the guild profile. All other kwargs will be passed to the template. For example: ``{"source": "Hello, {{ user_name }}!", "user_name": "Test"}``.
 
 - ``error_code`` (``int``) associated with optional ``error_message`` (``str``): Aborts and raises an HTML error, with a custom message if provided.
 

documents/Cookie Policy.md

@@ -27,7 +27,7 @@ If you're signed into the Red-Dashboard website, then we use the authorization d
 We also use CSRF tokens to prevent user impersonation when sending forms.
 
 ### User experience
-If you are using the Red-Dashboard website, then we use data such as your preferred background color, background/sidebar theme and language locale to better your user experience.
+If you are using the Red-Dashboard website, then we use data such as your preferred background color, background/sidenav theme and language locale to better your user experience.
 
 ## 2. Why we store this data in cookies
 

documents/Privacy Policy.md

@@ -20,7 +20,7 @@ This Privacy Policy applies to any unmodified distribution of the source code fo
 There are various ways we collect information about you as a user. The following detail how we access this information:
 
 ### Information you provide using the website/service:
-1. Red-Dashboard background color and background/sidebar theme, such as in what way you would like the UI to look to you.
+1. Red-Dashboard background color and background/sidenav theme, such as in what way you would like the UI to look to you.
 2. Preferred Language Locale, or what language you would like the information to be presented to you.
 3. Your IP addressed (in situations described below).
 

reddash/app/base/routes.py

@@ -46,7 +46,7 @@ async def index():
 
 @blueprint.route("/setcolor", methods=("POST",))
 async def set_color():
-    resp = make_response(jsonify({"status": 1}))
+    resp = make_response(jsonify({"status": 0}))
     color = request.json.get("color")
     if color is not None and color != app.data["ui"]["meta"]["default_color"]:
         resp.set_cookie(
@@ -61,7 +61,7 @@ async def set_color():
 
 @blueprint.route("/setbackgroundtheme", methods=("POST",))
 async def set_background_theme():
-    resp = make_response(jsonify({"status": 1}))
+    resp = make_response(jsonify({"status": 0}))
     background_theme = request.json.get("background_theme")
     if (
         background_theme is not None
@@ -77,21 +77,21 @@ async def set_background_theme():
     return resp
 
 
-@blueprint.route("/setsidebartheme", methods=("POST",))
-async def set_sidebar_theme():
+@blueprint.route("/setsidenavtheme", methods=("POST",))
+async def set_sidenav_theme():
     resp = make_response(jsonify({"status": 1}))
-    sidebar_theme = request.json.get("sidebar_theme")
+    sidenav_theme = request.json.get("sidenav_theme")
     if (
-        sidebar_theme is not None
-        and sidebar_theme != app.data["ui"]["meta"]["default_sidebar_theme"]
+        sidenav_theme is not None
+        and sidenav_theme != app.data["ui"]["meta"]["default_sidenav_theme"]
     ):
         resp.set_cookie(
-            key="sidebar_theme",
-            value=sidebar_theme,
+            key="sidenav_theme",
+            value=sidenav_theme,
             expires=datetime.datetime.now(tz=datetime.timezone.utc) + datetime.timedelta(days=365),
         )
     else:
-        resp.delete_cookie("sidebar_theme")
+        resp.delete_cookie("sidenav_theme")
     return resp
 
 
@@ -701,7 +701,7 @@ def __init__(self, settings: typing.Dict[str, typing.Any]) -> None:
         self.support_server.default = settings["support_server"]
         self.default_color.default = settings["default_color"]
         self.default_background_theme.default = settings["default_background_theme"]
-        self.default_sidebar_theme.default = settings["default_sidebar_theme"]
+        self.default_sidenav_theme.default = settings["default_sidenav_theme"]
         self.disabled_third_parties.choices = [
             (third_party, third_party) for third_party in app.variables["third_parties"]
         ]
@@ -719,12 +719,12 @@ def __init__(self, settings: typing.Dict[str, typing.Any]) -> None:
     )
     default_background_theme: wtforms.SelectField = wtforms.SelectField(
         _("Default Background Theme:"),
-        choices=[("light", "Light"), ("dark", "Dark")],
+        choices=[("white", "White"), ("dark", "Dark")],
         validators=[wtforms.validators.InputRequired()],
     )
-    default_sidebar_theme: wtforms.SelectField = wtforms.SelectField(
-        _("Default Sidebar Theme:"),
-        choices=[("light", "Light"), ("dark", "Dark")],
+    default_sidenav_theme: wtforms.SelectField = wtforms.SelectField(
+        _("Default Sidenav Theme:"),
+        choices=[("white", "White"), ("dark", "Dark")],
         validators=[wtforms.validators.InputRequired()],
     )
     disabled_third_parties: wtforms.SelectMultipleField = wtforms.SelectMultipleField(
@@ -894,7 +894,7 @@ async def admin(
             "support_server": dashboard_settings_form.support_server.data.strip() or None,
             "default_color": dashboard_settings_form.default_color.data,
             "default_background_theme": dashboard_settings_form.default_background_theme.data,
-            "default_sidebar_theme": dashboard_settings_form.default_sidebar_theme.data,
+            "default_sidenav_theme": dashboard_settings_form.default_sidenav_theme.data,
             "disabled_third_parties": dashboard_settings_form.disabled_third_parties.data,
         }
         requeststr = {

reddash/app/static/assets/css/themes/background_theme_dark.css

@@ -0,0 +1,28 @@
+body:not(.sidenav):not(.sidenav > *):not(.sidenav *),
+div.card:not(.sidenav):not(.sidenav > *):not(.sidenav *),
+div.card-header:not(.sidenav):not(.sidenav > *):not(.sidenav *) {
+    background-color: #333 !important;
+}
+
+body:not(.sidenav):not(.sidenav > *):not(.sidenav *),
+div.card:not(.sidenav):not(.sidenav > *):not(.sidenav *),
+div.card:not(.sidenav):not(.sidenav > *):not(.sidenav *) > *,
+div.card-header:not(.sidenav):not(.sidenav > *):not(.sidenav *),
+div.card-header:not(.sidenav):not(.sidenav > *):not(.sidenav *) > *,
+div.card-body:not(.sidenav):not(.sidenav > *):not(.sidenav *) {
+    color: white !important;
+}
+
+.choices__item--choice {
+    color: black !important;
+}
+
+div.card:not(.sidenav):not(.sidenav > *):not(.sidenav *) {
+    border-radius: var(--bs-card-border-radius) !important;
+}
+
+body:not(.sidenav):not(.sidenav > *) a:not(.btn,.nav-link,.nav-item,h6):not(.sidenav a:not(.btn,.nav-link,.nav-item,h6)),
+div.card:not(.sidenav):not(.sidenav > *) a:not(.btn,h6,.nav-link,.nav-item):not(.sidenav a:not(.btn,.nav-link,.nav-item,h6)),
+div.card-header:not(.sidenav):not(.sidenav > *) a:not(.btn,h6,.nav-link,.nav-item):not(.sidenav a:not(.btn,.nav-link,.nav-item,h6)) {
+    color: var(--bs-indigo);
+}

reddash/app/static/assets/css/themes/sidenav_theme_dark.css

@@ -0,0 +1,12 @@
+.sidenav {
+    background-color: #333 !important;
+    color: white !important;
+}
+
+.sidenav a:not(.btn), .sidenav span {
+    color: white !important;
+}
+
+.sidenav a.nav-link:hover:not(.active), .sidenav a.nav-link:hover:not(.active) span {
+    color: #333 !important;
+}

reddash/app/static/assets/css/themes/sidenav_theme_white.css

@@ -0,0 +1,12 @@
+.sidenav {
+    background-color: white !important;
+    color: black !important;
+}
+
+.sidenav a:not(.btn), .sidenav span {
+    color: black !important;
+}
+
+.sidenav a.nav-link:hover:not(.active), .sidenav a.nav-link:hover:not(.active) span {
+    color: black !important;
+}