Instructions for Developers on Using Colors in Solo Theme

1. Regions Names, each region has an ID and a Class with the same name.

#page-wrapper {}
#primary-sidebar-menu {}
#fixed-search-block {}
#popup-login-block {}
#header {}
#primary-menu {}
#welcome-text {}

#top-container {}
#top-box-first {}
#top-box-second {}
#top-box-third {}

#system-messages {}
#breadcrumb {}
#page-title {}

#main-container {}
#sidebar-box-first {}
#sidebar-box-main {}
#sidebar-box-second {}

#bottom-container {}
#bottom-box-first {}
#bottom-box-second {}
#bottom-box-third {}
#bottom-box-fourth {}

#footer-container {}
#footer-box-first {}
#footer-box-second {}
#footer-box-third {}

#footer-menu {}
#copyright {}

2. Variable Definitions
Below are the predefined CSS variables with their intended use:

:root {
  --r-bg: #fefffc; /* Controls the background color. */
  --r-tx: #4c5866; /* Determines the color of the text. */
  --r-h1: #2a3439; /* Sets the color for h1, h2, and h3 headings. */
  --r-lk: #8a3324; /* Changes the link text color. */
  --r-lk-h: #79443b; /* Alters the hover color of link text. */
  --r-br: #f4f5f0; /* Specifies the border color. */
  --r-bg-fr: #f8f4ff; /* Defines the background color of input forms. */
  --r-tx-lk: #2c3e4c; /* Adjusts the menu link text color. */
  --r-tx-lk-h: #1520a6; /* Modifies the hover color of menu link text. */
  --r-bg-lk: #F2F7FD; /* Sets the menu link background color. */
  --r-bg-lk-h: #f8f8e8; /* Changes the hover background color of menu links. */
  --r-tx-bt: #354a21; /* Determines the button text color. */
  --r-tx-bt-h: #597d35; /* Alters the button text color on hover. */
  --r-bg-bt: #edf1fe; /* Specifies the button background color. */
  --r-bg-bt-h: #efece1; /* Sets the button background color on hover. */
}

3. Applying Colors in Different Regions
Below are complex examples demonstrating how to apply these variables in different regions of your HTML structure:

/* 
  The following CSS rules demonstrate how to use CSS variables for 
  maintaining a consistent color scheme throughout the site.

  The variables are defined to control various aspects of the site's 
  appearance such as background color, text color, link colors, 
  and button styles.
*/

#page-wrapper {
  background-color: var(--r-bg); /* Sets the background color. */
  color: var(--r-tx); /* Sets the text color. */
  border-color: var(--r-br); /* Sets the border color. */
}

h1, h2, h3 {
  color: var(--r-h1); /* Sets the color for h1, h2, and h3 headings. */
}

a:not(li.nav__menu-item a) {
  color: var(--r-lk); /* Sets the link text color. */
  color: var(--r-lk-h); /* Sets the hover color for link text. */
}

input:not(.button) {
  background-color: var(--r-bg-fr); /* Sets the background color for input forms. */
}

li.nav__menu-item a {
  color: var(--r-tx-lk); /* Sets the menu link text color. */
  background-color: var(--r-bg-lk); /* Sets the menu link background color. */
}

li.nav__menu-item a:hover {
  color: var(--r-tx-lk-h); /* Sets the hover color for menu link text. */
  background-color: var(--r-bg-lk-h); /* Sets the hover background color for menu links. */
}

button:not(li.nav__menu-item button) {
  color: var(--r-tx-bt); /* Sets the button text color. */
  background-color: var(--r-bg-bt); /* Sets the button background color. */
}

button:not(li.nav__menu-item button):hover {
  color: var(--r-tx-bt-h); /* Sets the hover color for button text. */
  background-color: var(--r-bg-bt-h); /* Sets the hover background color for buttons. */
}

<div class="blueprint page-wrapper" style="background-color: var(--r-bg); color: var(--r-tx);">
    <div class="highlighted" style="background-color: var(--r-bg-fr); color: var(--r-tx); border: 1px solid var(--r-br);">
        <h2 style="color: var(--r-h1);">Highlighted</h2>
        <p>Spotlight section for featured content or important announcements.</p>
        <a href="#" style="color: var(--r-lk);">Learn more</a>
    </div>
    <div class="primary-sidebar-menu" style="background-color: var(--r-bg-lk); color: var(--r-tx);">
        <h2 style="color: var(--r-h1);">Primary Sidebar Menu</h2>
        <p>Navigation menu with links to main sections of the site.</p>
        <a href="#" style="color: var(--r-tx-lk);">Home</a>
    </div>
    <div class="fixed-search-block" style="background-color: var(--r-bg-fr); color: var(--r-tx);">
        <h2 style="color: var(--r-h1);">Fixed Search Block</h2>
        <p>Search bar, always accessible for quick content searching.</p>
        <input type="text" placeholder="Search..." style="background-color: var(--r-bg-fr); border: 1px solid var(--r-br);">
    </div>
    <div class="popup-login-block" style="background-color: var(--r-bg-fr); color: var(--r-tx);">
        <h2 style="color: var(--r-h1);">Popup Login Block</h2>
        <p>User login area, appearing as a modal or popup element.</p>
        <button style="background-color: var(--r-bg-bt); color: var(--r-tx-bt);">Login</button>
    </div>
    <div class="primary-menu" style="background-color: var(--r-bg-lk); color: var(--r-tx);">
        <h2 style="color: var(--r-h1);">Primary Menu</h2>
        <p>Main navigation menu, typically at the top of the page.</p>
        <a href="#" style="color: var(--r-tx-lk);">Menu Item</a>
    </div>
    <div class="header" style="background-color: var(--r-bg); color: var(--r-tx); border-bottom: 1px solid var(--r-br);">
        <h2 style="color: var(--r-h1);">Header</h2>
        <p>Topmost section, often contains logo and primary navigation.</p>
    </div>
    <div class="welcome-text" style="background-color: var(--r-bg); color: var(--r-tx);">
        <h2 style="color: var(--r-h1);">Welcome Text</h2>
        <p>Introduction or welcome message for visitors to the site.</p>
    </div>
    <div class="top-regions">
        <div class="top-one" style="background-color: var(--r-bg-lk); color: var(--r-tx); border-top: 1px solid var(--r-br);">
            <h3 style="color: var(--r-h1);">Top One</h3>
            <p>First top region, possibly for news or updates.</p>
        </div>
        <div class="top-two" style="background-color: var(--r-bg-lk); color: var(--r-tx); border-top: 1px solid var(--r-br);">
            <h3 style="color: var(--r-h1);">Top Two</h3>
            <p>Second top region, suitable for highlights or features.</p>
        </div>
        <div class="top-three" style="background-color: var(--r-bg-lk); color: var(--r-tx); border-top: 1px solid var(--r-br);">
            <h3 style="color: var(--r-h1);">Top Three</h3>
            <p>Third top region, can be used for additional information.</p>
        </div>
    </div>
    <div class="system-messages" style="background-color: var(--r-bg); color: var(--r-tx); border: 1px solid var(--r-br);">
        <h2 style="color: var(--r-h1);">System Messages</h2>
        <p>Area for displaying system notifications or user feedback.</p>
    </div>
    <div class="page-title-solo" style="background-color: var(--r-bg); color: var(--r-tx); border-bottom: 1px solid var(--r-br);">
        <h2 style="color: var(--r-h1);">Page Title</h2>
        <p>Descriptive title of the current page or section.</p>
    </div>
    <div class="breadcrumb" style="background-color: var(--r-bg); color: var(--r-tx); border-bottom: 1px solid var(--r-br);">
        <h2 style="color: var(--r-h1);">Breadcrumb</h2>
        <p>Navigation aid showing the user's location in the site hierarchy.</p>
    </div>
    <div class="main-regions">
        <div class="sidebar-first" style="background-color: var(--r-bg-lk); color: var(--r-tx); border-right: 1px solid var(--r-br);">
            <h3 style="color: var(--r-h1);">Sidebar First</h3>
            <p>Left sidebar, good for secondary navigation or widgets.</p>
        </div>
        <div class="content" style="background-color: var(--r-bg); color: var(--r-tx);">
            <h3 style="color: var(--r-h1);">Content</h3>
            <p>Main content area, the primary focus of the page.</p>
            <a href="#" style="color: var(--r-lk);">Read more</a>
        </div>
        <div class="sidebar-second" style="background-color: var(--r-bg-lk); color: var(--r-tx); border-left: 1px solid var(--r-br);">
            <h3 style="color: var(--r-h1);">Sidebar Second</h3>
            <p>Right sidebar, ideal for advertisements or additional links.</p>
        </div>
    </div>
    <div class="bottom-regions">
        <div class="bottom-one" style="background-color: var(--r-bg-lk); color: var(--r-tx); border-top: 1px solid var(--r-br);">
            <h3 style="color: var(--r-h1);">Bottom One</h3>
            <p>Lower section, possibly for less prominent links or info.</p>
        </div>
        <div class="bottom-two" style="background-color: var(--r-bg-lk); color: var(--r-tx); border-top: 1px solid var(--r-br);">
            <h3 style="color: var(--r-h1);">Bottom Two</h3>
            <p>Another lower section, for diverse auxiliary content.</p>
        </div>
        <div class="bottom-three" style="background-color: var(--r-bg-lk); color: var(--r-tx); border-top: 1px solid var(--r-br);">
            <h3 style="color: var(--r-h1);">Bottom Three</h3>
            <p>Additional bottom section for various uses.</p>
        </div>
        <div class="bottom-four" style="background-color: var(--r-bg-lk); color: var(--r-tx); border-top: 1px solid var(--r-br);">
            <h3 style="color: var(--r-h1);">Bottom Four</h3>
            <p>Final bottom section, can be used for extra details.</p>
        </div>
    </div>
    <div class="footer-regions">
        <div class="footer-one" style="background-color: var(--r-bg); color: var(--r-tx); border-top: 1px solid var(--r-br);">
            <h3 style="color: var(--r-h1);">Footer One</h3>
            <p>First part of the footer, often for essential links.</p>
        </div>
        <div class="footer-two" style="background-color: var(--r-bg); color: var(--r-tx); border-top: 1px solid var(--r-br);">
            <h3 style="color: var(--r-h1);">Footer Two</h3>
            <p>Second part of the footer, for additional resources.</p>
        </div>
        <div class="footer-three" style="background-color: var(--r-bg); color: var(--r-tx); border-top: 1px solid var(--r-br);">
            <h3 style="color: var(--r-h1);">Footer Three</h3>
            <p>Third part of the footer, typically for contact info.</p>
        </div>
    </div>
    <div class="footer-menu" style="background-color: var(--r-bg); color: var(--r-tx); border-top: 1px solid var(--r-br);">
        <h2 style="color: var(--r-h1);">Footer Menu</h2>
        <p>A menu in the footer for secondary navigation purposes.</p>
        <a href="#" style="color: var(--r-tx-lk);">Footer Link</a>
    </div>
    <div class="copyright" style="background-color: var(--r-bg); color: var(--r-tx); border-top: 1px solid var(--r-br);">
        <h2 style="color: var(--r-h1);">Copyright</h2>
        <p>Copyright and legal information, typically found at the very bottom.</p>
    </div>
</div>

Explanation

1. Page Wrapper

   • background-color: var(--r-bg)
   • color: var(--r-tx)

2. Highlighted Section

   • background-color: var(--r-bg-fr)
   • color: var(--r-tx)
   • border: 1px solid var(--r-br)

3. Primary Sidebar Menu

   • background-color: var(--r-bg-lk)
   • color: var(--r-tx)

4. Fixed Search Block

   • background-color: var(--r-bg-fr)
   • color: var(--r-tx)

5. Popup Login Block

   • background-color: var(--r-bg-fr)
   • color: var(--r-tx)

6. Primary Menu

   • background-color: var(--r-bg-lk)
   • color: var(--r-tx)

7. Header

   • background-color: var(--r-bg)
   • color: var(--r-tx)
   • border-bottom: 1px solid var(--r-br)

8. Welcome Text

   • background-color: var(--r-bg)
   • color: var(--r-tx)

9. Top Regions

   • background-color: var(--r-bg-lk)
   • color: var(--r-tx)
   • border-top: 1px solid var(--r-br)

10. System Messages

    • background-color: var(--r-bg)
    • color: var(--r-tx)
    • border: 1px solid var(--r-br)

11. Page Title

    • background-color: var(--r-bg)
    • color: var(--r-tx)
    • border-bottom: 1px solid var(--r-br)

12. Breadcrumb

    • background-color: var(--r-bg)
    • color: var(--r-tx)
    • border-bottom: 1px solid var(--r-br)

13. Main Regions

    • Sidebar First: background-color: var(--r-bg-lk); color: var(--r-tx); border-right: 1px solid var(--r-br);
    • Content: background-color: var(--r-bg); color: var(--r-tx);
    • Sidebar Second: background-color: var(--r-bg-lk); color: var(--r-tx); border-left: 1px solid var(--r-br);

14. Bottom Regions

    • background-color: var(--r-bg-lk)
    • color: var(--r-tx)
    • border-top: 1px solid var(--r-br)

15. Footer Regions

    • background-color: var(--r-bg)
    • color: var(--r-tx)
    • border-top: 1px solid var(--r-br)

16. Footer Menu

    • background-color: var(--r-bg)
    • color: var(--r-tx)
    • border-top: 1px solid var(--r-br)

17. Copyright

    • background-color: var(--r-bg)
    • color: var(--r-tx)
    • border-top: 1px solid var(--r-br)