CMC's AI Toolkit Dashboard Help!

Daniel Fischer · 2025-04-14T21:13:54+00:00

There was an error rendering this rich post.

Scenario:
The dashboard includes a panel with dynamically generated campaign suggestions, which load inside a <div> with the class .ai-output. My team wants this panel to stand out with a futuristic glow, have responsive behavior across devices, and use a dark mode theme by default.

Question:
What CSS rules you would use to:

Style .ai-output with a glowing border effect and smooth fade-in animation.
Ensure the panel adjusts its layout for mobile screens (under 600px wide).
Apply a dark theme background and text color scheme to the panel.

Additionally, what CSS custom properties (--variables) might you use to make the AI Toolkit’s theme easily customizable across the site?

Find more posts tagged with

Accepted answers

All comments

CMC Community Manager

Great question @Daniel Fischer!

See my thoughts below:

1. Glowing border effect + fade-in animation

.ai-output {
  border: 2px solid var(--ai-glow-color, #00f0ff);
  border-radius: 12px;
  padding: 1.5rem;
  background-color: var(--ai-bg, #1a1a1a);
  color: var(--ai-text, #ffffff);
  box-shadow: 0 0 20px var(--ai-glow-color, #00f0ff);
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

2. Responsive layout under 600px width

@media (max-width: 600px) {
  .ai-output {
    padding: 1rem;
    font-size: 0.95rem;
    box-shadow: 0 0 10px var(--ai-glow-color, #00f0ff);
  }
}

3. Dark theme application

Handled by using custom properties for theming:

:root {
  --ai-bg: #1a1a1a;
  --ai-text: #ffffff;
  --ai-glow-color: #00f0ff;
}

Custom Properties for Easy Theming (bonus content)

These allow easy switching to light mode, retro mode, or whatever vibe the marketing team dreams up.

:root.light-theme {
--ai-bg: #f5f5f5;
--ai-text: #111111;
--ai-glow-color: #0077ff;
}

:root.retro-future {
--ai-bg: #2c003e;
--ai-text: #f2ff00;
--ai-glow-color: #ff00ff;
}

Then toggle the class on <html> or <body> to change themes dynamically.