feat(theme): enable dark color mode in mkdocs configuration

docs/md_v2/overrides/main.html

@@ -1,48 +1,19 @@
+{% set extra_html_attrs = 'data-theme="dark"' %}
 {% extends "base.html" %}
 
 {% block extrahead %}
 {{ super() }}
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.css" />
+<script>
+    document.documentElement.setAttribute("data-theme", "dark");
+</script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.css">
+
 <style>
     :root {
         /* brand */
         --feedback-primary-color: #09b5a5;
         --feedback-highlight-color: #fed500;
-        /* stars etc */
 
-        /* modal shell / text */
-        --feedback-modal-content-bg-color: var(--background-color);
-        --feedback-modal-content-text-color: var(--font-color);
-        --feedback-modal-content-border-color: var(--primary-dimmed-color);
-        --feedback-modal-content-border-radius: 4px;
-
-        /* overlay */
-        --feedback-overlay-bg-color: rgba(0, 0, 0, .75);
-
-        /* rating buttons */
-        --feedback-modal-rating-button-color: var(--secondary-color);
-        --feedback-modal-rating-button-selected-color: var(--primary-color);
-
-        /* inputs */
-        --feedback-modal-input-bg-color: var(--feedback-dark-color);
-        --feedback-modal-input-text-color: var(--font-color);
-        --feedback-modal-input-border-color: var(--primary-dimmed-color);
-        --feedback-modal-input-border-color-focused: var(--primary-color);
-
-        /* submit / secondary buttons */
-        --feedback-modal-button-submit-bg-color: var(--primary-color);
-        --feedback-modal-button-submit-bg-color-hover: var(--primary-dimmed-color);
-        --feedback-modal-button-submit-text-color: var(--invert-font-color);
-
-        --feedback-modal-button-bg-color: transparent;
-        /* screenshot btn */
-        --feedback-modal-button-border-color: var(--primary-color);
-        --feedback-modal-button-icon-color: var(--primary-color);
-
-        --feedback-modal-footer-link: #7b7b7b;
-        --feedback-modal-button-text-color: #8e8e8e;
-        --feedback-modal-input-text-color: #b9c2c2;
-        --feedback-modal-button-bg-color-active: #46dbdc;
 
         /* align with the value you really use in :root */
         --header-height: 65px;
@@ -53,8 +24,6 @@
         --feedback-modal-modal-wrapper-z-index: 1100;
         /*  >  header’s 1000 */
         --feedback-modal-content-z-index: 1101;
-        /* just in case */
-        --feedback-modal-header-text-color: #ebebeb;
     }
 
     feedback-modal::part(overlay) {
@@ -71,7 +40,8 @@
 {% endblock %}
 
 {% block footer %}
-<feedback-button project="w8plzp8vjp" button-position="center-right" modal-position="sidebar-right">
+<feedback-button project="w8plzp8vjp" button-style="dark" button-position="center-right" modal-position="sidebar-right">
+    >
     Feedback
 </feedback-button>
 {% endblock %}

mkdocs.yml

@@ -58,6 +58,7 @@ theme:
   name: 'terminal'
   palette: 'dark'
   custom_dir: docs/md_v2/overrides
+  color_mode: 'dark'
   icon:
     repo: fontawesome/brands/github