序文：
この記事の目的は、ローカル アイコンの色調を含め、アプレットの全体的なテーマ カラーをグローバルに構成することです。最初のステップは、全体的なテーマの色とローカル アイコンの色をローカルで均一に変更できることを認識することです。2 番目のステップは、バックグラウンド インターフェースを介してアプレットのフロント エンドの全体的なテーマの色とローカル アイコンの色を動的に調整することです。ローカル アイコンのテーマ カラー調整には、svg 形式の画像を使用する必要があります. svg 画像の色の変更については、記事uniapp が WeChat アプレットを開発 - svg アイコンの色の動的変更を実現する を参照してください.
1.統一された構成
1、uni.scss
uni.scss ファイルは、ここでグローバル カラー構成に使用されます。uniapp コンパイラーは、webpack 構成内の uni.scss に対して特別な処理を行うため、各 scss ファイルが uni.scss に挿入され、構成をグローバルに使用できるようになります。
スタイル ノードは lang="scss" を追加するだけで、インポートせずに uni.scss で構成された変数を直接参照できます。
<style lang="scss">
</style>ここでは、デフォルトの uni.scss ファイルの内容を直接使用します。
/* 颜色变量 */
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;
/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
/* 边框颜色 */
$uni-border-color:#c8c7cc;
/* 尺寸变量 */
/* 文字尺寸 */
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16;
/* 图片尺寸 */
$uni-img-size-sm:20px;
$uni-img-size-base:26px;
$uni-img-size-lg:40px;
/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;
/* 水平间距 */
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;
/* 垂直间距 */
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;
/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:20px;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:26px;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:15px;参照するページのスタイル ノードに lang="scss" を追加すると、スタイル内の uni.scss で構成された色変数を直接使用できます。ここでは $uni-color-primary を例として取り上げます。
<style lang="scss">
.quare-v{
width: 200rpx;
height: 200rpx;
background-color: $uni-color-primary;
}
</style><view class="content">
<view class="quare-v"></view>
</view>表示された効果を確認できます。背景色は uni.scss で設定された色です。
2. js は uni.scss 内の変数を参照します
上記は、uni.scss で構成された色変数がスタイルで直接参照されていることを示しています。js で uni.scss の color 変数を参照できるか見てみましょう。
uni.scss の変数を js で直接参照することはできません.まず uni.scss で色変数をエクスポートし、次に uni.scss を js でインポートして設定した色変数を呼び出す必要があります.
uni.scss ファイルで変数をエクスポートする例は次のとおりで、次のコードを追加するだけで十分です。
:export {
uni_color_success: $uni-color-success
}js で uni.scss ファイルを導入します。
import styles from '../../uni.scss'構成された色を使用する必要がある場合は、次のコードを使用して呼び出します。
styles.uni_color_success効果は次のとおりです。
this.bagColor = styles.uni_color_success;<view class="content">
<view class="square-v" :style="{'background-color': bagColor}"></view>
<view class="square-v"></view>
</view>
記事uniapp と組み合わせて WeChat アプレットを開発 - svg アイコンの色の動的な変更を実現します。参照された色変数の値を使用して、svg 画像の色を変更できます。
プロジェクト全体を通して、色を使用する必要があるスタイルと js に uni.scss をインポートし、uni.scss で統一された色変数を構成します。カラー値を変更する機能を実現でき、グローバル カラーが変更され、ローカルで統一された構成とグローバル テーマ カラーの変更の目的を達成できます。