*基本的にSCP-3222-JPのソースコードを参照して解説します。
テーマ切り替え
(ここはコピペで問題ありません)
[[module ListPages offset="@URL|0" range="."]]
[[%%content{0}%%include :scp-wiki:theme:basalt |darkmode=a |hidetitle=a]]
%%content{2}%% [!--共通CSS--]
%%content{3}%% [!--ダークテーマ--]
[[/module]]
[[module ListPages limit="@URL|0" range="." urlAttrPrefix="accessibility"]]
[[%%content{0}%%include :scp-wiki:theme:basalt |centertitle=a]]
%%content{2}%% [!--共通CSS--]
%%content{4}%% [!--通常テーマ--]
[[/module]]冒頭のこれはページ遷移単一化構文の応用です。ページ遷移単一化構文では、%%content{2}%%*が<1ページ目の本文>、%%content{3}%%が<2ページ目の本文>、%%content{4}%%が<3ページ目の本文>、のように対応しています。
ここでは、記事本文を<全ページ共通部分>に置き、共通CSSを1ページ目に、ダークテーマを2ページ目に、通常テーマを3ページ目に置いています。1つ目のListPagesモジュールで1ページ目と2ページ目、2つ目のListPagesモジュールで1ページ目と3ページ目を呼び出すことで、ページ遷移によってテーマ切り替えが実現します。include構文に入っている%%content{0}%%はおまじないです。
カスタマイズ
共通CSS
:root {
--header-title: "金玉蹴撃";
--header-subtitle: "努力・未来・A BEAUTIFUL STAR";
--UI-font: var(--body-font);
--main-content-width: 55rem;
}共通CSS冒頭の--header-titleと--header-subtitleで左上に表示される文字を変更しています(SCP-3222-JPでは訓戒に倣ってサブタイトルが非表示になっています)。ENのテーマをインクルードしているので、日本語にするにはそれぞれ「SCP財団」「確保・収容・保護」を指定します。
サブタイトルを表示するには、/* Admo-like Custom */の直下にある
#header h1 a span::after {
display: none;
}の記述を削除します。
ダークモード
:root {
--basalt-primary-color: 8, 5, 0;
--basalt-secondary-color: 11, 9, 0;
--basalt-tertiary-color: 51, 51, 51;
--basalt-bright-element-color: 187, 153, 51;
--basalt-dark-element-color: 153, 119, 51;CSS変数で重要なのは以上の5つくらいだと思います。これらはテーマの各要素の配色を決定していて、3個の数字の組は色コードを表しています。なかでも、--basalt-bright-element-colorと--basalt-dark-element-colorは彩度が高い色なので要検討です(brightはリンクの色など、darkは訪問済リンクの色などで見られます)。色コードの調整はこちらのページが役立ちます(外部サイト)。
CSS変数の列の一番後ろにくっついている--three-colorはACSの黄色を記事のテーマカラーに揃えるための記述なので、適宜変更するか、削除してください。
/* Admo-like Custom */の直下にある
@media only screen and (min-width: 1025px) {
body {
background: linear-gradient(90deg, rgba(0, 0, 0, 0.67) 0%, rgb(var(—basalt-primary-color)) 15% 85%, rgba(0, 0, 0, 0.67) 100%), url(http://scp-jp-storage.wdfiles.com/local--files/file:5722815-112-f95z/3222jp-backdrop.webp);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
}
}
の青字部分でフルスクリーン時の背景の設定をしています。url()内のリンクを任意の画像に置き換えてください。緑字の数字は0~1の範囲で変更できます。値が大きいほど背景画像が暗くなります。使用する画像の明度に合わせて調整してください。
アクセシビリティモード
SCP-3222-JPではアクセシビリティモードで大タイトルを非表示化しています。この機能が不要なら、
:is(.table1, .table2, .table3, .table4, .table5, .table6) {
--basalt-th-background-color: var(--basalt-UI-dark-palette);
--basalt-th-text-color: var(--basalt-light-text-color);
}以外の箇所は削除します。また、上記のListPagesの2個目の中のcentertitle=aをhidetitle=aに変えます。さらに、ダークモードとアクセシビリティモードを行き来するため、大タイトルのリンクを相互にしなければなりません。このあたりはSCP-3772-JPの方が参考になると思います。





