18 KiB

Raw Blame History

Lobe Theme

The modern theme for stable diffusion webui

Legacy verison a.k.a kitchen theme

English · Russian · 简体中文 · Changelog · Report Bug · Request Feature

Warning
Lobe Theme v3 is compatible with SD WebUI v1.6 and is not backwards compatible. Versions below < 1.6 should be moved to the branch legacy-sd-webui-1.5

Table of contents

✨ Features

🌗 Supports light and dark themes, with the ability to quickly switch in the navigation bar
🌈 Supports custom theme colors and neutral colors, with the option to customize the logo
🪄 Supports one-click formatting of the prompt, with a simple tag editor provided
🎛️ Highly customizable sidebar, with a quick settings sidebar on the left and a model sidebar on the right
🖼️ Adjustable canvas ratio, ensuring that generated images are always displayed at the top
📱 Mobile-friendly, with partial optimization for mobile screens
🌍Support i18n and welcome PR contributions
📝 Syntax highlighting in the prompt input box
📦 Support PWA progressive web app

📦 Installation

Method 1

Search for Lobe Theme or Kitchen Theme in the stable diffusion webui plugin market and install it.

Note
Version 2.0.0 was renamed to Lobe Theme

Method 2

As an extension (recommended), clone the repository to your extension folder:

git clone "https://github.com/lobehub/sd-webui-lobe-theme" extensions/lobe-theme

Important
minimum requirements gradio-3.41.2 & sd-webui 1.6

Upstream Sync

Star Us，You will receive all releases notifications from GitHub without any delay ~ ⭐️

Star History

🤯 Usage

Light and Dark Themes

Note
You can quickly switch between light and dark themes in the upper-right corner of the navigation bar.

The current theme supports both light and dark themes. If you want to force dark mode, use the --theme=dark argument to launch your WebUI. For example, on Windows, your webui-user.bat should include:

set COMMANDLINE_ARGS= --theme=dark

Alternatively, you can switch directly through URL Props:

http://localhost:7860/?__theme=light
http://localhost:7860/?__theme=dark

Theme Customization

Note
Click the ⚙ icon in the upper-right corner to open the settings panel. The current available settings are as follows:

Theme
- Primary color: Currently offers 13 theme color combinations
- Neutral color: Currently offers 6 different grayscale color combinations
- Logo type: Lobe, Kitchen, Custom
  - Custom logo: Supports img url, base64, and emoji. When a single emoji is entered, it will be automatically replaced with 3D Fluent Emoji.
  - Custom title: Customize the site name.

Prompt Syntax Highlighting

Automatically colorize prompt display according to the Stable Diffusion syntax rules

Sidebar Customization

Note
Click the ⚙ icon in the upper-right corner to open the settings panel. The current available settings are as follows:

Prompt Textarea
- Display mode: scroll fixed height | resizable by text lines
Sidebar
- Default expand: true
- Display mode: fixed | float
- Default width: 280
ExtraNetwork Sidebar
- Enable: true
- Default expand: true
- Display mode: fixed | float
- Default width: 340
- Default card size: 86

Recommended System Settings

Extra-Networks

thumbs
width: 86
height: 128

Quick-Setting

sd_model_checkpoint, sd_vae, CLIP_stop_at_last_layers, img2img_background_color, img2img_color_correction, samples_save, samples_format, grid_save, return_grid,  n_rows, live_previews_enable, show_progress_every_n_steps, live_preview_refresh_period

Mobile Adaptation

Partial convenience adaptation design has been completed for mobile devices, including breadcrumb foldable navigation bar, sidebar adaptation, etc. However, due to the high complexity and fixed values of the stable diffusion interface, it is difficult to ensure the same user experience as the desktop version. Feedback is welcome for more ideas.

Progress Web App

You can use Progressive Web Apps PWA for a fast stable diffusion experience on your computer or mobile device.

On your computer, open Chrome.
Go to stable diffusion website you want to install
At the top right of the address bar, click Install
Follow the onscreen instructions to install the PWA

Prompt formatting

Click the 🪄 button below Prompt to format the prompt words with one click.

Note
Convert full-width punctuation to half-width, remove extra spaces, add missing commas, and move the Extra-Networks model to the end.

Before formatting:

photorealistic   photo of a handsome male (wizard  :1.2）， <lora:LuisapHotlineStyle:0.5> <lora:ElegantHanfuRuqunStyle:0.2>    short beard, white wizard  shirt, (with golden    trim:0.8),

After formatting:

photorealistic photo of a handsome male, (wizard:1.2), short beard, white wizard shirt, (with golden trim:0.8), <lora:LuisapHotlineStyle:0.5>, <lora:ElegantHanfuRuqunStyle:0.2>

🖥 Environment Support

Chrome	Edge	Safari
last 2 versions	last 2 versions	last 2 versions

Warning
There is currently a known compatibility issue with styles on Firefox browser.

📦 Ecosystem

NPM	Repository	Description
@lobehub/ui	lobehub/lobe-ui	Lobe UI is an open-source UI component library dedicated to building AIGC web applications.
@lobehub/lint	lobehub/lobe-lint	LobeLint provides configurations for ESlint, Stylelint, Commitlint, Prettier, Remark, and Semantic Release for LobeHub.
@lobehub/assets	lobehub/assets	Logo assets, favicons, webfonts for LobeHub.

⌨️ Local Development

You can use Github Codespaces for online development:

Alternatively, you can clone it for local development. To enable hot-reloading mode, you need to start stable diffuison on port 7860 in advance.

$ git clone https://github.com/lobehub/sd-webui-lobe-theme.git
$ cd sd-webui-lobe-theme
$ bun install
$ bun dev

🤝 Contributing

Любые виды вкладов приветствуются, если вас интересует внесение кода, не стесняйтесь просмотреть наши проблемы на GitHub Issues, чтобы показать нам, из чего вы сделаны.

🔗 Ссылки

Больше продуктов

🤖 Lobe Chat : Это открытая, расширяемая (с вызовом функций) высокопроизводительная рамка для чат-ботов. Она поддерживает однокликовую бесплатную развертывание вашего частного веб-приложения ChatGPT/LLM.
🌏 Lobe i18n : Lobe i18n - это автоматизированный инструмент для процесса перевода i18n (интернационализация), работающий на основе ChatGPT. Он поддерживает такие функции, как автоматическое разделение больших файлов, инкрементные обновления и настраиваемые параметры для модели OpenAI, API прокси и температуры.
💌 Lobe Commit : Lobe Commit - это инструмент CLI, который использует Langchain/ChatGPT для создания сообщений о коммитах на основе Gitmoji.

Благодарности

stable-diffusion-webui：https://github.com/AUTOMATIC1111/stable-diffusion-webui
gradio-theme-gallery: https://huggingface.co/spaces/gradio/theme-gallery
cozy-nest: https://github.com/Nevysha/Cozy-Nest
before 1.0.0 version
- sd-web-ui-quickcs: https://github.com/Gerschel/sd-web-ui-quickcss/
- Dark-Themes-SD-WebUI-Automatic1111: https://github.com/Nacurutu/Dark-Themes-SD-WebUI-Automatic1111

18 KiB

Raw Blame History

Lobe Theme

TOC

✨ Features

📦 Installation

Method 1

Method 2

Upstream Sync

🤯 Usage

Light and Dark Themes

Theme Customization

Prompt Syntax Highlighting

Sidebar Customization

Extra-Networks

Quick-Setting

Mobile Adaptation

Progress Web App

Prompt formatting

🖥 Environment Support

📦 Ecosystem

⌨️ Local Development

🤝 Contributing

🔗 Ссылки

Больше продуктов

Благодарности

📝 License

18 KiB Raw Blame History Unescape Escape

Lobe Theme

TOC

✨ Features

📦 Installation

Method 1

Method 2

Upstream Sync

🤯 Usage

Light and Dark Themes

Theme Customization

Prompt Syntax Highlighting

Sidebar Customization

Extra-Networks

Quick-Setting

Mobile Adaptation

Progress Web App

Prompt formatting

🖥 Environment Support

📦 Ecosystem

⌨️ Local Development

🤝 Contributing

🔗 Ссылки

Больше продуктов

Благодарности

📝 License

18 KiB

Raw Blame History