Style Guide

Konnexu makes it easy to customize your community, so it matches your brand, style, or vision. In most cases, you do not need to be a CSS expert or learn Tailwind CSS just to change your site's colors.

Konnexu uses shared theme colors throughout the interface. You can set your main colors once for light mode and once for dark mode, and Konnexu will apply those colors anywhere the shared theme classes are used.

If you haven't already cloned the theme you want to customize, follow this guide before making your changes.

Before You Begin

Custom CSS can affect many areas of your community at once. We recommend:

1. Work with a cloned theme rather than changing your original theme.
2. Make a copy of your current custom CSS before making larger changes.
3. Change a few colors at a time and check the results in both light and dark mode.
4. Check important text and button colors for sufficient contrast and readability.

Theme Color Variables

Konnexu's theme classes are mapped to CSS custom properties (also called CSS variables) and used throughout the interface. This allows the same color settings to be reused consistently across Konnexu and its app extensions.

A CSS variable looks like this:

--bg-surface: #E8DCD0;

The part beginning with -- is the variable name. The value after it is the color.

For example, changing --bg-surface changes the shared surface color anywhere Konnexu uses that theme value.

Theme Color Reference

Variable Common Uses

--bg-surface Top navigation, forum headers, and other shared surface backgrounds

--surface-muted Muted surfaces, icons, and backgrounds such as unread notification areas

--text-default Default text such as selections in menus

--text-muted Smaller or less prominent text such as dates, descriptions, and timestamps

--text-subtle Forum header text, navigation text, language menus, and other subtle text

--text-primary Bold headings, block titles, side menus, and dropdown menu items

--text-secondary Content text, category menus, breadcrumbs, and other secondary text

--button-primary-bg Primary button background and hover styling

--button-primary-bg-opacity-10 Status buttons, View More, and other subtle button backgrounds

--button-primary-bg-opacity-20 Stronger subtle states such as close/search-reset hover backgrounds

--button-primary-bg-opacity-80 Active or emphasized button backgrounds

--button-primary-text Primary button text

Light Mode

Light-mode variables can be placed inside :root.

Here is a complete example using a warm neutral theme with deep red buttons:

/* Light mode defaults */
:root {
    --bg-surface: #E8DCD0 !important;
    --surface-muted: #F3ECE3 !important;

    --text-default: #1A1816 !important;
    --text-muted: #5B4A45 !important;
    --text-subtle: #6E5A53 !important;
    --text-primary: #1A1816 !important;
    --text-secondary: #4A3E3A !important;

    --button-primary-bg: #660000 !important;
    --button-primary-bg-opacity-10: #E8DCD0 !important;
    --button-primary-bg-opacity-20: #660000 !important;
    --button-primary-bg-opacity-80: #8B0000 !important;
    --button-primary-text: #FFFFFC !important;
}

These are example colors. Replace them with colors that work with your own branding and maintain good contrast.

Dark Mode

Dark mode uses the same variables. You only need to give those variables appropriate dark-mode values under .dark.

/* Dark mode defaults */
.dark {
    --bg-surface: #2F2424 !important;
    --surface-muted: #3A2E2E !important;

    --text-default: #FFF9F5 !important;
    --text-muted: #D7C9C0 !important;
    --text-subtle: #D7C9C0 !important;
    --text-primary: #FFF9F5 !important;
    --text-secondary: #E7DCD4 !important;

    --button-primary-bg: #8B1A1A !important;
    --button-primary-bg-opacity-10: #3A2E2E !important;
    --button-primary-bg-opacity-20: #6F1616 !important;
    --button-primary-bg-opacity-80: #A52A2A !important;
    --button-primary-text: #FFFFFC !important;
}

Because CSS variables are inherited by child elements, you do not need to apply the variables to .dark * or use selectors such as body:is(.dark *).

As long as Konnexu applies the .dark class to the parent/root element, the shared theme classes automatically use your dark-mode values.

How Konnexu Uses These Colors

Behind the scenes, Konnexu maps the theme values to reusable classes. This replaces many older hardcoded or legacy styles and helps keep colors consistent across the main application and app extensions.

Current shared theme classes include:

bgSurface
surfaceMuted
textDefault
textMuted
textSubtle
textPrimary
textSecondary
buttonPrimaryBg
buttonPrimaryBgOpacity10
buttonPrimaryBgOpacity20
buttonPrimaryBgOpacity80
buttonPrimaryText

You may also see generated CSS classes such as:

.bg-bgSurface
.bg-surfaceMuted
.text-textDefault
.text-textMuted
.text-textSubtle
.text-textPrimary
.text-textSecondary
.bg-buttonPrimaryBg
.bg-buttonPrimaryBgOpacity10
.bg-buttonPrimaryBgOpacity20
.bg-buttonPrimaryBgOpacity80
.text-buttonPrimaryText

For normal color customization, you generally do not need to change these classes individually. Change the shared variables first.

Going Further with Custom CSS

If you want to change more than the shared theme colors, you can use custom CSS to target specific elements.

Konnexu uses Tailwind CSS as part of its interface, but you do not need to learn Tailwind simply to customize your theme colors.

If you want to make more advanced changes, the Tailwind CSS documentation can help you understand many of the utility classes you may see while inspecting Konnexu.

Styling Shared Classes

You can target a shared class when you need styling beyond its color variable.

For example:

/* Shared surface styling */
html body .bg-bgSurface {
    background-color: #30a473;
    border-radius: 12px;
    border: 1px solid rgba(6, 29, 53, 0.08);
}

Typography can also be adjusted:

html body .text-textPrimary {
    color: #061D35;
    font-weight: 500;
}

html body .text-textSecondary {
    color: #061D35;
    opacity: 0.85;
}

html body .text-textSubtle {
    color: #061D35;
    opacity: 0.65;
    font-size: 0.875rem;
}

And shared button classes can be customized:

html body .bg-buttonPrimaryBg {
    background-color: #30a473;
    border-radius: 8px;
    transition: filter 0.15s ease, opacity 0.15s ease;
}

html body .text-buttonPrimaryText {
    color: #061D35;
    font-weight: 600;
    letter-spacing: 0.01em;
}

html body .bg-buttonPrimaryBg:hover,
html body .bg-buttonPrimaryBgOpacity80:hover {
    filter: brightness(0.95);
}

html body .bg-buttonPrimaryBg:active,
html body .bg-buttonPrimaryBgOpacity80:active {
    filter: brightness(0.9);
}

Styling a Specific Element

Sometimes you may want to change only one type of element rather than every element that uses a shared theme color.

For example:

/* Main menu text color */
.navigation_item_text {
    color: #1A092F !important;
}

.dark .navigation_item_text {
    color: #F4EBF7 !important;
}

Notice that dark-mode-specific styling can simply begin with .dark.

When to Use !important

You will see !important in many of our examples:

--bg-surface: #E8DCD0 !important;

Konnexu's existing styles may sometimes have higher priority than your custom CSS. !important tells the browser that your custom value should take priority.

You don't need to add it automatically to every CSS rule. If a custom style doesn't take effect after you save your changes and clear the appropriate cache, !important may be necessary.

Finding What to Customize

If a theme variable doesn't control the element you want to change, your browser's developer tools can help identify the class being used.

In most desktop browsers, you can right-click the element and choose Inspect. Look at the classes and CSS rules applied to that element.

When possible, look for Konnexu's shared theme classes first rather than targeting long or highly specific combinations of utility classes.

Accessibility & Color Contrast

Your community should remain easy to read in both light and dark mode.

When choosing colors:

• Make sure text is easy to distinguish from its background.
• Check buttons in their normal, hover, and active states.
• Don't rely on color alone to communicate important information.
• Check both light and dark mode after making theme changes.
• Pay special attention to small or muted text, which can become difficult to read when its color is too close to the background.

A color combination that looks attractive may still be difficult for some visitors to read, so contrast should be considered part of your theme design.

Troubleshooting Custom CSS

If your CSS change doesn't appear:

1. Confirm that your CSS was saved.
2. Check that the variable or selector name is spelled correctly.
3. Clear the Konnexu site cache when appropriate.
4. Refresh your browser and clear its cache if necessary.
5. Check both light and dark mode to make sure another theme value isn't overriding your change.
6. If a normal CSS rule still isn't taking effect, try adding !important.
7. Use your browser's Inspect tool to see which rule is currently controlling the element.

If you're making a larger customization, change one section at a time. This makes it much easier to identify which CSS rule caused an unexpected result.