【framework7】themeの色はlessファイルを変更で変えられる
≈
今回はテーマの色をデフォルトから変更したかったので、以下のサイトを参考にしてテーマの色を変更してみた。
[discussion] Idea about themes - Questions - Framework7 Forum
①新規lessファイルの配置
wwwのcss配下に新しくlessファイルを作ってcustomカラーを定義する。
-www -css app.css icons.css f7-theme.less ←これ
lessファイルの中身。
@import '../../node_modules/framework7/framework7.less'; @themeColorIos: #FFC666; @themeColorMd: #FFC666; @colorsIos: red #ff3b30, green #4cd964, blue #007aff, pink #ff2d55, yellow #ffcc00, orange #ff9500, gray #8e8e93, white #ffffff, black #000000, custom #FFC666; @colorsMd: red #f44336, green #4caf50, blue #2196f3, pink #e91e63, yellow #ffeb3b, orange #ff9800, gray #9e9e9e, white #ffffff, black #000000, custom #FFC666;
元々色を定義していたframework7.lessの中身を上書きしている感じ。
customという色を作って適用した。
②lessファイルのコンパイル
ファイルをコンパイルしてcssファイルを生成。
SyntaxError: Inline JavaScript is not enabled. Is it set in your options?
と言われるのでオプションをつけて実行した。
lessc --js ./www/css/f7-theme.less ./www/css/f7-theme.css
③生成されたcss配置
先ほどのコンパイルがうまくいくとcssが作成される。
-www -css app.css icons.css f7-theme.less f7-theme.css ←これ
index.html内でcssを読み込む。
<link rel="stylesheet" href="css/f7-theme.css”> (略) <body class="color-theme-custom”>
とするとカスタムカラーが適用されるようになる。
チェックボックスとインプットエリアだけ作成した色が適用されていなかったので、以下の記述をlessファイルに追加して再度コンパイル。
@import url('../../node_modules/framework7/components/checkbox/checkbox.less'); @import url('../../node_modules/framework7/components/input/input.less’);
最終的なファイルの中身。
@import '../../node_modules/framework7/framework7.less'; @themeColorIos: #FFC666; @themeColorMd: #FFC666; @colorsIos: red #ff3b30, green #4cd964, blue #007aff, pink #ff2d55, yellow #ffcc00, orange #ff9500, gray #8e8e93, white #ffffff, black #000000, custom #FFC666; @colorsMd: red #f44336, green #4caf50, blue #2196f3, pink #e91e63, yellow #ffeb3b, orange #ff9800, gray #9e9e9e, white #ffffff, black #000000, custom #FFC666; @import url('../../node_modules/framework7/components/checkbox/checkbox.less'); @import url('../../node_modules/framework7/components/input/input.less’);
framework7のv4ではこの辺また変わると書いてあるけど、v3で作る場合にはカスタムカラーは定義が必要でした。