🅰️ Lobe theme - The modern theme for stable diffusion webui, exquisite interface design, highly customizable UI, and efficiency boosting features.
AGPL-3.0 License
A modern interface framework designed for Stable Diffusion WebUIwith an exquisite interface design, a highly customizable UI, and efficiency-boosting features.
English · 简体中文 · Changelog · Report Bug · Request Feature
[!WARNING]
Lobe Theme v3
is compatible withSD WebUI v1.6
and is not backwards compatible. Versions below< 1.6
should be moved to the branch legacy-sd-webui-1.5
Please be aware that LobeTheme is currently under active development, and feedback is welcome for any issues encountered.
Join our Discord community! This is where you can connect with developers and other enthusiastic users of LobeHub. |
---|
[!IMPORTANT]
Star Us, You will receive all release notifications from GitHub without any delay ~ ⭐️
[!NOTE]
Before installing the extension, please check the environment version of Stable Diffusion WebUI, with a minimum requirement of
gradio-3.41.2
&sd-webui 1.6
A
Installation via SD WebUI Extension MarketIn Stable Diffusion WebUI, you can install the Lobe Theme extension through the built-in extension market.
B
Clone this Repository via Git (Recommended)If you prefer to manage extensions using Git, you can clone the repository to your extensions folder. Here are the detailed steps:
git clone "https://github.com/lobehub/sd-webui-lobe-theme" extensions/lobe-theme
Once you have completed these steps, the Lobe Theme extension will be successfully installed in Stable Diffusion WebUI.
1
Light & Dark ThemeThe current theme design provides two visual effects: light theme and dark theme, to meet the visual comfort needs of users in different lighting environments, which can be quickly switched in the upper right corner of the navigation bar.
If you prefer to default to the dark theme, you can achieve this by using the startup parameter --theme=dark
.
[!TIP]
To force a certain color theme in the startup file, for example, if you want to default to the dark mode in the Windows system, you can add the following content to the
webui-user.bat
file:
set COMMANDLINE_ARGS= --theme=dark
In addition, you can also directly switch the theme through URL parameters:
http://localhost:7860/?__theme=light
http://localhost:7860/?__theme=dark
Through these simple and intuitive operations, users can quickly switch the interface theme according to their personal preferences or current environment, in order to achieve the best user experience.
2
Personalized Theme CustomizationAs a design engineer, LobeChat considers the personalized experience of users in interface design, and has introduced a flexible and changeable theme mode, providing a series of color customization options, allowing users to adjust the theme color of the application according to their preferences.
Whether you want a stable deep blue, a lively peach pink, or a professional gray and white, users can find color options that match their style in LobeTheme.
[!TIP]
By clicking the gear icon in the upper right corner of the page, you can enter the settings panel for personalized customization.
- Primary Color: We provide
13
carefully selected theme color schemes to meet your personalized color needs.- Neutral Color: For a more detailed adjustment of the visual experience, you can also choose from
6
different neutral gray levels.- Logo Type: You can choose the default
Lobe
andKitchen
logos, or customize them.- Logo Customization: Support inputting
img url
,base64
encoded images, oremoji
emoticons for logo customization. When entering a singleemoji
, the system will automatically convert it into a 3D Fluent Emoji, enriching the visual effect.- Site Title Customization: Allows you to customize the title of the website according to your needs.
3
Prompt Syntax HighlightingWhen using the Stable Diffusion model for Prompt writing, an effective feature is the Prompt syntax highlighting.
This feature automatically adds color coding to the input Prompt text according to preset syntax rules, enhancing the user experience and the intuitiveness of operations. Prompt syntax highlighting can not only help users identify and construct syntax structures more clearly, but also improve the efficiency of text editing and debugging.
4
Customizable SidebarOne of the key highlights of LobeTheme is its highly customizable sidebar feature, designed to make the image generation workflow smoother, ensuring that every user can adjust and optimize their workspace according to their preferences.
[!TIP]
By clicking the gear icon in the upper right corner of the interface, you can easily access and adjust the following settings:
- Input Area
- Display Mode:
Scroll Fixed Height
|Adjust Size According to Text Lines
- Sidebar Configuration
- Default Expansion:
true
- Display Mode:
Fixed
|Floating
- Default Width:
280 pixels
- Extra Network Sidebar
- Enable:
true
- Default Expansion:
true
- Display Mode:
Fixed
|Floating
- Default Width:
340 pixels
- Model Card Default Size:
86 pixels
Extra-Networks Extension Model Window
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
5
Improved Image Information DisplayThe display of generation information has been improved, with a deep optimization of the data presentation mechanism, and the introduction of a "one-click copy" function to improve information retrieval efficiency.
Now, you can quickly obtain the required Seeds without tedious searching in long strings.
6
Image Recipe SharingA brand-new image sharing feature has been launched. With a simple one-click operation, you can easily share the current image recipe, create exquisite shared images, and explore more customizable settings to make the shared images more personalized.
7
Prompt EditorA user-friendly prompt word editor has been added to the second tab of the quick setting menu. It includes a series of preset tags covering post-processing, style description, and other key words, simplifying your operation process and helping you edit and manage prompts more efficiently.
8
Mobile-Friendly AdaptationIn order to improve the interactive experience of mobile users, LobeTheme has implemented an intelligent folding mechanism for breadcrumb navigation and finely adapted the sidebar. These adjustments are aimed at providing convenient and intuitive navigation experience on any device.
However, achieving the same complex functions and detailed customization as the desktop on the mobile end poses certain challenges. Especially when integrating with the Stable Diffusion WebUI interface, high complexity and precise parameter settings are required, which may result in differences in user experience between mobile and desktop.
If you have any suggestions or ideas, please feel free to provide feedback through GitHub Issues or Pull Requests.
9
PWA Progressive Web ApplicationIn today's multi-device environment, providing a seamless experience for users is crucial. Therefore, we have adopted the Progressive Web Application PWA technology, which is a modern web technology that can elevate web applications to a near-native application experience.
Through PWA, LobeTheme can provide a highly optimized user experience on desktop and mobile devices, while maintaining lightweight and high performance characteristics. Visually and perceptually, it has been carefully designed to ensure that its interface is indistinguishable from native applications, providing smooth animations, responsive layout, and adaptation to different screen resolutions of different devices.
[!NOTE]
If you are not familiar with the installation process of PWA, you can follow these steps to add LobeChat as your desktop application (also applicable to mobile devices):
- Run the Chrome or Edge browser on your computer.
- Visit the LobeChat website.
- Click the Install icon in the upper right corner of the address bar.
- Follow the on-screen instructions to complete the installation of PWA.
10
Prompt Word FormattingClick the 🪄 button below the Prompt to format the prompt words with one click.
[!TIP]
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>
✨ With continuous updates in product iterations, we hope to bring more exciting features!
Chrome | Edge | Safari |
---|---|---|
last 2 versions | last 2 versions | last 2 versions |
[!CAUTION]
There is currently a known compatibility issue with styles on Firefox browser.
NPM | Repository | Description | Version |
---|---|---|---|
@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. |
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
Contributions of all types are more than welcome, if you are interested in contributing code, feel free to check out our GitHub Issues to get stuck in to show us what you’re made of.
Every bit counts and your one-time donation sparkles in our galaxy of support! You're a shooting star, making a swift and bright impact on our journey. Thank you for believing in us – your generosity guides us toward our mission, one brilliant flash at a time.
1.0.0
version