アプリのthemeの整理のため配色ガイドラインを設けてそれに合わせて実装しました。
配色ガイドライン
Figmaで画像の配色ガイドラインを設けて、それに合わせて設定していきます
カラー名 | 役割 |
---|---|
primary | サービスのメインカラー。サービスを表す箇所で使用 |
secondary | サービスのセカンダリーカラー。サービスを表す箇所で使用 |
base | ベースカラー。テキスト、ボーダーで使用 |
accent1 | アクセントカラー1。ポジティブ側に強調したい時に使用 |
accent2 | アクセントカラー2。ネガティブ側に強調したい時に使用 |
error | エラーカラー。エラー、削除、強めの注意する際に使用 |
background | バックグラウンドカラー。通常の背景色に使用 |
上記のカラー名にpale、light、main、darkの4段階のレンジを設けて設定をしました。
こちらを元に実装していきます。
アプリ編(React Native)
Pull Request
実装
配色ガイドラインに沿ってカラーコードを以下の通り記載
// 配色ガイドラインのカラー const baseColor = { primary: { pale: '#D5EEE2', light: '#5DC894', main: '#006835', dark: '#003119', }, secondary: { pale: '#F4FFBE', light: '#E6F599', main: '#ADCF01', dark: '#7F9705', }, base: { pale: '#DBDBDB', light: '#9D9D9D', main: '#4F4F4F', dark: '#110f0f', }, accent1: { pale: '#E5F0FF', light: '#A8C9F5', main: '#2F80ED', dark: '#034092', }, accent2: { pale: '#FFFAEA', light: '#FFEDB5', main: '#F2C94C', dark: '#BE9109', }, error: { pale: '#FFEBEB', light: '#FFABAB', main: '#E15757', dark: '#A81A1A', }, background: { light: '#FAFAFA', main: '#ffffff', dark: '#000000', }, }; const theme: Theme = { light: { color: baseColor, // ← カラーを追加 },
こちらを使用して以下の通りに設定
StyleSheet
設定からカラーコードを指定
import { StyleSheet } from 'react-native'; import theme from 'config/theme'; const styles = StyleSheet.create({ title: { fontWeight: '600', color: theme().color.primary.main, }, description: { color: theme().color.base.light, } });
react-native-elementのtheme
ペペロミアではUIライブラリとしてreact-native-elementを使用しているので、こちらのtheme設定にも使用
import { StyleSheet } from 'react-native'; import { ThemeProvider } from 'react-native-elements'; import EStyleSheet from 'react-native-extended-stylesheet'; import theme from 'config/theme'; const styles = StyleSheet.create({ buttonStyle: { borderRadius: 25, borderColor: theme().color.secondary.main, }, buttonTitleStyle: { color: theme().color.base.pale, fontWeight: '600', }, dividerStyle: { backgroundColor: theme().color.base.light, }, }); const estyles = EStyleSheet.create({ text: { color: '$text', }, listItem: { backgroundColor: '$settingMenu', }, }); const RNETheme = { Button: { raised: true, buttonStyle: styles.buttonStyle, titleStyle: styles.buttonTitleStyle, }, ListItem: { containerStyle: estyles.listItem, }, ListItemTitle: { style: estyles.text, }, Divider: { style: styles.dividerStyle, }, colors: { primary: theme().color.primary.main, // colorsのprimaryに設定する各UIのデフォルトカラーの設定を変更可能 }, }; ...略) <ThemeProvider theme={RNETheme} useDark={scheme === 'dark'}> {props.children} </ThemeProvider>
設定すると画像の通りButtonがデフォルトでアプリのカラーが適合されるようになります。
ESLint
また、カラーコードの直書きを禁止するためESLintのreact-native/no-color-literalsをONにしてカラーの直書きをerrorに設定
これで、もしカラーコードも無視して設定した場合でもLintで検知できるようになります。
$yarn lint
Web編(Vue.js)
Pull Request
実装
カラーコードの宣言は一箇所に、まとめたかったのでscssファイルに宣言
$primary: ( pale: #D5EEE2, light: #5DC894, main: #006835, dark: #003119, ); $secondary: ( pale: #F4FFBE, light: #E6F599, main: #ADCF01, dark: #7F9705, ); $base: ( pale: #DBDBDB, light: #9D9D9D, main: #4F4F4F, dark: #110f0f, ); $accent1: ( pale: #E5F0FF, light: #A8C9F5, main: #2F80ED, dark: #034092, ); $accent2: ( pale: #FFFAEA, light: #FFEDB5, main: #F2C94C, dark: #BE9109, ); $error: ( pale: #FFEBEB, light: #FFABAB, main: #E15757, dark: #A81A1A, ); $background: ( light: #FAFAFA, main: #ffffff, dark: #000000, ); :export { @each $key, $value in $primary { primary_#{unquote($key)}: $value; } @each $key, $value in $secondary { secondary_#{unquote($key)}: $value; } @each $key, $value in $base { base_#{unquote($key)}: $value; } @each $key, $value in $accent1 { accent1_#{unquote($key)}: $value; } @each $key, $value in $accent2 { accent2_#{unquote($key)}: $value; } @each $key, $value in $error { error_#{unquote($key)}: $value; } @each $key, $value in $background { background_#{unquote($key)}: $value; } }
styleタグでの使用
カラーコードはsassのmap機能を使用して設定
$primary: ( pale: #D5EEE2, light: #5DC894, main: #006835, dark: #003119, );
カラーコードを指定は以下の通り
<style lang="scss" scoped> @import '~/assets/variables.scss'; .title { color: map-get($primary, main); } .text { color: map-get($base, main); } </style>
vuetifyjsのテーマ設定
vuetifyjsのテーマにも配色ガイドラインを設定します
export default { customVariables: ['~/assets/variables.scss'], theme: { themes: { dark: { primary: theme().primary_main, secondary: theme().secondary_main, error: theme().error_main, themePrimaryPale: theme().primary_pale, themePrimaryLight: theme().primary_light, themePrimaryMain: theme().primary_main, themePrimaryDark: theme().primary_dark, themeSecondaryPale: theme().secondary_pale, themeSecondaryLight: theme().secondary_light, themeSecondaryMain: theme().secondary_main, themeSecondaryDark: theme().secondary_dark, themeBasePale: theme().base_pale, themeBaseLight: theme().base_light, themeBaseMain: theme().base_main, themeBaseDark: theme().base_dark, themeAccent1Pale: theme().accent1_pale, themeAccent1Light: theme().accent1_light, themeAccent1Main: theme().accent1_main, themeAccent1Dark: theme().accent1_dark, themeAccent2Pale: theme().accent2_pale, themeAccent2Light: theme().accent2_light, themeAccent2Main: theme().accent2_main, themeAccent2Dark: theme().accent2_dark, themeErrorPale: theme().error_pale, themeErrorLight: theme().error_light, themeErrorMain: theme().error_main, themeErrorDark: theme().error_dark, themeBackgroundLight: theme().background_light, themeBackgroundMain: theme().background_main, themeBackgroundDark: theme().background_dark, }, light: { primary: theme().primary_main, secondary: theme().secondary_main, error: theme().error_main, themePrimaryPale: theme().primary_pale, themePrimaryLight: theme().primary_light, themePrimaryMain: theme().primary_main, themePrimaryDark: theme().primary_dark, themeSecondaryPale: theme().secondary_pale, themeSecondaryLight: theme().secondary_light, themeSecondaryMain: theme().secondary_main, themeSecondaryDark: theme().secondary_dark, themeBasePale: theme().base_pale, themeBaseLight: theme().base_light, themeBaseMain: theme().base_main, themeBaseDark: theme().base_dark, themeAccent1Pale: theme().accent1_pale, themeAccent1Light: theme().accent1_light, themeAccent1Main: theme().accent1_main, themeAccent1Dark: theme().accent1_dark, themeAccent2Pale: theme().accent2_pale, themeAccent2Light: theme().accent2_light, themeAccent2Main: theme().accent2_main, themeAccent2Dark: theme().accent2_dark, themeErrorPale: theme().error_pale, themeErrorLight: theme().error_light, themeErrorMain: theme().error_main, themeErrorDark: theme().error_dark, themeBackgroundLight: theme().background_light, themeBackgroundMain: theme().background_main, themeBackgroundDark: theme().background_dark, }, }, }, }
上記でvuetifyjsのテーマを設定して、以下のように指定します
<v-btn color="primary" @click="onSaveItem" > 保存 </v-btn>
これで画像のとおりにボタンのカラーが設定できました。
まとめ
配色ガイドラインを設けることで色の定義がブレないように修正しました。 これで、無駄なカラーコードが増えるのを防止できるかなと思います。