lollms-webui/web/public/help/lollms-styling.md

Certainly! I'd be happy to create a documentation about LoLLMs's CSS styling for new developers of the WebUI. This documentation will help them understand how to use the theme consistently in their projects and how to modify the theme globally. Here's a comprehensive guide:

LoLLMs CSS Styling Documentation

Table of Contents

1. Introduction
2. Getting Started
3. Color Scheme
4. Typography
5. Layout Components
6. Utility Classes
7. Custom Components
8. Responsive Design
9. Dark Mode
10. Customization

1. Introduction

LoLLMs uses a flat gray theme based on Tailwind CSS. This theme provides a clean, modern look with support for both light and dark modes. The styling is designed to be consistent across different components and easily customizable.

2. Getting Started

To use this theme in your project, follow these steps:

1. Import the CSS file into your project.
2. Make sure you have Tailwind CSS set up in your project.
3. Include the Google Fonts link for Roboto in your HTML head:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">

3. Color Scheme

The theme uses a gray-based color palette. Here are the main color variables:

:root {
  --color-primary: #4a4a4a;
  --color-primary-light: #6a6a6a;
  --color-secondary: #8a8a8a;
  --color-accent: #3a3a3a;
  --color-light-text-panel: #ffffff;
  --color-dark-text-panel: #e0e0e0;
  --color-bg-light-panel: #f0f0f0;
  --color-bg-light: #ffffff;
  --color-bg-light-tone: #e0e0e0;
  --color-bg-light-code-block: #f5f5f5;
  --color-bg-light-tone-panel: #d0d0d0;
  --color-bg-light-discussion: #f8f8f8;
  --color-bg-light-discussion-odd: #f0f0f0;
  --color-bg-dark: #2a2a2a;
  --color-bg-dark-tone: #3a3a3a;
  --color-bg-dark-tone-panel: #4a4a4a;
  --color-bg-dark-code-block: #3a3a3a;
  --color-bg-dark-discussion: #333333;
  --color-bg-dark-discussion-odd: #2d2d2d;
}

4. Typography

The theme uses the Roboto font family. Heading styles are predefined:

h1 { @apply text-4xl md:text-5xl font-bold text-gray-800 dark:text-gray-100 mb-6; }
h2 { @apply text-3xl font-semibold text-gray-700 dark:text-gray-200 mb-4; }
h3 { @apply text-2xl font-medium text-gray-600 dark:text-gray-300 mb-3; }
h4 { @apply text-xl font-medium text-gray-500 dark:text-gray-400 mb-2; }

5. Layout Components

Background

.background-color {
  @apply bg-gray-100 dark:bg-gray-900 min-h-screen;
}

Toolbar

.toolbar-color {
  @apply text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md;
}

Panels

.panels-color {
  @apply text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md;
}

Chatbox

.chatbox-color {
  @apply bg-gray-50 dark:bg-gray-800;
}

6. Utility Classes

Buttons

.btn-primary {
  @apply bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded;
}

.btn-secondary {
  @apply bg-gray-400 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded;
}

Cards

.card {
  @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-6;
}

Inputs

.input {
  @apply bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400;
}

7. Custom Components

Messages

.message {
  @apply relative w-full rounded-lg m-2 shadow-md border border-gray-300 dark:border-gray-600 flex flex-col flex-grow flex-wrap overflow-visible p-5 pb-3 text-lg;
}

Menu Items

.menu-item {
  @apply mb-2 px-4 py-2 text-gray-600 dark:text-gray-300 font-bold text-lg transition-all duration-300 ease-in-out;
  @apply hover:text-gray-800 hover:dark:text-gray-100 hover:transform hover:-translate-y-1;
}

8. Responsive Design

The theme uses Tailwind's responsive classes. For example:

h1 { @apply text-4xl md:text-5xl font-bold text-gray-800 dark:text-gray-100 mb-6; }

This makes the h1 element larger on medium-sized screens and above.

9. Dark Mode

Dark mode styles are included using Tailwind's dark: variant. For example:

.background-color {
  @apply bg-gray-100 dark:bg-gray-900 min-h-screen;
}

10. Customization

To customize the theme globally:

1. Modify the color variables in the :root selector.
2. Update the Tailwind classes in the utility classes and custom components.
3. Add new custom classes as needed, following the existing naming conventions.

For example, to change the primary button color:

.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}

Remember to use Tailwind's configuration file to extend or override the default theme if you need to add new colors or modify existing ones.

By following this documentation, new developers should be able to maintain consistency in their projects and easily modify the theme as needed. Always refer to this guide when adding new components or styles to ensure a cohesive look across the entire application.