1+ //It just for Bootstrap theme.
2+ //请将本js放在页面最末尾，否则可能不起作用。
3+ //$('head').append("<script src='https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js'></script>");
4+ //$(document).ready(function() {
5+ var hour = new Date ( ) . getHours ( ) ;
6+ var css = document . getElementById ( "css" ) ;
7+ if ( css ) var theme = css . getAttribute ( "data-theme" ) ;
8+ var darkModeFact ;
9+ if ( hour < 7 || hour >= 19 ) darkModeFact = 1 ; //晚上7点到次日早上7点启动黑暗模式
10+ if ( window . matchMedia && window . matchMedia ( "(prefers-color-scheme: dark)" ) . matches ) darkModeFact = 1 ; //若浏览器开启了黑暗模式，也会启动黑暗模式
11+ try {
12+ if ( darkMode == 1 ) darkModeFact = 1 ;
13+ if ( darkMode == 0 ) darkModeFact = 0 ;
14+ //用户可以在自己的网站上面定义一个名为darkMode的变量，自由调试开关黑暗模式的效果。
15+ } catch ( e ) { }
16+ if ( darkModeFact == 1 ) DarkModeStyle ( ) ;
17+ else LightModeStyle ( ) ;
18+ //});
19+ var textColor = ( darkModeFact == 1 ?"255,255,255" :"0,0,0" )
20+
21+ //滚动条样式修改
22+ // try{
23+ $ ( 'head' ) . append (
24+ `<style>
25+ ::-webkit-scrollbar {
26+ width: 4px;
27+ height: 4px;
28+ scrollbar-arrow-color:red;
29+ }
30+ ::-webkit-scrollbar-thumb {
31+ border-radius: 5px;
32+ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
33+ background: rgba(${ textColor }
34+ scrollbar-arrow-color:red;
35+ }
36+ ::-webkit-scrollbar-track {
37+ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
38+ border-radius: 0;
39+ background: rgba(${ textColor }
40+ }
41+ </style>`
42+ ) ;
43+ // } catch (e) {}
44+
45+ //深色模式样式操作
46+ function DarkModeStyle ( ) {
47+ if ( theme && theme . search ( / b o o t s t r a p / i) != - 1 ) {
48+ document . getElementById ( 'css' ) . href = 'https://bootswatch.com/4/darkly/bootstrap.min.css' ;
49+ $ ( ".navbar" ) . removeClass ( "navbar-light bg-light" ) . addClass ( "navbar-dark bg-dark" ) ;
50+ // $(".btn-outline-secondary").removeClass("btn-outline-secondary").addClass("btn-outline-light");
51+ // $(".iframe-container").css("top", "73.38px");
52+ // $(".reset-on-right-float").css("margin", "19 0");
53+ // $(".sm").css("height", "22px");
54+ $ ( 'head' ) . append (
55+ `<style id="bootstrap-style">
56+ /* 更改到btn-outline-light样式 */
57+ .btn-outline-secondary {
58+ color: #adb5bd;
59+ border-color: #adb5bd;
60+ }
61+ .btn-outline-secondary:hover {
62+ color: #222;
63+ background-color: #adb5bd;
64+ border-color: #adb5bd;
65+ }
66+ .btn-outline-secondary:focus, .btn-outline-secondary.focus {
67+ box-shadow: 0 0 0 0.2rem rgba(173, 181, 189, 0.5);
68+ }
69+ .btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
70+ color: #adb5bd;
71+ background-color: transparent;
72+ }
73+ .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active,
74+ .show > .btn-outline-secondary.dropdown-toggle {
75+ color: #222;
76+ background-color: #adb5bd;
77+ border-color: #adb5bd;
78+ }
79+ .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
80+ .show > .btn-outline-secondary.dropdown-toggle:focus {
81+ box-shadow: 0 0 0 0.2rem rgba(173, 181, 189, 0.5);
82+ }
83+ .reset-on-right-float {
84+ margin: 19px 0;
85+ }
86+ .sm {
87+ height: 22px;
88+ }
89+ .form-control, .form-control:focus {
90+ background-color:rgb(34,34,34);
91+ border-color:rgb(173,181,189);
92+ color:white;
93+ fill:white;
94+ }
95+ .input-group-text {
96+ border-color:rgb(173,181,189);
97+ }
98+ .form-control:focus {
99+ border-color: #adb5bd;
100+ -webkit-box-shadow: 0 0 0 0.2rem rgba(173,181,189,0.5);
101+ box-shadow: 0 0 0 0.2rem rgba(173,181,189,0.5);
102+ }
103+ .custom-select {
104+ background: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23d0d0d0' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e\") no-repeat right 0.75rem center/8px 10px ; \
105+ }
106+ .custom-control-label::before {
107+ background-color: #222;
108+ }
109+ </style>`
110+ ) ;
111+ }
112+ try {
113+ if ( nightDo && typeof ( nightDo ) == "function" ) nightDo ( ) ;
114+ //用户可以定义一个名为nightDo的函数，自由决定要在黑暗模式下想做的操作
115+ } catch ( e ) { }
116+ $ ( 'style' ) . remove ( "#light-root" ) ;
117+ $ ( 'head' ) . append (
118+ `<style id="dark-root">
119+ :root {
120+ --text-color:white;
121+ --background-color:rgb(34,34,34);
122+ }
123+ </style>`
124+ ) ;
125+ }
126+
127+ //浅色模式样式操作
128+ function LightModeStyle ( ) {
129+ if ( theme && theme . search ( / b o o t s t r a p / i) != - 1 ) {
130+ document . getElementById ( 'css' ) . href = 'https://bootswatch.com/_vendor/bootstrap/dist/css/bootstrap.min.css' ;
131+ $ ( ".navbar" ) . removeClass ( "navbar-dark bg-dark" ) . addClass ( "navbar-light bg-light" ) ;
132+ }
133+ // try {
134+ $ ( 'style' ) . remove ( "#bootstrap-style" ) . remove ( "#dark-root" ) ;
135+ $ ( 'head' ) . append (
136+ `<style id="light-root">
137+ :root {
138+ --text-color:black;
139+ --background-color:white;
140+ }
141+ </style>`
142+ ) ;
143+ // } catch (e) {}
144+ }
145+
146+ // $('head').append('<style>:root {--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";}</style>');
0 commit comments