Sarim-insight _ Blog collor

 បាន។ ខាងក្រោមនេះជារាយការណ៍ លេខកូដពណ៌ដើម → ពណ៌ថ្មី ដើម្បីឲ្យអ្នកអាច Search ក្នុង theme ហើយប្ដូរបានត្រង់ៗ។ ខ្ញុំយកពី code ដែលអ្នក upload មក និង block dark-mode override ក្នុង theme របស់អ្នក។

1. Main background

ស្វែងរក code ដើម

#2b2b2b

ប្ដូរទៅ

#1F2225

កន្លែងដែលជាញឹកញាប់ឃើញ:

--body-bg-color:#2b2b2b;

ប្ដូរជា:

--body-bg-color:#1F2225;

2. Body background / outer darkest background

ស្វែងរក code ដើម

#0b0f19

ប្ដូរទៅ

#1F2225

កន្លែងជាញឹកញាប់ឃើញ:

--body-bg:#0b0f19 none;
--outer-bg:#0b0f19;
--header-bg:#0b0f19;
--footer-bg:#0b0f19;

អ្នកអាចប្ដូរតាម layer ដូចនេះ:

  • --body-bg#1F2225

  • --outer-bg#1F2225

  • --header-bg#2A2F34

  • --footer-bg#2A2F34


3. Widget / post card / sidebar box

ស្វែងរក code ដើម

#202020

ប្ដូរទៅ

#2C3136

កន្លែងជាញឹកញាប់ឃើញ:

--widget-bg:#202020;
--post-card-bg:#202020;
--footerbar-bg:#202020;
--cookie-bg:#202020;

ប្ដូរជា:

--widget-bg:#2C3136;
--post-card-bg:#262A2E;   /* post */
--footerbar-bg:#2C3136;
--cookie-bg:#2C3136;

4. Post content background

ស្វែងរក code ដើម

#262A2E

នេះជាពណ៌ថ្មីដែលល្អសម្រាប់ post area រួចហើយ។
បើមិនទាន់មាននៅកន្លែងខ្លះ អ្នកអាចដាក់ជា target ថ្មីសម្រាប់ post/content:

#262A2E

5. Header / top nav

ស្វែងរក code ដើម

#202020

#0b0f19

ប្ដូរទៅ

#2A2F34

កន្លែងជាញឹកញាប់ឃើញ:

--header-bg:#202020;

--header-bg:#0b0f19;

ប្ដូរជា:

--header-bg:#2A2F34;

6. Submenu / mega menu

ស្វែងរក code ដើម

#252525

#101522

ប្ដូរទៅ

#2C3136

កន្លែងជាញឹកញាប់ឃើញ:

--submenu-bg:#252525;
--megamenu-bg:#252525;

--submenu-bg:#101522;

ប្ដូរជា:

--submenu-bg:#2C3136;
--megamenu-bg:#2C3136;

7. Mobile menu

ស្វែងរក code ដើម

#1b1b1b

ប្ដូរទៅ

#2C3136

កន្លែងជាញឹកញាប់ឃើញ:

--mobilemenu-bg:#1b1b1b;

ប្ដូរជា:

--mobilemenu-bg:#2C3136;

8. Main text color

ស្វែងរក code ដើម

#b4b6ba

#e5e7eb

ប្ដូរទៅ

#E6E6E6

កន្លែងជាញឹកញាប់ឃើញ:

--text-color:#b4b6ba;
--post-text-color:b4b6ba;

ប្ដូរជា:

--text-color:#E6E6E6;
--post-text-color:#E6E6E6;

ចំណាំ: ក្នុង file មានមួយកន្លែង --post-text-color:b4b6ba; ខ្វះ # ផងដែរ។ នេះគួរជួសជុល។


9. Meta / secondary text

ស្វែងរក code ដើម

#aaaaaa

#9aa0a6

ប្ដូរទៅ

#A8B0B8

កន្លែងជាញឹកញាប់ឃើញ:

--meta-color:#aaaaaa;

--meta-color:#9aa0a6;

ប្ដូរជា:

--meta-color:#A8B0B8;

10. Title color in dark mode

ស្វែងរក code ដើម

#f6f7f8

#e5e7eb

ប្ដូរទៅ

#E6E6E6

កន្លែងជាញឹកញាប់ឃើញ:

--title-color:#f6f7f8;
--post-title-color:#f6f7f8;

ប្ដូរជា:

--title-color:#E6E6E6;
--post-title-color:#E6E6E6;

11. Border / divider

ស្វែងរក code ដើម

rgba(155,155,155,0.03)

rgba(255,255,255,.08)

ប្ដូរទៅ

rgba(255,255,255,.14)

និង divider:

rgba(255,255,255,.08)

កន្លែងជាញឹកញាប់ឃើញ:

--border-color:rgba(155,155,155,0.03);

ប្ដូរជា:

--border-color:rgba(255,255,255,.14);

12. Green accent

ស្វែងរក code ដើម

#009900

#53ae00

ប្ដូរទៅ

#63a625

កន្លែងជាញឹកញាប់ឃើញ:

--main-color:$(main.color);
<Variable name="main.color" ... value="#53ae00"/>

អ្នកអាចរក #009900, #53ae00 ហើយប្ដូរទៅ #63a625 ឲ្យស្មើ brand ទាំង theme។


13. Button green

ស្វែងរក code ដើម

#83b357

នេះមើលទៅអ្នកកំពុងប្រើរួចសម្រាប់ button:

--button-bg:#83b357;

បើចង់ឲ្យស្មើ brand ជាងមុន អាចប្ដូរទៅ:

#63a625

ឬទុក #83b357 សម្រាប់ soft button ក៏បាន។


14. Search button green

ក្នុង file មាន:

#1B5E20
#388E3C

វាជា search button custom style។ បើអ្នកចង់ឲ្យស្មើ tone ថ្មី:

  • normal: #18361C

  • hover: #63a625


Search list សម្រាប់អ្នក copy ទៅរកក្នុង theme

ស្វែងរកពណ៌ទាំងនេះមុន:

#2b2b2b
#0b0f19
#202020
#252525
#1b1b1b
#101522
#b4b6ba
#e5e7eb
#f6f7f8
#aaaaaa
#9aa0a6
#009900
#53ae00
#83b357
rgba(155,155,155,0.03)
rgba(255,255,255,.08)

ប្ដូរទៅគោលដៅថ្មីនេះ:

#1F2225   /* main background */
#262A2E   /* post/content */
#2C3136   /* widget/sidebar/menu */
#2A2F34   /* header/top nav */
#E6E6E6   /* main text */
#A8B0B8   /* secondary text */
#63a625   /* brand green */
rgba(255,255,255,.14) /* border */
rgba(255,255,255,.08) /* divider */

នេះគឺជា mapping សង្ខេប:

ដើមថ្មី
#2b2b2b#1F2225
#0b0f19#1F2225
#202020#2C3136
#252525#2C3136
#1b1b1b#2C3136
#101522#2C3136
#b4b6ba#E6E6E6
#e5e7eb#E6E6E6
#f6f7f8#E6E6E6
#aaaaaa#A8B0B8
#9aa0a6#A8B0B8
#009900#63a625
#53ae00#63a625

បើអ្នកចង់ ខ្ញុំអាចរៀបឲ្យអ្នកជា “Search this → Replace with this” one-shot checklist សម្រាប់ paste ទៅធ្វើការក្នុង Blogger theme editor បានភ្លាមៗ។

Previous Post Next Post
📑
100%
A+
A−