How to customize the style of themes?

Vivliostyle公式テーマなど公開されているテーマを使って本を作る場合、ユーザーはそのスタイルをカスタマイズできる必要があります。

（公開テーマをどのようにしてカスタマイズして使うかは、vivliostyle-cli などテーマを使う側の実装の問題かもしれませんが、vivliostyle/themes の共通のメカニズムとして検討が必要ではないかと思うので、vivliostyle/themes のissueにしました。）

一般に、既存のスタイルシートをベースにしたスタイルのカスタマイズ方法として次のものがあります：

既存のスタイルシート（CSSファイル）をコピーして、それを修正する。
既存のスタイルシートがSassなどプリプロセッサで生成されている場合は、そのソースファイル（scssファイルなど）を修正して、それらを使ってCSSファイルを生成しなおす。（その場合、ソースファイルでは、よくカスタマイズするプロパティの値などが変数で設定されて "variables.scss" ファイルなど１箇所にまとめられていたりする。）
既存のスタイルシート（CSSファイル）をそのまま使うが、それに加えて追加のスタイルシートを指定する（HTML内で <link rel="stylesheet"> を既存のスタイルシートと追加するスタイルシート用にそれぞれ指定）。追加のスタイルシートでは、CSSカスケーディング規則によって、既存のスタイルシートでのスタイルを新しいスタイルで上書きする。
既存のスタイルシート（CSSファイル）を新しいスタイルシートの先頭で @import ルールによって取り込む（HTML内の <link rel="stylesheet"> には新しいスタイルシートのみ指定する）。CSSカスケーディング規則によって、既存のスタイルシートでのスタイルを新しいスタイルで上書きする。

以上のどの方法も、現状の vivliostyle/themes と vivliostyle-cli (v3.0.0-pre.2)ではうまくできないようです。

改善案：

ビルドのたびにテーマのCSSをnpmパッケージから取得するのではなく、テーマが最初にローカルにコピーされたら、ユーザーがそのCSSを修正してカスタマイズしたうえで本のビルドやプレビューをできるようにする。
テーマのパッケージにSass (scss)などスタイルシートのソースファイルが含まれている場合（その方法の定義も必要）、ソースファイルがコピーされて、ユーザーはそのscssファイル類を修正してカスタマイズしたうえで本のビルドやプレビューをできるようにする。
現状の vivliostyle.config.js で、ルートの theme のほかに、entry配列の項目ごとにも theme を指定できるが、本全体で共通の theme を使いながら、entry項目によって追加のスタイルシートを指定できるようにはなっていない。これをできるようにする。

現状の vivliostyle.config.js で、ルートの theme のほかに

について。これは Frontmatter に指定するのがよいと思います。Frontmatter はページ単位のメタデータなので例えば

style: 'akabeko'

のように指定 (プロパティー名は議論の余地あり) すると

<body class="akabeko">
...contents
</body>

のように class や id として出力されて、それを元に CSS や SCSS 側で外観を分岐します。この方法は

というメリットがあります。

テーマのCSSのscssソースをカスタマイズに活かすことができるように、各themeのpackage.jsonの "files" にscssも含めるとよさそうですね。現在は次のものだけ

Lines 18 to 21 in 5fe766e

    
           "files": [ 
        
             "*.css", 
        
             "*.css.map" 
        
           ],

それからテーマのパッケージに入っている example もここに含めるとよさそうです。そうすると create-book でこのexampleもインストールできるようになり、それを参考に原稿作成したり、スタイルのカスタマイズのためにも有用でしょう。

それからテーマのパッケージに入っている example もここに含めるとよさそうです。そうすると create-book でこのexampleもインストールできるようになり、それを参考に原稿作成したり、スタイルのカスタマイズのためにも有用でしょう。

いいですね。create-vivliostyle-theme のテンプレート修正します。