1
0
mirror of https://github.com/suk-ws/ph-Bookshelf.git synced 2025-01-18 23:12:23 +08:00

basic dark color for bread-card-markdown and main.css

This commit is contained in:
A.C.Sukazyo Eyre 2023-03-08 18:34:32 +08:00
parent 2a72004b7b
commit 4857080f93
Signed by: Eyre_S
GPG Key ID: C17CE40291207874
2 changed files with 89 additions and 11 deletions

View File

@ -11,6 +11,8 @@
:root {
--bcm-color-page-background: #ffffff;
--bcm-color-font-base: #223b5c;
--bcm-color-font-base-link: #409dff;
--bcm-color-font-base-link-hover: #0033ff;
@ -20,7 +22,7 @@
--bcm-color-font-base-mark: #257c78;
--bcm-color-font-base-mark-bg: #ceff818a;
--bcm-color-blockquote-focus: #e2e5e8;
--bcm-color-blockquote-focus: var(--bcm-color-seperator);
--bcm-color-blockquote-foreground: #949da9;
--bcm-color-list-item-marker-std: #949da9;
@ -43,6 +45,41 @@
}
@media (prefers-color-scheme: dark) { :root {
--bcm-color-page-background: #212526;
--bcm-color-font-base: #f1f0ff;
--bcm-color-font-base-link: #f5848e;
--bcm-color-font-base-link-hover: #e84b58;
--bcm-color-font-base-link-visited: #f59784;
--bcm-color-font-base-link-visited-hover: #f54d4d;
--bcm-color-font-base-link-focus-bg: #9e739a3d;
--bcm-color-font-base-mark: #65b12a;
--bcm-color-font-base-mark-bg: #648c758a;
--bcm-color-blockquote-focus: var(--bcm-color-seperator);
--bcm-color-blockquote-foreground: #928e96;
--bcm-color-list-item-marker-std: #928e96;
--bcm-color-table-background: #2d3134;
--bcm-color-table-head-background: #d39292;
--bcm-color-table-head-foreground: #484545;
/*--bcm-color-table-foot-background: #e7eef7; !* not darkred yet *!*/
/*--bcm-color-table-foot-foreground: #9dabba; !* not darkred yet *!*/
--bcm-color-code-inline-background: #353537;
--bcm-color-codeblock-background: #2d2a2d;
/*--bcm-color-codeblock-foreground: aliceblue;*/
--bcm-color-keyboard-background: #efb2bc;
--bcm-color-keyboard-foreground: #5b3333;
--bcm-color-seperator: #4b4849;
}}
:root {
--bcm-element-href-anima-speed: 0.1s;
}

View File

@ -14,22 +14,24 @@
******************************************************************/
:root {
--color-font-base: #223b5c;
--color-font-base-link: #409dff;
--color-font-base-link-hover: #0033ff;
--color-font-base-link-visited: #a27aeb;
--color-font-base-link-visited-hover: #5a00ff;
--color-font-base-link-focus-bg: #33aee92b;
--color-page-background: var(--bcm-color-page-background);
--color-sidebar-background: #f6f8fa;
--color-font-base: var(--bcm-color-font-base);
--color-font-base-link: var(--bcm-color-font-base-link);
--color-font-base-link-hover: var(--bcm-color-font-base-link-hover);
--color-font-base-link-visited: var(--bcm-color-font-base-link-visited);
--color-font-base-link-visited-hover: var(--bcm-color-font-base-link-visited-hover);
--color-font-base-link-focus-bg: var(--bcm-color-font-base-link-focus-bg);
--color-sidebar-background: var(--bcm-color-table-background);
--color-font-sidebar: var(--color-font-base);
--color-scrollbar-sidebar-background: none;
--color-scrollbar-sidebar-foreground: #78a8e021;
--color-scrollbar-sidebar-foreground: var(--color-menu-child-list-line);
--color-warn-noscript: #ce263d;
--color-font-warn-noscript: #f5eaea;
--color-font-sidebar-sitetitle: #3a2b8c;
--color-font-sidebar-sitetitle-highlight: #4a60b6;
/*--color-font-sidebar-sitetitle-highlight: #4a60b6;*/
--color-sidebar-sitetitle-background: #e8f0fe;
--color-menu-list-separator: #ebeff2;
@ -39,7 +41,7 @@
--color-font-menu-item-current: #3697ff;
--color-font-menu-item-hover: #71b3f9;
--color-tools-button-background: #f6f8fa;
--color-tools-button-background: var(--color-sidebar-background);
--color-tools-button-background-active: #eef1f4;
--color-font-tools-button: #c3ccd6;
@ -48,6 +50,44 @@
}
@media (prefers-color-scheme: dark) { :root {
/*--color-page-background: var(--bcm-color-page-background);*/
/*--color-font-base: var(--bcm-color-font-base);*/
/*--color-font-base-link: var(--bcm-color-font-base-link);*/
/*--color-font-base-link-hover: var(--bcm-color-font-base-link-hover);*/
/*--color-font-base-link-visited: var(--bcm-color-font-base-link-visited);*/
/*--color-font-base-link-visited-hover: var(--bcm-color-font-base-link-visited-hover);*/
/*--color-font-base-link-focus-bg: var(--bcm-color-font-base-link-focus-bg);*/
/*--color-sidebar-background: var(--bcm-color-table-background);*/
/*--color-font-sidebar: var(--color-font-base);*/
/*--color-scrollbar-sidebar-background: none;*/
/*--color-scrollbar-sidebar-foreground: var(--color-menu-child-list-line);*/
--color-warn-noscript: #ce263d; ;;
--color-font-warn-noscript: #f5eaea; ;;
--color-font-sidebar-sitetitle: #5d0a0a;
/*--color-font-sidebar-sitetitle-highlight: #4a60b6;*/
--color-sidebar-sitetitle-background: #be6964;
--color-menu-list-separator: #383b3d;
--color-menu-child-list-line: #b28c9029;
--color-menu-item-indicator-current: #ff6c6c;
--color-menu-item-indicator-focus: #cc888f;
--color-font-menu-item-current: #f5848e;
--color-font-menu-item-hover: #ffa2ad;
/*--color-tools-button-background: var(--color-sidebar-background);*/
--color-tools-button-background-active: #414344;
--color-font-tools-button: #747576; ;
/*--color-scrollbar-main-background: var(--color-scrollbar-sidebar-foreground);*/
/*--color-scrollbar-main-foreground: var(--color-menu-item-indicator-focus);*/
}}
:root {
--sidebar-width: 19rem;
@ -234,6 +274,7 @@ body {
height: 100vh;
overflow: hidden;
color: var(--color-font-base);
background-color: var(--color-page-background);
display: flex;
position: relative;
}