颜色属性

所有 Framework7-React 组件支持相同的一组颜色属性，允许设置单独元素的颜色和颜色主题：

属性	类型	默认	描述
color	字符串		单个元素的色。默认颜色之一。
colorTheme	字符串		将颜色主题应用于元素。它应该是某个父元素，因为这将对所有支持的子元素产生视觉效果，例如 view、page、navbar、toolbar、list 等。默认颜色之一。
textColor	字符串		设置元素的文本颜色。默认颜色之一。
bgColor	字符串		设置元素的背景颜色。默认颜色之一。
borderTheme	字符串		设置元素的边框颜色。默认颜色之一。
rippleColor	字符串		设置元素的涟漪波颜色。默认颜色之一。
dark	布尔值	false	在元素上启用暗布局主题。它应该是某个父元素，因为这将对所有支持的子元素产生视觉效果，例如 view、page、navbar、toolbar、list 等。

例如：

<!-- Button color -->
<Button color="red">Red Button</Button>

<!-- Link color -->
<Link color="green">Green Link</Link>

<!-- Page color theme -->
<Page colorTheme="orange">
  ...
</Page>

<!-- Panel with dark theme -->
<Panel dark>
  ...
</Panel>

color-themes.jsx

import React, { useState } from 'react';
import {
  Navbar,
  Page,
  BlockTitle,
  Button,
  Block,
  List,
  ListInput,
  Checkbox,
  Link,
  Toolbar,
  f7,
} from 'framework7-react';
import $ from 'dom7';

let globalTheme = 'light';
let globalThemeColor = $('html').css('--f7-color-primary').trim();

export default () => {
  const colors = Object.keys(f7.colors).filter(
    (c) => c !== 'primary' && c !== 'white' && c !== 'black',
  );

  const [theme, setTheme] = useState(globalTheme);
  const [themeColor, setThemeColor] = useState(globalThemeColor);

  const setScheme = (newTheme) => {
    f7.setDarkMode(newTheme === 'dark');
    globalTheme = newTheme;
    setTheme(newTheme);
  };

  const setColorTheme = (newColor) => {
    globalThemeColor = f7.colors[newColor];
    setThemeColor(globalThemeColor);
    f7.setColorTheme(globalThemeColor);
  };

  const setCustomColor = (newColor) => {
    globalThemeColor = newColor;
    setThemeColor(globalThemeColor);
    f7.setColorTheme(globalThemeColor);
  };

  return (
    <Page>
      <Navbar large title="Color Themes">
        <Link slot="right">Link</Link>
      </Navbar>
      <Toolbar tabbar icons bottom>
        <Link
          tabLink="#tab-1"
          tabLinkActive
          text="Tab 1"
          iconIos="f7:envelope_fill"
          iconMd="material:email"
        />
        <Link tabLink="#tab-2" text="Tab 2" iconIos="f7:calendar_fill" iconMd="material:today" />
        <Link
          tabLink="#tab-3"
          text="Tab 3"
          iconIos="f7:cloud_upload_fill"
          iconMd="material:file_upload"
        />
      </Toolbar>
      <BlockTitle medium>Layout Themes</BlockTitle>
      <Block strong>
        <p>Framework7 comes with 2 main layout themes: Light (default) and Dark:</p>
        <div className="grid grid-cols-2 grid-gap">
          <div
            width="50"
            className="bg-color-white demo-theme-picker"
            onClick={() => setScheme('light')}
          >
            {theme === 'light' && <Checkbox checked disabled />}
          </div>
          <div
            width="50"
            className="bg-color-black demo-theme-picker"
            onClick={() => setScheme('dark')}
          >
            {theme === 'dark' && <Checkbox checked disabled />}
          </div>
        </div>
      </Block>

      <BlockTitle medium>Default Color Themes</BlockTitle>
      <Block strong>
        <p>Framework7 comes with {colors.length} color themes set.</p>
        <div className="grid grid-cols-3 medium-grid-cols-2 large-grid-cols-5 grid-gap">
          {colors.map((color, index) => (
            <div key={index}>
              <Button
                fill
                round
                small
                className="demo-color-picker-button"
                color={color}
                onClick={() => setColorTheme(color)}
              >
                {color}
              </Button>
            </div>
          ))}
        </div>
      </Block>
      <BlockTitle medium>Custom Color Theme</BlockTitle>
      <List strongIos outlineIos>
        <ListInput
          type="colorpicker"
          label="HEX Color"
          placeholder="e.g. #ff0000"
          readonly
          value={{ hex: themeColor }}
          onColorPickerChange={(value) => setCustomColor(value.hex)}
          colorPickerParams={{
            targetEl: '#color-theme-picker-color',
          }}
        >
          <div
            slot="media"
            id="color-theme-picker-color"
            style={{
              width: '28px',
              height: '28px',
              borderRadius: '4px',
              background: 'var(--f7-theme-color)',
            }}
          ></div>
        </ListInput>
      </List>
    </Page>
  );
};

改进此文档