HELLOPANDA MANUAL
Changing Base Colors
This manual will no longer be in use starting from July 1, 2024.
Please note that after the addition of the custom management feature, resizing the website will now be replaced by the manual below.
THEME COLOR
PRECAUTIONS
WHEN MODIFYING
BLOCK THEME COLOR
Block themes contain all color properties in one JSON file. Therefore, the method of editing itself is not difficult. However, if you have a clear understanding of the basic properties of color, such as Primary and Secondary, it will be easy to find exactly what part needs to be modified and how.
base (background color)
contrast (font color)
primary (emphasis color)
secondary (highlight contrast color)
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
base color
Base code refers to the background color of the entire website. The Hellopanda theme uses light gray rather than white, and uses a post-emphasis color.
contrast color
Contrast code refers to the text color throughout your website. You can understand it as code that is completely opposite to the base code. Since there is a relationship between the background and letters, you should choose a color that provides great contrast.
primary color
Primary color is the main color used on a website. Many themes usually use multiple main colors, but the Hellopanda theme uses only one main color. This is a huge advantage in responsive code.
secondary color
Secondary color refers to the second color in a general theme, but in the Hellopanda theme, it is used as a contrasting color to the primary color. This color relationship is very important, so be sure to keep it in mind.
01
Modify the default JSON file
hellopanda WP manual
/wp-content/themes/hellopanda-theme/
theme.json
"palette": [
{ "color": "#fffffd", "name": "흰색", "slug": "white" },
{ "color": "#000000", "name": "검정색", "slug": "black" },
{ "color": "#f0f0f0", "name": "배경색 (반응형) (background)", "slug": "base" },
{ "color": "#37474F", "name": "전경색 (반응형) (text)", "slug": "contrast" },
{ "color": "#c34468", "name": "강조색 (반응형)", "slug": "primary" },
{ "color": "#fffffe", "name": "보조색 (반응형) (강조색 위 글자색)", "slug": "secondary" },
{ "color": "#ffffff", "name": "스탭 - 1 (반응형)", "slug": "step-1" },
{ "color": "#f4f5f5", "name": "스탭 - 2 (반응형)", "slug": "step-2" },
{ "color": "#eaebec", "name": "스탭 - 3 (반응형)", "slug": "step-3" },
{ "color": "#dfe1e2", "name": "스탭 - 4 (반응형)", "slug": "step-4" },
{ "color": "#d4d7d9", "name": "스탭 - 5 (반응형)", "slug": "step-5" },
{ "color": "#c9cdcf", "name": "스탭 - 6 (반응형)", "slug": "step-6" },
{ "color": "#bfc3c6", "name": "스탭 - 7 (반응형)", "slug": "step-7" },
{ "color": "#b4b9bc", "name": "스탭 - 8 (반응형)", "slug": "step-8" },
{ "color": "#a9afb3", "name": "스탭 - 9 (반응형)", "slug": "step-9" },
{ "color": "#9ea5a9", "name": "스탭 - 10 (반응형)", "slug": "step-10" },
{ "color": "#949ca0", "name": "스탭 - 11 (반응형)", "slug": "step-11" },
{ "color": "#899296", "name": "스탭 - 12 (반응형)", "slug": "step-12" },
{ "color": "#7e888c", "name": "스탭 - 13 (반응형)", "slug": "step-13" },
{ "color": "#737e83", "name": "스탭 - 14 (반응형)", "slug": "step-14" },
{ "color": "#697479", "name": "스탭 - 15 (반응형)", "slug": "step-15" },
{ "color": "#5e6a70", "name": "스탭 - 16 (반응형)", "slug": "step-16" },
{ "color": "#536066", "name": "스탭 - 17 (반응형)", "slug": "step-17" },
{ "color": "#48565d", "name": "스탭 - 18 (반응형)", "slug": "step-18" },
{ "color": "#3e4c53", "name": "스탭 - 19 (반응형)", "slug": "step-19" },
{ "color": "#33424a", "name": "스탭 - 20 (반응형)", "slug": "step-20" }
],- White and black are fixed colors that do not react.
- Base, contrast, primary, and secondary colors are responsive colors. In dark mode, the colors registered in dark mode json are displayed.
- All colors from step 1 to 20 are responsive colors. It is best to save the colors separately from base to contrast. (Of course, you can configure it freely.)
- Duotone and gradient colors can also be modified in this file. Of course, you only need to do this when necessary. (We made most of it.)
02
Edit dark mode JSON file
hellopanda WP manual
/wp-content/themes/hellopanda-theme/styles/
dark.json
"palette": [
{ "color": "#fffffd", "name": "흰색", "slug": "white" },
{ "color": "#000000", "name": "검정색", "slug": "black" },
{ "color": "#263238", "name": "배경색 (background)", "slug": "base" },
{ "color": "#B0BEC5", "name": "전경색 (text)", "slug": "contrast" },
{ "color": "#FDD835", "name": "강조색", "slug": "primary" },
{ "color": "#3a3007", "name": "보조색", "slug": "secondary" },
{ "color": "#172329", "name": "스탭 - 1 (반응형)", "slug": "step-1" },
{ "color": "#1f2c32", "name": "스탭 - 2 (반응형)", "slug": "step-2" },
{ "color": "#28343a", "name": "스탭 - 3 (반응형)", "slug": "step-3" },
{ "color": "#303d43", "name": "스탭 - 4 (반응형)", "slug": "step-4" },
{ "color": "#39454b", "name": "스탭 - 5 (반응형)", "slug": "step-5" },
{ "color": "#414e54", "name": "스탭 - 6 (반응형)", "slug": "step-6" },
{ "color": "#49565c", "name": "스탭 - 7 (반응형)", "slug": "step-7" },
{ "color": "#525f65", "name": "스탭 - 8 (반응형)", "slug": "step-8" },
{ "color": "#5a676d", "name": "스탭 - 9 (반응형)", "slug": "step-9" },
{ "color": "#637076", "name": "스탭 - 10 (반응형)", "slug": "step-10" },
{ "color": "#6b787f", "name": "스탭 - 11 (반응형)", "slug": "step-11" },
{ "color": "#738187", "name": "스탭 - 12 (반응형)", "slug": "step-12" },
{ "color": "#7c8990", "name": "스탭 - 13 (반응형)", "slug": "step-13" },
{ "color": "#849298", "name": "스탭 - 14 (반응형)", "slug": "step-14" },
{ "color": "#8d9aa1", "name": "스탭 - 15 (반응형)", "slug": "step-15" },
{ "color": "#95a3a9", "name": "스탭 - 16 (반응형)", "slug": "step-16" },
{ "color": "#9dabb2", "name": "스탭 - 17 (반응형)", "slug": "step-17" },
{ "color": "#a6b4ba", "name": "스탭 - 18 (반응형)", "slug": "step-18" },
{ "color": "#aebcc3", "name": "스탭 - 19 (반응형)", "slug": "step-19" },
{ "color": "#b7c5cb", "name": "스탭 - 20 (반응형)", "slug": "step-20" }
]- White and black are fixed colors that do not react.
- Base, contrast, primary, and secondary colors are responsive colors. In dark mode, the colors registered in dark mode json are displayed.
- All colors from step 1 to 20 are responsive colors. It is best to save the colors separately from base to contrast. (Of course, you can configure it freely.)
- /wp-content/themes/hellopanda-theme/styles/ The json rules registered in this path are folders used as “colors” in Block Theme.