Scoped containers using css custom properties and color pairs

A system comprising:

• one or more processors;
• and
• memory storing instructions that, when executed, cause the one or more processors to:
• provide access to a first color scheme and a second color scheme through a user interface of a software application, wherein the first color scheme and the second color scheme each include a foreground color paired with a background color that contrasts the foreground color, and wherein at least one of the foreground color of the first color scheme or the background color of the first color scheme differs from that of the second color scheme;
• assign the first color scheme to a first section of a webpage based on input at the user interface;
• assign the second color scheme to a second section of the webpage based on further input at the user interface, wherein the second section is to be displayed as a subsection of the first section;
• and
• generate, after assigning the first color scheme and the second color scheme, source code representing the webpage, wherein due to the second section being a subsection of the first section, the source code includes a first container corresponding to the first section and a second container nested within the first container, the first container comprising properties corresponding to the first color scheme, and the second container comprising properties corresponding to the second color scheme.

A non-transitory computer-readable medium storing program code, the program code including instructions that are executable by one or more processors of a computer system to:

• provide access to a first color scheme and a second color scheme through a user interface of a software application, wherein the first color scheme and the second color scheme each include a foreground color paired with a background color that contrasts the foreground color, and wherein at least one of the foreground color of the first color scheme or the background color of the first color scheme differs from that of the second color scheme;
• assign the first color scheme to a first section of a webpage based on input at the user interface;
• assign the second color scheme to a second section of the webpage based on further input at the user interface, wherein the second section is to be displayed as a subsection of the first section;
• and
• generate, after assigning the first color scheme and the second color scheme, source code representing the webpage, wherein due to the second section being a subsection of the first section, the source code includes a first container corresponding to the first section and a second container nested within the first container, the first container comprising properties corresponding to the first color scheme, and the second container comprising properties corresponding to the second color scheme.