ㄅlog ⟆‧ ͠⎼ ‧⟅

大家看到的不是我看到的

今天發現我原本使用的 Bear Blog 佈景主題在電腦淺色模式套色不太正確，於是問了 Google AI 請它幫忙修改，才知道在這之前大家看到的可能會跟我不一樣！

因為我有改過佈景主題的 CSS 參數，而且我自己電腦和手機都習慣用深色模式，因此我只調整了 @media (prefers-color-scheme: dark) 裡面的參數，讓整體變成黑底白字加黃字，閱讀舒服，以為這樣就大功告成ㄌ。

直到偶然用了 Messenger APP 框架內建瀏覽器，以及別台非深色模式的電腦時，才察覺不對勁，便透過 Google AI 得到答案：因為 @media (prefers-color-scheme: dark) 寫在下層，於是電腦處於淺色模式時，瀏覽器會自動去抓取了在頂部的 :root 設定，而我一直都沒有去檢視有沒有動到預設的 :root 裡面的參數，導致呈現出來的樣式會因淺色或深色模式而相異，然後淺色模式有一些地方就怪怪的。

解決方法是把 CSS 裡的 @media (prefers-color-scheme: dark) 區塊整段刪除或者改成空殼就好了，然後把我要的參數設定改到 :root 裡面。這樣大家應該會看到黑底白字加黃字的主題了吧！如果還有發現不一樣的話還請跟我說，不然真的當局者迷，旁觀者清 (๑﹏๑//)

分享我的佈景主題 CSS，我是用「Bloc」主題再去修改裡面的參數（多半是有 Google AI 協助），引入芫荽體和微調色彩樣式，歡迎參考使用，有厲害的大大也可以幫我看看哪裡還有機會改善 > <

🛈 更新（2026-06-24）
漂流到 It’s小白得知厲害的 emfont，於是把 @import 芫荽體（Iansui）的部分改由 emfont 引入！

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url("https://font.emtech.cc/css/Iansui");


:root {
    --width: 720px;
    --font-main: 'Iansui', 'Open Sans', sans-serif;
    --font-secondary: 'Iansui', 'Open Sans', sans-serif;
    --font-scale: 1.1em;
    --background-color: #000000;
    --heading-color: #ddd; /* 原為 #aaa */
    --text-color: #ddd; /* 原為 #ffffff */
    --link-color: #e3bc5e;       /* 日間模式進來也必須是金色 *//* 原為 #8cc2dd */
    --visited-color: #dfcc9e;    /* 已造訪連結 *//* 原為 #8b6fcb */
    --code-background-color: #2a2a2a; /* 給引用一個獨立的微亮背景 *//* 原為 #aaa */
    --code-color: #ddd; /* 原為 #ffffff */
    --blockquote-color: #ccc; /* 原為 #ffffff */
    --link-hover-color: #ffffff; /* 懸停時變純白，對比度更好 */
}

@media (prefers-color-scheme: dark) {
    :root { }
}

body {
    font-family: var(--font-secondary);
    font-size: var(--font-scale);
    font-weight: 300;
    margin: auto;
    padding: 30px 20px;
    max-width: var(--width);
    text-align: left;
    background-color: var(--background-color);
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
    color: var(--text-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-main);
    color: var(--heading-color);
    font-weight: 800;
}

a {
    color: var(--link-color);
    cursor: pointer;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    text-decoration-style: solid;
}

header {
    text-align: center;
    background: #333333; /* 從 #505050 改為更深的灰 */
    padding: 30px 25px;
    border-bottom: 2px solid white;
    margin-bottom: 40px;
}

nav p {
    margin-bottom: 0px;
}

nav a {
    font-family: 'Open Sans', sans-serif;
    font-size: .9em;
    margin-right: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px; /* 字母間距拉開一點，比較有設計感 */
}

nav a:last-child {
    margin-right: 0px;
}

strong,
b {
    color: var(--heading-color);
    font-weight: 700; /* 強制使用最粗的字重 */
}

button {
    margin: 0;
    cursor: pointer;
}

main {
    line-height: 1.6;
}

content a {
    text-decoration: underline;
    text-decoration-style: solid;
}

table {
    width: 100%;
}

hr {
    border: 0;
    border-top: 1px dashed;
}

img {
    max-width: 100%;
}

code {
    font-family: monospace;
    padding: 2px;
    background-color: var(--code-background-color);
    color: var(--code-color);
    border-radius: 0px;
}

blockquote {
    border-left: 5px solid var(--blockquote-color);
    background: var(--code-background-color);
    color: var(--blockquote-color);
    padding-left: 20px;
    font-style: normal; /* 從 italic 改為 normal */
    margin-left: 0px;
    margin-right: 0px;
    padding: 10px 20px;
}

footer {
    margin-top: 40px;
    border-top: 2px solid white;
    background: #333333; /* 與 header 保持一致 */
    padding: 25px 0;
    text-align: center;
}

.title:hover {
    text-decoration: none;
}

.title h1 {
    margin-top: 0px;
    font-size: 1.5em;
    color: white;
}

.inline {
    width: auto !important;
}

.highlight,
.code {
    padding: 1px 15px;
    background-color: var(--code-background-color);
    color: var(--code-color);
    border-radius: 0px;
    margin-block-start: 1em;
    margin-block-end: 1em;
    overflow-x: auto;
}

/* blog post list */
ul.blog-posts {
    list-style-type: none;
    padding: unset;
}

ul.blog-posts li {
    display: flex;
    margin-bottom: 15px;
}

ul.blog-posts li span {
    flex: 0 0 130px; /* 縮小日期寬度，讓標題有更多空間 */
    color: var(--heading-color);
    font-size: 0.9em;
}

ul.blog-posts li a:visited {
    color: var(--visited-color);
}

ul.blog-posts li a:visited:hover {
    color: var(--link-hover-color);
}

time {
    font-style: normal
}

table {
    border-collapse: collapse;
}

table,
th,
td {
    border: 1px dashed var(--heading-color);
    padding: 10px;
    font-size: 1em;
}


/* 讓部落格標題恢復預設字體或指定字體 */
#blog-title a, .title h1 {
  font-family: 'Open Sans' !important; /* 或者改為你喜歡的字體名稱 */
  letter-spacing: -0.5px !important;  /* 數值越負（如 -3px），符號就會越黏 */
}

/* 調整註腳區域的字體 */
.footnotes {
    font-size: 0.9em; /* 比主文字小一點 */
    opacity: 0.9;      /* 稍微降低透明度，讓它看起來像補充資訊 */
}