Lauiuiのテーマカラーを変更する方法

layui テーマの色を変更する方法: テーマ変数layui-theme を使用して色を設定します。 CSS オーバーライドを使用し、!重要なルールを追加します。 JavaScript 経由で色を設定するには、layui-theme-file を使用します。

layui テーマの色を変更する方法

layui は人気のあるフロントエンド フレームワークであり、そのデフォルトのテーマです色は青です。テーマの色を変更する必要がある場合は、次の方法を使用できます:

1. テーマ変数を使用する

layui は layui-theme という変数を提供します。 テーマ変数を使用してテーマの色を制御できます。 CSS ファイルでこの変数を使用するには、次の手順に従います。

<code class="css">/* 导入 layui 样式文件 */
@import "~layui/dist/css/layui.css";

/* 自定义主题颜色 */
:root {
  --layui-theme: #your-color;
}</code>

#your-color を、使用する 16 進数のカラー コードに置き換えます。

2. CSS オーバーライドを使用する

テーマ変数を使用したくない場合は、CSS オーバーライドを使用してテーマの色を変更することもできます。これを行うには、CSS ファイルに次のコードを追加します。

<code class="css">/* 覆盖 layui 的默认主题颜色 */
.layui-btn {
  background-color: #your-color !important;
}

.layui-input {
  border-color: #your-color !important;
}

/* ...其他元素样式 */</code>

#your-color を、使用する 16 進数のカラー コードに置き換えます。 #! important ルールは、layui のデフォルト スタイルをオーバーライドするために使用されることに注意してください。

3.layui-theme-file を使用する

layui-theme-file という名前の JavaScript ファイルを提供します。色。このファイルを使用するには、次の手順に従います。

<code class="html"><!-- 包含 layui-theme-file -->
<script src="layui-theme-file.js"></script>

<!-- 更改主题颜色 -->
<script>
  layui.theme({
    color: '#your-color'
  });
</script></code>

#your-color を、使用する 16 進数のカラー コードに置き換えます。

以上がLauiuiのテーマカラーを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。