アヤポコの雑記*2人目育児中

育児のこと、旅行のこと、仕事のこと。30代の第二子子育て中の雑記です。

【スポンサードリンク】

【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という色を作って適用した。
f:id:ayapc:20190222174114j:plain

②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で作る場合にはカスタムカラーは定義が必要でした。