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

This commit is contained in:
UncleCode
2025-05-16 21:44:56 +08:00
parent 9b60988232
commit a3cb938675
2 changed files with 9 additions and 38 deletions

View File

@@ -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;
/* > headers 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 %}