.. _css_themes: Customizing CSS Themes ====================== .. contents:: On this page :local: :depth: 2 A **CSS theme** is the foundation of your visual identity in Branding by Aulasneo. It defines the colors, typography, spacing, and any global CSS overrides that will be applied across your Open edX site. Themes are compiled into CSS files and served to the Open edX Micro-Frontend (MFE) layer at runtime. Creating a Theme ----------------- #. Navigate to **Themes** in the main navigation. #. Click **New Theme**. #. Enter a unique, descriptive name. The name is used internally and does not appear to end users. #. Configure the sections described below. #. Click **Save Core Theme** when finished. Color Palette -------------- The color palette section defines the raw color values for your theme. These are the foundational colors from which semantic colors and component colors are derived. .. figure:: screenshots/setting_theme_palette.jpg :alt: Theme color palette configuration :width: 100% The palette section lets you define the base colors using color pickers or hex values. The following palette colors are available: .. list-table:: Color Palette Fields :header-rows: 1 :widths: 25 75 * - Field - Description * - ``white`` - The lightest color in your palette. Used as the default background and for high-contrast text on dark surfaces. * - ``black`` - The darkest color. Used for text and high-contrast surfaces. * - ``red`` - Base red used for danger and error states. * - ``green`` - Base green used for success states. * - ``blue`` - Base blue for informational elements. * - ``yellow`` - Base yellow for warning states. * - ``primary`` - The primary brand color. Used for the most important interactive elements such as primary buttons and links. * - ``secondary`` - A secondary accent color complementing the primary. * - ``brand`` - The main brand identity color, typically matching your organization's primary brand color. Used in headers, navigation, and branded components. * - ``info`` - Color for informational messages and callouts. * - ``accent_a`` - A first accent color for use in custom or extended components. * - ``accent_b`` - A second accent color for additional visual variety. You can enter colors as six-digit hex values (e.g., ``#3a7bd5``) or use the built-in color picker. Leaving a field empty will cause the theme to inherit the Paragon default for that variable. Semantic Colors and Core Metrics ---------------------------------- .. figure:: screenshots/setting_theme_semantic_colors_and_metrics.jpg :alt: Semantic colors and core metrics :width: 100% Semantic colors and geometry metrics allow fine-grained control over layout and component appearance. **Core Metrics** are non-color style properties that affect layout and geometry: .. list-table:: Core Metric Fields :header-rows: 1 :widths: 30 70 * - Field - Description * - ``spacer_base`` - The base spacing unit (in pixels) used throughout the grid and components. * - ``grid_gutter_width`` - The horizontal spacing between grid columns. * - ``border_width`` - The default width of borders on components such as cards and inputs. * - ``border_radius_sm`` - Border radius for small elements (e.g., badges, small buttons). * - ``border_radius_base`` - Default border radius for most components. * - ``border_radius_lg`` - Border radius for large elements such as modals. * - ``font_weight_normal`` - The default font weight for body text (typically 400). * - ``input_focus_width`` - The width of the focus ring drawn around focused input fields. Typography ----------- .. figure:: screenshots/setting_typography.jpg :alt: Typography configuration :width: 100% The Typography section allows you to specify font families for body text, headings, and monospace contexts. The following font family fields are available: .. list-table:: Typography Fields :header-rows: 1 :widths: 30 70 * - Field - Description * - ``body_font_family`` - The font stack for body text throughout the platform. * - ``heading_font_family`` - The font stack used for heading elements (H1–H6). * - ``monospace_font_family`` - The font stack for code, keyboard, and pre-formatted text. Font families are specified as CSS font stacks — a comma-separated list of font names with fallbacks. For example:: "Open Sans", Arial, sans-serif If you are using a custom font, add the font files to a font set first (see :ref:`font_sets`), then assign it here using the drop-down list. System fallbacks such as ``Arial``, ``Helvetica``, or ``sans-serif`` should always be included at the end of the stack to ensure legible rendering when the custom font cannot be loaded. .. note:: If you plan to use a custom font as the monospace font, verify that the font includes a monospace variant. Using a proportional font in monospace contexts may produce misaligned code or terminal displays. Custom CSS Overrides --------------------- The **Custom CSS** field accepts raw CSS that is injected into the theme at the global level, after all Paragon variables are applied. This is useful for overriding styles that are not controlled by Paragon variables. Example — removing the animated welcome banner on the home page: .. code-block:: css .home-banner .animation-wrapper { animation: none !important; } .. warning:: Custom CSS is not validated before injection. Incorrect CSS can break the appearance of your site. Always test changes in a staging environment or use your browser's developer tools before saving. For more information on using custom CSS effectively, see :ref:`advanced_css`. Copying a Theme ---------------- If you want to create a new theme that is similar to an existing one, use the **Copy** action in the theme list. Copying a theme duplicates: * All palette and metric values. * All typography settings. * All theme variants and their overrides. * All custom Paragon properties attached to the theme and its variants. * All custom CSS from the theme and variants. The copy is created as an independent theme with no link to the original. Changes to one do not affect the other. .. note:: Copying a theme is subject to your plan's theme count limit. If you are at the maximum number of themes allowed by your subscription, the copy action will be blocked until you delete an existing theme or upgrade your plan. Deleting a Theme ----------------- To delete a theme, click the **Delete** button in the theme list or theme editor. Note that a theme **cannot be deleted** if it is currently referenced by an active build. Remove or update the relevant build before deleting the theme. `Back to Home `_