tech

ダークモード対応

Ryotaro Yamazaki

— 1 min read
Ghost CMS のテーマカスタマイズ備忘録を視覚化した画像で、AI により生成されました。This AI-generated image reflects a memo on Ghost theme tweaks like dark mode and CSS editing.
Ghost CMS のテーマカスタマイズ備忘録を視覚化した画像で、AI により生成されました。This AI-generated image reflects a memo on Ghost theme tweaks like dark mode and CSS editing.

テーマ作成して、いろいろ対応できたので、備忘録。

テーマ作成

基本的には、Bulma をそのまま使う形で対応。
Ghost の仕様で、変更したことがいろいろあった。

Ghost の仕様

Ghost の設定で、CSS で上書きする必要があることが少し。
すべてのページで @custom.site_background_color という変数から、バックグラウンドの色を設定する内容がある。これは、管理画面から Web サイトの背景色を設定した際の値が入ってくる模様。。。

この扱いをどうするか迷って、とりあえずオリジナルのテーマで Bulma の値で上書き。
管理画面からの設定が効かなくなるけど、ダークモード対応できないし、トレードオフかな。。。

上記に対応するため、テーマの既存の CSS と上記の内容の適用後に独自の CSS を読み込むようにした。

{{!-- Theme assets - use the {{asset}} helper to reference styles & scripts, this will take care of caching and cache-busting automatically --}}
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}">

{{!-- Custom background color --}}
<style>
    :root {
        --background-color: {{@custom.site_background_color}}
    }
</style>

<link rel="stylesheet" type="text/css" href="{{asset "built/vars.css"}}"> {{!-- これは、フォントのためのCSS --}}
<link rel="stylesheet" type="text/css" href="{{asset "built/theme.css"}}"> {{!-- これが、今回作ったCSS --}}

テーマ適用の際の一部抜粋した CSS

ほかに、既存の CSS で明示的に設定されているフォントの色などを明示的に上書きしないとダークテーマに対応できなかったり：

--background-color: var(--bulma-background-color);

.gh-navigation {
  color: var(--bulma-body-color); 
}

.gh-footer {
  color: var(--bulma-body-color);
}

カスタムテーマの一部抜粋

フォントの適用

これはまだまだちゃんとしないといけないけども、一旦は適用した。
何をやったかを簡単に：

  • vars.css という CSS を追加し、この中にフォントに関する情報を記載。
  • default.hbs というマークアップ言語？ に、上記の vars.css を読み込むように修正。
  • カスタムテーマの CSS にフォントに関する設定を追加。

開発者ツールだと sources に指定したフォントがなくて不安だけど、多分適用されていそう。
初めて知ったけど、日本語のフォントでイタリックに対応しているのって少ないらしい。。。
イタリック自体そんなに使うものじゃないからいいけど、Web だとフォントを自前で用意するとなると、イタリックについても明示的に対応しないといけないから、イタリックのフォントを見つける必要がある模様。

今回はこんなところかな？

Read more