---
title: HackMD First-theme
tags: theme
description: Use `{%hackmd @chc-otomen/First-theme %}` syntax to include this theme.
---

<style>

/* 頁面整體設定 */
body, .ui-view-area,
.markdown-body,
.ui-content {
background: #0F1020 !important;
color: #DDDDDD !important;
}

/* 設定右上角留言按鈕 */
#comment-app .open-comments {
background: transparent;
}
.btn-default {
background: transparent;
border-color: #FFF99399;
}
.btn-default:hover {
background: transparent;
}
.ui-comment-app .open-comments .btn.ui-open-comments {
color: #fff99399;
}
.ui-comment-app .open-comments .btn.ui-open-comments:hover {
color: #fff993;
}
/* 設置愛心、收藏、小鈴鐺按鈕 */
.community-button {
color: #FFF99399;
}
.community-button:hover {
color: #FFF993;
background: transparent;
}
/* h1, h2 樣式 */
.markdown-body h1{
color: #DDDDDD;
border-bottom-color: #ffffff80;
text-shadow: 3px 3px 3px #ca252180;
}

.markdown-body h2{
color: #DDDDDD;
border-bottom-color: #0F1020;
padding: 2px;
text-shadow: 3px 3px 3px #ca252180;
}

/* h6 date 標籤 */
.markdown-body h6 em {
position: absolute;
top: 40px;
right: 20px;
}

/* 目錄 [TOC] */
.markdown-body .toc > ul {
position: relative;
padding-top: 40px;
padding-bottom: 12px;
background: #32373B;
border-radius: 4px;
}
.markdown-body .toc > ul::before {
position: absolute;
content: '目錄';
top: 0;
left:50%;
transform: translateX(-50%);
font-size: 24px;
text-shadow: 3px 3px 3px #ca252180;
}

/* 設定圖檔的顯示 */
.markdown-body img {
background-color: transparent;
border-radius: 4px;
}

/* 設定小目錄的背景顏色 */
.ui-toc-dropdown {
background-color: #0F1020;
}

/* 設定行動裝置中，小目錄按鈕 */
.ui-toc-label.btn {
background: #F0E7D899;
color: #0F1020;
}
.ui-toc-label.btn:hover {
background: #F0E7D8;
color: #0F1020;
}

/* 設定小目錄內連結 */
.ui-toc-dropdown .nav>li>a,
.toc-menu>a {
color: #FFF99380;
font-weight: bold;
}
.ui-toc-dropdown .nav>li>a:focus,
.ui-toc-dropdown .nav>li>a:hover {
color: #FFF993;
border-left: 1px solid #FFF993;
}

.ui-toc-dropdown .nav>.active:focus>a,
.ui-toc-dropdown .nav>.active:hover>a,
.ui-toc-dropdown .nav>.active>a {
color: #FFF993;
border-left: 1px solid #FFF993;
}

.toc-menu>a:focus,
.toc-menu>a:hover {
color: #FFF993;
}

/* 設定 strong 粗體 */
.markdown-body strong {
background: #284B63;
border-radius: 4px;
padding: 2px;
color: #DDDDDD;
}

/* 設定引用 */
.markdown-body blockquote {
border-left: 4px solid #8F91A2;
padding: 15px;
margin: 12px;
background: #ffffff60;
}

/* 設定表格 */
.markdown-body table tr {
background-color: #ffffff30;
}
.markdown-body table tr:nth-child(2n) {
background-color: #ffffff15;
}

/* 設定 mark */
.markdown-body mark {
color: #000000;
background: linear-gradient(180deg, #DCEDFF 0%, #94B0DA 100%);
border-radius: 4px;
margin: 2px;
}

/* 設定連結 */
a,
.open-files-container li.selected a {
color: #FFD07B;
}
a:hover,
.open-files-container li.selected a:hover {
color: #FFD07B;
}

/* 設定 ins */
.markdown-body ins {
text-decoration: none;
text-shadow: 3px 3px 3px #FF999380;
}

/* 設定 code 模板 */
.markdown-body code,
.markdown-body tt {
background-color: #30292F !important;
}
.markdown-body .highlight pre,
.markdown-body pre {
color: #ddd;
background-color: #30292F !important;
}
.hljs-tag {
color: #ddd;
}
.token.operator {
background-color: transparent;
}

/* 回到最上面的按鈕 */
.markdown-body a > .fa-chevron-up {
position: fixed;
bottom: 20px;
right: 20px;
padding: 4px;
border-radius: 4px;
background: #F0E7D899;
color: #0F1020;
}
.markdown-body a:hover > .fa {
background: #F0E7D8;
color: #0F1020;

}

/* 引用 */
.markdown-body blockquote {
background: #F0E7D8;
color: #111D13;
}
blockquote .small,
blockquote footer,
blockquote small {
color: #ccc99399;
}
/* 右邊滾動軸 */
::-webkit-scrollbar {
width: 4px;
}
::-webkit-scrollbar-track {
background: #000000;
color: #000000;
}
::-webkit-scrollbar-thumb {
background: #F0E7D899;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #F0E7D8;
}

/* 動畫 */
@keyframes discolor {
0%, 100% {filter: hue-rotate(0);}
50% {filter: hue-rotate(360deg);}
}

</style>

*[HTML]: Hyper Text Markup Language
*[CSS]: Cascading Style Sheets
*[SPA]: Single Page Application
*[SSR]: Server Side Render
*[AMP]: Accelerated Mobile Pages
*[PWA]: Progressive Web App
*[ES6]: ECMAScript 6
*[六角學院]: 佛心教學公司

[<i class="fa fa-chevron-up"></i>](#)