intro.jsをダウンロードしたら、「themes」フォルダにcssが6種入ってたので、introjs.cssの代わりに適用してみます。
代わりにというか、単体だと動作しなかったので、introjs.cssに追加の形で。
コメントアウトしてますが、下の６つが、themesフォルダに入ってるCSS
言うまでもないですが、/themes/をお忘れないよう。
単体だと動作しないので、introjs.cssに追加で。
dark／暗い・闇
tooltipが暗い分、tooltip以外の部分が、白っぽくなります。ボタン色に対して白文字なのが読みづらいかな。
introjs-dark.css
flattener／扁平器
ボタンの色が紺色（hover時）。標準とそんなに差がないです。
introjs-flattener.css
modern／現代的
tooltipが透明感のある黒です。涼し気で好き～
introjs-modern.css
nassim／ナッシム（は？）
順番を示す数字が四角くて、紙っぽく折ってあるデザイン。あと「・・・」が謎に上に移動しました。nassimってなんでしょう。
introjs-nassim.css
nazanin／ナザニン（は？）
個性的な配色。nazaninて何？？
introjs-nazanin.css
royal／ロイヤル・王立
ページ全体の下に「次へ」などのボタンと「・・・」が出ます。tooltipが表示されなくなりました💦ちょっとキャプチャ貼れないのですが、まんなかに小さい□と、端っこに、表示しきれてない何かが表示されるのですが。without elementsとの相性が悪いのかな。
introjs-royal.css
画面のまんなかにtooltipじゃない小さな□が表示されます
画面左端に何かが出ています。なんなの。。。
rtl
introjs.cssと同じ階層に入っているintrojs-rtl.css。こちらも、単体では動作せず、追加の形で適用。右から左へ読む言語用のCSSのようです。
introjs-rtl.css
他に
あとは、minifiedフォルダにminのつくjsファイルとともにcssも入ってたのと、example/bootstrapフォルダ内にたくさんbootstrap関係のCSS、SCSSが入ってました。
自分でCSS編集する
とりあえず数字が赤いのをサービスの色の合わせようと、CSSで使われていた「#ff3019」という赤色を置換したら、こんなんになりました。赤一色に見えたけど「#cf0404」という似たような赤とグラデーションしてあったみたいです。手が込んでんな。
他、グレーにみえるところもいろんなグレーだったり、意外とグラデーションしてたりして手が込んでます！LINE社のチュートリアルのようにしたいので、数字の地色、tooltip内の太字、「・・・」、ボタン、あたりの色をサービスの色に統一したいんですけどね。なかなか手がかかります！
LINE社のチュートリアルこんな感じ
https://manager.line.biz/account/（ビジネスアカウント）/insight
右上「ヘルプ」⇒チュートリアルからいけます。基本tooltipは要素を指定してるけど、最初のひとつだけ、要素をハイライトしつつもtooltipは真ん中で、吹き出し型じゃなく四角で表示されてるのよね。どうやってやったんだろ。
footerの下に入ってるこれかなと思う。見た目よく似てるけど手作りなのかな。class名みるとbootstrapっぽいんだよなー・・・
<div class="modal bg-backdrop vue-portal-target ">
<div class="d-block position-fixed justify-content-center align-items-center bg-transparent"
style="top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 10;">
<div data-v-779c0f02="" class="tutorial-balloon tutorial-item modal-dialog-centered m-3" style="display: flex;">
<div data-v-779c0f02="" class="card mx-auto" style="width: 480px;">
<!---->
<div data-v-779c0f02="" class="card-body">
<h5 data-v-779c0f02="" class="card-title"><span data-v-779c0f02="" class="text-primary">ホーム</span>
<div data-v-779c0f02="" class="position-absolute p-2" style="font-size: 0.875em; top: 0px; right: 0px;">
<i data-v-779c0f02="" class="las la-times p-2" style="cursor: pointer; opacity: 0.5;"></i></div>
</h5>
<p data-v-779c0f02="" class="card-text">
ここはトップページです。左側のメニューから、メッセージ配信やタイムラインなど、いろんな機能を利用できます。
</p>
<div data-v-779c0f02="" class="d-flex justify-content-between align-items-end mt-3">
<div data-v-779c0f02=""><span data-v-779c0f02=""
class="badge badge-pin mr-2 badge-primary mr-2"></span><span data-v-779c0f02=""
class="badge badge-pin mr-2 badge-secondary mr-2"></span><span data-v-779c0f02=""
class="badge badge-pin mr-2 badge-secondary mr-2"></span><span data-v-779c0f02=""
class="badge badge-pin mr-2 badge-secondary mr-2"></span><span data-v-779c0f02=""
class="badge badge-pin mr-2 badge-secondary mr-2"></span><span data-v-779c0f02=""
class="badge badge-pin mr-2 badge-secondary mr-2"></span></div>
<div data-v-779c0f02="" class="flex-shrink-0 ml-2"><button data-v-779c0f02="" type="button"
class="mr-2 btn btn-secondary">チュートリアルを終了</button> <button data-v-779c0f02="" type="button"
class="btn btn-primary">次へ</button></div>
</div>
</div>
</div>
</div>
qiitaに詳しく書いてくれてる方がいらっしゃったので、参考にして（私にはちょっと難しいが）、がんばってみます。
qiitaの記事）
https://qiita.com/HiromiKai_Green/items/6e461f645cd9e1f57b3c
