diff --git a/sa-token-doc/doc.html b/sa-token-doc/doc.html
index 2f1d52a7..e053d8d4 100644
--- a/sa-token-doc/doc.html
+++ b/sa-token-doc/doc.html
@@ -27,6 +27,35 @@
 				<div class="sear-box p-none" tabindex="-1" >
 					<!-- 加载中…… -->
 				</div>
+				<div class="zk-box">
+					<a class="wzi" href="javascript:;">
+						<!-- <span>背景 </span> -->
+						<img class="theme-btn" src="static/icon/theme.svg">
+						<!-- <span class="zk-icon"></span> -->
+					</a>
+					<div class="zk-context theme-box">
+						<div>
+							<div style="height: 5px;"></div>
+							<span style="background-color: #FFFFFF;"></span>
+							<span style="background-color: #f5f5f5;"></span>
+							<span style="background-color: #F1FAFA;"></span>
+							<span style="background-color: #f5f5d5;"></span>
+							<span style="background-color: #d5f5f5;"></span>
+							
+							<span style="background-color: #f5e5f5;"></span>
+							<span style="background-color: #E8E8FF;"></span>
+							<span style="background-color: #f0f9eb;"></span>
+							<span style="background-color: #ebe5dd;"></span>
+							<span style="background-color: #e8f4ff;"></span>
+							
+							<!-- <span style="background-color: #F0DAD2;"></span> -->
+							<!-- <span style="background-color: #f5d5d5;"></span> -->
+							<!-- <span style="background-color: #FFFFE0;"></span> -->
+							<!-- <span style="background-color: #eeeeee;"></span> -->
+							<!-- <span style="background-color: #f5fafe;"></span> -->
+						</div>
+					</div>
+				</div>
 				<select class="p-none" onchange="location.href=this.value">
 					<option value="doc.html">最新版</option>
 					<option value="v/v1.30.0/doc/index.html">v1.30.0</option>
@@ -216,5 +245,65 @@
 				layer.alert(newTips);
 			}
 		</script>
+		
+		<!-- 修改背景颜色 -->
+		<script>
+			
+			// 绑定修改背景色的按钮事件
+			$('.theme-box span').click(function() {
+				let bgColor = this.style.backgroundColor;
+				setBg(bgColor);
+				localStorage.setItem('bg-color-value', bgColor)
+			})
+			// 读取上次记录
+			let bgColor = localStorage.getItem('bg-color-value');
+			if(bgColor) {
+				setBg(bgColor);
+			}
+			
+			// 设置背景颜色 
+			function setBg(bgColor) {
+				console.log('---- 背景颜色设定为：', bgColor);
+				
+				// -------- 设置 body 背景
+				document.body.style.backgroundColor = bgColor;
+				
+				// -------- 设置 header 头背景
+				// 如果是 16 进制，转 rgba
+				if(bgColor.indexOf('#') == 0) {
+					bgColor = hexToRgba(bgColor, 0.97);
+				}
+				// 如果是 rgb，转 rgba
+				else if(bgColor.match(/\,/g).length == 2) {
+					bgColor = bgColor.replace(')', ' ,0.97)');
+				}
+				
+				document.querySelector('.doc-header').style.backgroundColor = bgColor;
+			}
+			
+			// 16进制 转 rgba
+			function hexToRgba(str, a){
+				a = a || 1;
+
+				var reg = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/
+				if(!reg.test(str)){return;}
+				let newStr = (str.toLowerCase()).replace(/\#/g,'')
+				let len = newStr.length;
+				if(len == 3){
+					let t = ''
+					for(var i=0;i<len;i++){
+						t += newStr.slice(i,i+1).concat(newStr.slice(i,i+1))
+					}
+					newStr = t
+				}
+				let arr = []; //将字符串分隔，两个两个的分隔
+				for(var i =0;i<6;i=i+2){
+					let s = newStr.slice(i,i+2)
+					arr.push(parseInt("0x" + s))
+				}
+				return 'rgb(' + arr.join(",")  + ', ' + a + ')';
+			}
+			
+		</script>
 	</body>
 </html>
diff --git a/sa-token-doc/static/doc.css b/sa-token-doc/static/doc.css
index abb3a104..d76136ff 100644
--- a/sa-token-doc/static/doc.css
+++ b/sa-token-doc/static/doc.css
@@ -20,7 +20,7 @@ body{font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu
 
 /* ------- 头部样式 ------- */
 .doc-header{position: fixed; top: 0; z-index: 1000; width: 100%; height: 60px; line-height: 60px;}
-.doc-header{background-color: hsla(0,0%,100%,0.97); box-shadow: 0 1px 3px rgba(26,26,26,0.1);}
+.doc-header{/* background-color: hsla(0,0%,100%,0.97); */ background-color: rgba(255, 255, 255, 0.97); box-shadow: 0 1px 3px rgba(26,26,26,0.1);}
 
 /* 左边导航 */
 .nav-left{display: inline-block; float: left;}
@@ -241,7 +241,7 @@ body {
 }
 
 
-/* 答题按钮 */
+/* -------------  答题按钮 ------------- */
 #main .dt-btn,#main .case-btn{
 	background-color: #e7ecf3;
 	color: #385481;
@@ -272,4 +272,26 @@ body {
 	border: 1px #c4e5b5 solid !important;
 	background-size: 18px 18px;
 	background-image: url(icon/code.svg);
+}
+
+
+/* -------------  背景色相关 ------------- */
+/* 侧边栏需要透明 */
+.sidebar-toggle{background-color: transparent !important;}
+.sidebar{background-color: transparent !important;}
+
+/* 变色的动画 */
+.doc-header,body{transition: all 0.5s !important;}
+
+/* 调色按钮 */
+.theme-btn{width: 25px; height: 25px; line-height: 60px; vertical-align: middle; position: relative; top: -1px;}
+.theme-box{width: 156px; text-align: left; line-height: 20px; margin-top: -20px;}
+.theme-box span{
+	display: inline-block;
+	width: 20px; 
+	height: 20px; 
+	margin: 1px 2px; 
+	border: 1px #ccc solid; 
+	cursor: pointer;
+	border-radius: 1px;
 }
\ No newline at end of file
diff --git a/sa-token-doc/static/icon/theme.svg b/sa-token-doc/static/icon/theme.svg
new file mode 100644
index 00000000..3cf96c2b
--- /dev/null
+++ b/sa-token-doc/static/icon/theme.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1666000768568" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M512 853.333333c-55.466667 0-21.333333-38.4-85.333333-102.4-59.733333-64-256-25.6-256-238.933333 0-187.733333 153.6-341.333333 341.333333-341.333333s341.333333 153.6 341.333333 341.333333-153.6 341.333333-341.333333 341.333333z m256-341.333333c0-140.8-115.2-256-256-256s-256 115.2-256 256c0 68.266667 21.333333 89.6 81.066667 110.933333 4.266667 0 12.8 4.266667 21.333333 4.266667 4.266667 0 17.066667 4.266667 21.333333 8.533333 55.466667 17.066667 81.066667 29.866667 106.666667 55.466667 21.333333 21.333333 34.133333 42.666667 46.933333 64 0 4.266667 4.266667 8.533333 4.266667 12.8 128-12.8 230.4-123.733333 230.4-256z m-128-85.333333c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667 42.666667 16.066667 42.666667 42.666667-17.066667 42.666665-42.666667 42.666667z m-119.466667-55.466667c-25.6 0-42.666667-17.066667-42.666666-42.666667s17.066667-42.666667 42.666666-42.666666 42.666667 17.066667 42.666667 42.666666-17.066667 42.666667-42.666667 42.666667z m183.466667 162.133333c-25.6 0-42.666667-17.066667-42.666667-42.666666s17.066667-42.666667 42.666667-42.666667 42.666667 17.066667 42.666667 42.666667-17.066667 42.666667-42.666667 42.666666zM392.533333 413.866667c-25.6 0-42.666667-17.066667-42.666666-42.666667s17.066667-42.666667 42.666666-42.666667 42.666667 17.066667 42.666667 42.666667-17.066667 42.666667-42.666667 42.666667z m196.266667 298.666666c-34.133333 0-64-29.866667-64-64s29.866667-64 64-64 64 29.866667 64 64c-4.266667 34.133333-29.866667 64-64 64z" fill="#444444"></path></svg>
\ No newline at end of file