Skip to main content

Custom Themes

Learn how to customize the appearance of Bellamy Book.

Overview​

Bellamy Book supports theme customization through:

  • CSS variables
  • Theme configuration files
  • Custom components

Frontend Theme Configuration​

CSS Variables​

Modify theme colors in src/styles/theme.css:

:root {
  --primary-color: #1877f2;
  --secondary-color: #42b72a;
  --background-color: #f0f2f5;
  --text-color: #050505;
  --border-color: #dadde1;
}

[data-theme='dark'] {
  --primary-color: #1877f2;
  --background-color: #18191a;
  --text-color: #e4e6eb;
  --border-color: #3e4042;
}

Theme Provider​

Use the theme context:

import { useTheme } from '../contexts/ThemeContext';

function MyComponent() {
  const { theme, toggleTheme } = useTheme();

  return (
    <div className={`app ${theme}`}>
      <button onClick={toggleTheme}>
        Toggle {theme === 'light' ? 'Dark' : 'Light'} Mode
      </button>
    </div>
  );
}

Backend Theme API​

Get Theme Settings​

GET /api/Authentication/me (user profile may include theme)

Update Theme​

POST /api/Authentication/update-profile (or theme/settings endpoint)
{
  "primaryColor": "#1877f2",
  "fontFamily": "Arial",
  "fontSize": "16px"
}

Custom Components​

Override Default Components​

Create custom components in src/components/custom/:

// src/components/custom/CustomPost.jsx
export function CustomPost({ post }) {
  return (
    <div className="custom-post">
      <h3>{post.author.fullName}</h3>
      <p>{post.content}</p>
    </div>
  );
}

Register Custom Components​

// src/config/components.js
import { CustomPost } from '../components/custom/CustomPost';

export const customComponents = {
  Post: CustomPost,
  // Add more custom components
};

Advanced Customization​

Custom CSS​

Add custom styles in src/styles/custom.css:

.custom-post {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 16px;
  margin-bottom: 16px;
}

Theme Presets​

Create theme presets:

export const themePresets = {
  default: {
    primaryColor: '#1877f2',
    secondaryColor: '#42b72a',
  },
  dark: {
    primaryColor: '#1877f2',
    background: '#18191a',
  },
  custom: {
    primaryColor: '#ff6b6b',
    secondaryColor: '#4ecdc4',
  }
};

Best Practices​

  1. Maintain Accessibility: Ensure color contrast ratios meet WCAG standards
  2. Test Dark Mode: Verify all components work in both themes
  3. Performance: Use CSS variables for efficient theme switching
  4. Consistency: Maintain consistent styling across components

Next Steps​