Getting started with K4Community Plus
      Back to home
      1. K4Connect Support Center
      2. K4Community Plus App
      3. Getting started with K4Community Plus

      Custom App Themes

      Theming Process

      The process for having a custom theme created for the K4Community app is as follows:

      1. The community team (typically marketing or communications) provides a light and dark color palette to K4. See details below what colors are required.
      2. Both light and dark compatible logos are also submitted. See specifications below.
      3. A test site will be provided by K4 for reviewing the colors submitted (usually within 48-72 hours).
      4. Once reviewed, adjustments can be submitted and the test site updated.
      5. The community staff approves the theme, and K4 reviews it for quality issues (no UI items being hidden, unreadable, etc).
      6. The theme is made available in the community’s app as either the default theme or a user selected theme.
      If you’re interested in customizing your app’s color theme, reach out to your Client Success Manager or call or email Support at (855) 876-9673 or support@k4connect.com

       K4Connect Default Color Theme

      For your reference, the K4Community app theme is made up of a palette of seven colors, with both light and dark variations.

      Name

      Role

      Default – Dark

      Default – Light

      Primary

      Clickable elements such as buttons that are the primary call to action on a page.

      #ffd54b

      #1976d2

      Secondary

      Muted font color used for side menus like filters on the events page. Not intended to be as noticeable as the main text.

      #ffffff

      #444444

      Accent

      Used for small informational features such as user avatars or bubbles with the number of messages waiting.

      #66b3ff

      #82b1ff

      Background

      Base background color of the app.

      #283e4d

      #eaf4fa

      Navigation

      Bars and side navigation items.

      #0b2130 

      #ffffff

      Banner

      Dividers between page sections.

      #216491

       

      #97c7e7  

      Panel

      Inner items on top of the background.

      #216491  

      #fefefe

       

      The base font is white or percentages of white for dark mode, and percentages of black for light mode. This is not currently adjustable. 

      Logos

      Logos should be about a 3×1 ratio. We support PNG (300px x 100px), but encourage you to use SVG if possible to avoid scaling issues on different size displays (phone, tablet). Logos should be provided on a transparent background.

       

      Sample Screens