{"id":21935,"date":"2024-06-20T08:54:50","date_gmt":"2024-06-19T23:54:50","guid":{"rendered":"http:\/\/localhost\/blog\/?page_id=21935"},"modified":"2024-09-24T11:35:22","modified_gmt":"2024-09-24T11:35:22","slug":"guide-en-color","status":"publish","type":"post","link":"https:\/\/wordpress.pandassi.com\/hellopanda\/guide-en-color\/","title":{"rendered":"Changing Base Colors"},"content":{"rendered":"\n
<\/span>\"\"
\n
\n

HELLOPANDA MANUAL<\/p>\n\n\n\n

Changing Base Colors<\/strong><\/p>\n\n\n\n

<\/rect><\/svg><\/div><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n
\n
\n
\n
\n
\n
\n
\n
<\/path><\/path><\/g><\/svg><\/div><\/div>\n<\/div>\n\n\n\n
\n

This manual will no longer be in use starting from July 1, 2024.<\/p>\n\n\n\n

<\/rect><\/svg><\/div><\/div>\n\n\n\n

Please note that after the addition of the custom management feature, resizing the website will now be replaced by the manual below.<\/p>\n\n\n\n

\n\n\n\n
\n
See the new manual<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
<\/path><\/path><\/g><\/svg><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
<\/path><\/path><\/svg><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\n
\n

THEME COLOR<\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

PRECAUTIONS
WHEN MODIFYING
BLOCK THEME COLOR<\/p>\n\n\n\n

<\/rect><\/svg><\/div><\/div>\n\n\n\n

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.<\/p>\n\n\n\n

\n
\n
\n

base <\/strong>(background color)<\/p>\n\n\n\n

\n

contrast <\/strong>(font color)<\/p>\n\n\n\n

\n

primary <\/strong>(emphasis color)<\/p>\n\n\n\n

\n

secondary <\/strong>(highlight contrast color)<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n

01<\/p>\n\n\n\n

02<\/p>\n\n\n\n

03<\/p>\n\n\n\n

04<\/p>\n\n\n\n

05<\/p>\n\n\n\n

06<\/p>\n\n\n\n

07<\/p>\n\n\n\n

08<\/p>\n\n\n\n

09<\/p>\n\n\n\n

10<\/p>\n<\/div>\n\n\n\n

\n

11<\/p>\n\n\n\n

12<\/p>\n\n\n\n

13<\/p>\n\n\n\n

14<\/p>\n\n\n\n

15<\/p>\n\n\n\n

16<\/p>\n\n\n\n

17<\/p>\n\n\n\n

18<\/p>\n\n\n\n

19<\/p>\n\n\n\n

20<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\nlanguage<\/span>\n\n\n\n
\n

base<\/strong> color<\/strong><\/p>\n\n\n\n

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.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\ntext_fields<\/span>\n\n\n\n
\n

contrast<\/strong> color<\/strong><\/p>\n\n\n\n

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.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\npicture_in_picture_center<\/span>\n\n\n\n
\n

primary color<\/strong><\/p>\n\n\n\n

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.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\nshadow<\/span>\n\n\n\n
\n

secondary color<\/strong><\/strong><\/p>\n\n\n\n

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.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
Shall we watch it in dark mode?<\/a><\/div>\n\n\n\n
Light mode again!<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\n
\n
\n
\n
\n

01<\/strong><\/p>\n<\/div>\n\n\n\n

\n
\n

Modify the default JSON file<\/p>\n\n\n\n

hellopanda WP manual<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n

\/wp-content\/themes\/hellopanda-theme\/<\/p>\n\n\n\n

theme.json<\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n

\"palette\": [\n    { \"color\": \"#fffffd\", \"name\": \"\ud770\uc0c9\", \"slug\": \"white\" },\n    { \"color\": \"#000000\", \"name\": \"\uac80\uc815\uc0c9\", \"slug\": \"black\" },\n    { \"color\": \"#f0f0f0\", \"name\": \"\ubc30\uacbd\uc0c9 (\ubc18\uc751\ud615) (background)\", \"slug\": \"base\" },\n    { \"color\": \"#37474F\", \"name\": \"\uc804\uacbd\uc0c9 (\ubc18\uc751\ud615) (text)\", \"slug\": \"contrast\" },\n    { \"color\": \"#c34468\", \"name\": \"\uac15\uc870\uc0c9 (\ubc18\uc751\ud615)\", \"slug\": \"primary\" },\n    { \"color\": \"#fffffe\", \"name\": \"\ubcf4\uc870\uc0c9 (\ubc18\uc751\ud615) (\uac15\uc870\uc0c9 \uc704 \uae00\uc790\uc0c9)\", \"slug\": \"secondary\" },\n    { \"color\": \"#ffffff\", \"name\": \"\uc2a4\ud0ed - 1 (\ubc18\uc751\ud615)\", \"slug\": \"step-1\" },\n    { \"color\": \"#f4f5f5\", \"name\": \"\uc2a4\ud0ed - 2 (\ubc18\uc751\ud615)\", \"slug\": \"step-2\" },\n    { \"color\": \"#eaebec\", \"name\": \"\uc2a4\ud0ed - 3 (\ubc18\uc751\ud615)\", \"slug\": \"step-3\" },\n    { \"color\": \"#dfe1e2\", \"name\": \"\uc2a4\ud0ed - 4 (\ubc18\uc751\ud615)\", \"slug\": \"step-4\" },\n    { \"color\": \"#d4d7d9\", \"name\": \"\uc2a4\ud0ed - 5 (\ubc18\uc751\ud615)\", \"slug\": \"step-5\" },\n    { \"color\": \"#c9cdcf\", \"name\": \"\uc2a4\ud0ed - 6 (\ubc18\uc751\ud615)\", \"slug\": \"step-6\" },\n    { \"color\": \"#bfc3c6\", \"name\": \"\uc2a4\ud0ed - 7 (\ubc18\uc751\ud615)\", \"slug\": \"step-7\" },\n    { \"color\": \"#b4b9bc\", \"name\": \"\uc2a4\ud0ed - 8 (\ubc18\uc751\ud615)\", \"slug\": \"step-8\" },\n    { \"color\": \"#a9afb3\", \"name\": \"\uc2a4\ud0ed - 9 (\ubc18\uc751\ud615)\", \"slug\": \"step-9\" },\n    { \"color\": \"#9ea5a9\", \"name\": \"\uc2a4\ud0ed - 10 (\ubc18\uc751\ud615)\", \"slug\": \"step-10\" },\n    { \"color\": \"#949ca0\", \"name\": \"\uc2a4\ud0ed - 11 (\ubc18\uc751\ud615)\", \"slug\": \"step-11\" },\n    { \"color\": \"#899296\", \"name\": \"\uc2a4\ud0ed - 12 (\ubc18\uc751\ud615)\", \"slug\": \"step-12\" },\n    { \"color\": \"#7e888c\", \"name\": \"\uc2a4\ud0ed - 13 (\ubc18\uc751\ud615)\", \"slug\": \"step-13\" },\n    { \"color\": \"#737e83\", \"name\": \"\uc2a4\ud0ed - 14 (\ubc18\uc751\ud615)\", \"slug\": \"step-14\" },\n    { \"color\": \"#697479\", \"name\": \"\uc2a4\ud0ed - 15 (\ubc18\uc751\ud615)\", \"slug\": \"step-15\" },\n    { \"color\": \"#5e6a70\", \"name\": \"\uc2a4\ud0ed - 16 (\ubc18\uc751\ud615)\", \"slug\": \"step-16\" },\n    { \"color\": \"#536066\", \"name\": \"\uc2a4\ud0ed - 17 (\ubc18\uc751\ud615)\", \"slug\": \"step-17\" },\n    { \"color\": \"#48565d\", \"name\": \"\uc2a4\ud0ed - 18 (\ubc18\uc751\ud615)\", \"slug\": \"step-18\" },\n    { \"color\": \"#3e4c53\", \"name\": \"\uc2a4\ud0ed - 19 (\ubc18\uc751\ud615)\", \"slug\": \"step-19\" },\n    { \"color\": \"#33424a\", \"name\": \"\uc2a4\ud0ed - 20 (\ubc18\uc751\ud615)\", \"slug\": \"step-20\" }\n  ],<\/code><\/pre>\n<\/div>\n\n\n\n