@wikiにカスタムCSSを導入する
基本のコードはGPTに頼んだ
細かい部分をcustard.iconが変更
主な変更点
基本の色を変更
リンクを青から緑に
背景も変更
ダークモードに対応
cf.
@media (prefers-color-scheme: dark)で動的に変更
OSの設定に従うらしい
詳細は見てない
課題
ライドモードの設定
従来より見辛くなっている
ダークモードとの切り替え
ダークモードの微細な変更
何か不具合あれば改善したい
枠が表示されないとか
表の上部分が白くなっているのは問題
code: custom.css
/*-------------------------------------------------------
1. カスタムプロパティで全色を定義
-------------------------------------------------------*/
:root {
/* 背景系 */
/* 文字系 */
/* 境界線・シャドウ */
--color-shadow: rgba(0,0,0,.25);
/* 選択 */
--color-select-text: #fff; }
/*-------------------------------------------------------
2. OSがダークモードのときの上書き
-------------------------------------------------------*/
@media (prefers-color-scheme: dark) {
:root {
/* for dark mode
/* 選択 */
--color-select-text: #222; */
/* 統一*/
/* リンク */
/* 境界?など */
--color-shadow: rgba(0,0,0,.6);
}
}
/*-------------------------------------------------------
3. 全体スタイルに変数を適用
-------------------------------------------------------*/
body {
background: var(--color-bg) !important;
color: var(--color-text) !important;
font-family: 'Noto Sans JP', sans-serif !important;
line-height: 1.6 !important;
margin: 0; padding: 40;
}
a { /* リンク */
color: var(--color-link) !important;
text-decoration:none !important;
transition: color .2s ease;
}
a:hover {
color: var(--color-link-hover) !important;
text-decoration:underline !important;
}
/* パネル系（wrapper, shadow, footnote など） */
.main_wrapper,
.atwiki-contents-shadow,
.atwiki-side-ads,
.atwiki-footnote,
.atwiki-footer-ads {
background-color: var(--color-panel) !important;
}
.atwiki-contents-shadow {
box-shadow: 0 0 2px var(--color-shadow), 0 2px 2px var(--color-shadow);
}
/*
h3の要素の色が黒かったため
他も同様
*/
.atwiki-contents h3, .atwiki-contents h4,
.atwiki-sp-contents h3, .atwiki-sp-contents h4,
.uk-h1,.uk-h2,.uk-h3,.uk-h4,.uk-h5,.uk-h6,h1,h2,h3,h4,h5,h6
{
color: var(--color-text)
}
/*
選択時の色
コピーする時の色を青から赤紫に
*/
::selection {
background: var(--color-select-bg);
color: var(--color-select-text);
text-shadow: none
}
/* テーブルやボーダーに共通の境界線色 */
table,
*, /* グローバルにすべての境界線を */
.atwiki-contents-shadow {
border-color: var(--color-border) !important;
}
/*-------------------------------------------------------
4. 既存の大画面用メディアクエリも変数化
-------------------------------------------------------*/
@media print, screen and (min-width: 960px) {
.main_wrapper {
background-color: var(--color-panel) !important;
}
/* 必要に応じて他の固定色も var(--…) に置き換えてください */
}