Tokens & Theming for Mobile

companycam-mobile uses the JSON build of our design tokens and styled-components for theming.

Using Design Tokens on Mobile

Pssst. The instructions below are great and all, but you can also just copy and paste the code snippets you need directly from here.

Size Tokens

Size tokens aren't currently themed and can be imported directly from slab-tokens. Note that the JSON build returns numbers for most values, so you'll need to append the unit of measurement.

import { tokens } from "@companycam/slab-tokens";
 
const MyText = styled.Text`
  font-size: ${tokens.size_text_xl}px;
`;

Color Tokens in a styled-component

Use the getColor helper.

import { getColor } from "@companycam/slab-mobile";
 
const MyText = styled.Text`
  color: ${getColor("text.subtle")}px;
`;

Color Tokens in TSX/JSX

You will need useCCTheme.

import { useCCTheme } from "@companycam/slab-mobile";
 
const { getThemeColor } = useCCTheme();
return (
  <Icon
    name="star"
    color={
      active
        ? getThemeColor("button.background.primary")
        : getThemeColor("button.background.subtle")
    }
  />
);

Color Tokens in an older class component

You will need withCCTheme.

import { withCCTheme } from "@companycam/slab-mobile";
 
class SideBar extends React.Component {
  constructor(props) {
    super(props);
 
    const { currentThemeName } = props.CCTheme;
 
    this.state = {
      currentTheme: current
    }
  }
 
  ...
}
 
export default withCCTheme(SideBar);

Theming on Mobile

The CCThemeProvider component is a wrapper around ThemeProvider from styled-components. It's exported from slab-mobile and wraps our React Native app.

You can also use it locally — for example, to force part of the app to render in dark mode.

import { CCThemeProvider } from "@companycam/slab-mobile";
 
const darkTheme = CCThemes.find((t) => t.name === "dark_environment");
 
<CCThemeProvider theme={darkTheme}>
  // anything in here will render in dark mode
</CCThemeProvider>;

Why Don't We Have Global Dark Mode on the Mobile App?

You can see our progress toward mobile dark mode via app/components/core/Appearance/ApperanceManager.jsx:

const APPEARANCE_MANAGER_ACTIVE = true;
const TEST_THEME = DARK;