Color settings

The color system of Tokyo is centralized and available through the theme settings panel. The idea behind this system is to provide a flexible color scheme generator while trying to keep the number of options to a minimum. The colors are divided in 6 main groups:

Primary colors

Primary text: Mostly used for textual elements like paragraph text.

Secondary text: Mostly used for headings and other important elements like product prices.

Borders and lines: Pretty much self-explanatory. Any lines (like form inputs) will inherit their border color from this setting.

Background 1: The main background color used throughout the store.

Background 2: The secondary background color is mostly used as a way to visually prioritize a section.

Accent 1

Text on Accent 1: The foreground color for any sections assigned with the “Accent 1” color scheme.

Accent 1: The background color for this color scheme. It is, for example, the default background color scheme of the Newsletter section.

Accent 2

Text on Accent 2: The foreground color for any sections assigned with the “Accent 2” color scheme.

Accent 2: The background color for this color scheme.

Accent 3

Text on Accent 3 The foreground color for any sections assigned with the “Accent 3” color scheme.

Accent 3: The background color for this color scheme. This scheme is available as an auxiliary tool for any sections that need a completely different color scheme. For example a Black Friday / Cyber Monday offer, a weekly offer etc.

Buttons

Buttons in Tokyo have their own distinct color settings, “Primary Buttons” and “Secondary Buttons“. The majority of the buttons in the theme are “Primary”, meaning the will inherit the background and text colors of the “Primary Buttons” setting. Similarly for the Secondary buttons such as the “Add to cart” button in the product page, and other buttons that need visual separation when they are near to other primary buttons.

Stock labels

In stock / Limited stock / Out of stock / Coming soon label: The text color for each of the product availability status on product cards and the main product template.

Color schemes

The above base color values are grouped into Color schemes that are available for use throughout various sections and areas within sections.

The five available color schemes are:

• Accent 1
• Accent 2
• Accent 3
• Background 1 (the default in the vast majority of sections)
• Background 2

The main idea behind all color schemes is that the background color of each scheme defines it. For example, any section that the Accent 1 color scheme is applied on will have the Accent 1 color as its background color and Text on Accent 1 color as the text (and border) color.

The slight difference between the “Accent” and the “Background” color schemes is that for the Background 1 and Background 2 color schemes, the background colors are always going to be the Background 1 color and Background 2 color respectively, while they share text and border color with the Primary text color and Borders and lines color settings.

Applying color schemes on sections

All of Tokyo’s sections come with their respective “Color scheme” setting. Let’s see some examples of how you can select different color schemes for different sections to create interesting combinations and areas that stand out in your shop.

Once you have the theme installed, one of the first things you’ll notice is that the shop’s global header area contains by default (among others), the Announcement bar section. You can also add the Top bar, and Features sections separately. Along with the Announcement bar and the other header sections, the Header section specifically comes with additionally three more areas that can have their color scheme edited (Header, Sub-menus, and Mobile navigation).

Notice how, by default, every area has a default color scheme (“Background 1” for all) already applied, whereas the Announcement bar has the “Accent 3” color scheme applied, establishing a visual separation with the rest of the shop.

With this in mind, you could adjust the color scheme of all areas to create interesting combinations in your header. Perhaps you would like a more prominent approach for the Announcement bar by selecting the “Accent 2” color scheme, separating it further from the main header section and drawing more attention to it.

Another example is the shop’s global footer section which comes with other different sections on its own (e.g. Newsletter, Features, and Footer). The “Footer” section is colored by default with the “Accent 3″ color scheme and the “Newsletter” section has the “Accent 1” color scheme (establishing visual separation between the two sections).

You can, of course, adjust the color scheme of any of these sections to create other combinations that are more fit to your own personal or business style.

Similarly you could adjust the color scheme of each individual section of your store to create interesting combinations on your homepage or any page that you add them to.

Please note: If for any reason the above is not flexible enough for your shop, feel free to contact us. We’ll be more than happy to set up your colors and color schemes according to where and how you need them.