• Stars
    star
    291
  • Rank 142,602 (Top 3 %)
  • Language
    CSS
  • License
    MIT License
  • Created almost 2 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

๐Ÿง‘โ€๐ŸŽจ Soothing pastel theme for Stable Diffusion WebUI

Logo
Catppuccin for Stable Diffusion Web UI

Previews

๐ŸŒป Latte
๐Ÿชด Frappรฉ
๐ŸŒบ Macchiato
๐ŸŒฟ Mocha

Usage

Extension (Recommended)

  1. Open WebUI
  2. Click on the "Extensions" tab
  3. Click on the "Install from URL" subsection
  4. Paste https://github.com/catppuccin/stable-diffusion-webui into the URL spot, set the local directory name to Catppuccin Theme, and install
  5. Go to "Installed" subsection and click "Apply and restart UI"
  6. Configure the theme from the "Settings" tab under "Catppuccin Theme", afterwards you must "Apply Settings" and "Reload UI"

Extension (Extension index)

NOTE: This method will install the theme under the name "stable-diffusion-webui". You can read more about this issue in the next section.

  1. Open WebUI
  2. Click on the "Extensions" tab and navigate to "Available"
  3. Click "Load From:" and find and install "Catppuccin Theme" from the list
  4. Go to "Installed" subsection and click "Apply and restart UI"
  5. Configure the theme from the "Settings" tab under "Catppuccin Theme", afterwards you must "Apply Settings" and "Reload UI"

Add directly

  1. Clone this repository locally
  2. Create the file user.css in your stable-diffusion-webui directory
  3. Copy the contents of the desired flavor into user.css
  4. Restart the Web UI or click "Reload UI" at the bottom of the screen

NOTE

Due to catppuccin naming conventions and limitations in webui's extension names, this extension will come up as "stable-diffusion-webui" in the extension update section. I have proposed a solution to WebUI here, feel free to upvote it increase the chances of this issue being resolved.

๐Ÿ™‹ FAQ

  • Q: "I decided not to use the extennsion, how do I change the accent color?"
    A: Open user.css and set the variavble --accent: var(--{preferred color});

  • Q: "The theme isn't being applied???"
    A: Sometimes Web UI doesn't automatically figure out your preferred theme. Try adding /?__theme=dark to the url and see if the theme is applied. Below are the steps to make this change persistent on different systems:

    • Linux / MacOS: Edit webui-user.sh and uncomment and set this variable as export COMMANDLINE_ARGS="--theme=dark $COMMANDLINE_ARGS"
    • Windows: Edit webui-user.bat and set this variable by set COMMANDLINE_ARGS=--theme=dark.

    If you are still having trouble then consult the relevant part of the webui wiki.

  • Q: "Why doesn't the theme look like the previews?"
    A: The main UI is constantly being changed upstream, so our previews may not match what the theme will look like for you. Though the previews may be behind, we are frequently updating the themes whenever there is a change in the Web UI repo. Though if you notice a style issue with a recent version of webui, feel free to open an issue on this repo.

  • Q: "Why isn't {extension} themed?"
    A: Some extensions use their own style sheets that don't play nice with user.css.

๐Ÿ’ Thanks to

ย 

Copyright ยฉ 2021-present Catppuccin Org

More Repositories

1

catppuccin

๐Ÿ˜ธ Soothing pastel theme for the high-spirited!
TypeScript
14,655
star
2

nvim

๐Ÿจ Soothing pastel theme for (Neo)vim
Lua
5,432
star
3

tmux

๐Ÿ’ฝ Soothing pastel theme for Tmux!
Shell
1,635
star
4

vscode

๐ŸฆŒ Soothing pastel theme for VSCode & Azure Data Studio
TypeScript
1,013
star
5

wallpapers

๐Ÿ–ผ๏ธ Wallpapers to match your Catppuccin setups!
TypeScript
944
star
6

gtk

๐ŸชŸ Soothing pastel theme for GTK3/4
Python
908
star
7

discord

๐ŸŽฎ Soothing pastel theme for Discord
SCSS
763
star
8

vscode-icons

๐ŸฆŠ Soothing pastel icons for VSCode/VSCodium
TypeScript
561
star
9

iterm

๐Ÿญ Soothing pastel theme for iTerm2
TypeScript
473
star
10

userstyles

๐Ÿ–Œ Soothing pastel userstyles
Less
459
star
11

spicetify

๐ŸŽง Soothing pastel theme for Spotify
CSS
427
star
12

alacritty

๐ŸŒด Soothing pastel theme for Alacritty
406
star
13

qbittorrent

๐Ÿงฒ Soothing pastel theme for qBittorrent
Just
402
star
14

firefox

๐ŸฆŠ Soothing pastel theme for Firefox
JavaScript
377
star
15

obsidian

๐Ÿ’Ž Soothing pastel theme for Obsidian
CSS
371
star
16

jetbrains

๐Ÿง  Soothing pastel theme for JetBrains IDEs
TypeScript
367
star
17

nix

โ„๏ธ Soothing pastel theme for Nix
Nix
364
star
18

kitty

๐Ÿ˜ฝ Soothing pastel theme for Kitty
314
star
19

bat

๐Ÿฆ‡๏ธ Soothing pastel theme for Bat
TypeScript
285
star
20

emacs

๐Ÿ„ Soothing pastel theme for Emacs
Emacs Lisp
278
star
21

palette

๐ŸŽจ Soothing pastel theme to use within your projects!
JavaScript
265
star
22

rofi

๐Ÿฆ‚ Soothing pastel theme for Rofi
Shell
265
star
23

minecraft

โ›๏ธ Soothing pastel theme for Minecraft
Python
255
star
24

github

๐Ÿˆโ€โฌ› Soothing pastel theme for GitHub
CSS
243
star
25

zed

๐Ÿฆ€ Soothing pastel theme for Zed
220
star
26

egui

๐Ÿ“ Soothing pastel theme for egui
Rust
218
star
27

cursors

๐Ÿ Soothing pastel mouse cursors
Shell
213
star
28

gitea

๐Ÿต Soothing pastel theme for Gitea
SCSS
213
star
29

kde

๐ŸŒป Soothing pastel theme for KDE
Shell
199
star
30

starship

๐Ÿš€ Soothing pastel theme for Starship
Just
199
star
31

tailwindcss

๐Ÿ’จ Soothing pastel theme for Tailwind CSS
TypeScript
189
star
32

dark-reader

โœด๏ธ Soothing pastel theme for Dark Reader
185
star
33

i3

๐ŸŒป Soothing pastel themes for i3 & sway
Just
173
star
34

fish

๐ŸŸ Soothing pastel theme for the Fish Shell
172
star
35

windows-terminal

๐ŸชŸ Soothing pastel theme for Windows Terminal
171
star
36

waybar

๐Ÿ“ Soothing pastel theme for Waybar
CSS
169
star
37

grub

๐ŸŒ• Soothing pastel theme for Grub2
167
star
38

lazygit

๐Ÿด Soothing pastel theme for Lazygit
Nix
161
star
39

youtube

๐Ÿ“บ Soothing pastel theme for YouTube
CSS
161
star
40

home-assistant

๐Ÿ  Soothing pastel theme for Home Assistant
149
star
41

hyprland

๐ŸŒป Soothing pastel theme for Hyprland
Just
144
star
42

logseq

๐Ÿฆซ Soothing pastel theme for Logseq
SCSS
141
star
43

vim

๐Ÿง‹ Soothing pastel theme for Vim
Vim Script
133
star
44

zellij

๐Ÿ™ Soothing pastel theme for Zellij
Just
121
star
45

nilesoft-shell

๐Ÿ“ƒ Soothing pastel theme for Nilesoft Shell
NWScript
121
star
46

telegram

๐Ÿ’ฌ Soothing pastel theme for Telegram
Smarty
120
star
47

konsole

๐Ÿฆš Soothing pastel theme for Konsole
Just
116
star
48

zsh-syntax-highlighting

๐Ÿช— Soothing pastel theme for zsh-syntax-highlighting
Shell
116
star
49

btop

๐Ÿง™โ€โ™‚๏ธ Soothing pastel theme for btop
115
star
50

fzf

๐Ÿงจ Soothing pastel theme for fzf
115
star
51

slack

๐Ÿ’ผ Soothing pastel theme for Slack
111
star
52

youtubemusic

๐ŸŽง Soothing pastel theme for YouTube Music
CSS
110
star
53

sublime-text

๐Ÿ‹ Soothing pastel color schemes for Sublime Text
109
star
54

wezterm

๐Ÿš Soothing pastel theme for WezTerm
Lua
109
star
55

jupyterlab

๐Ÿ“Š Soothing pastel theme for JupyterLab
CSS
109
star
56

cosmic-desktop

โœจ Soothing pastel theme for COSMIC Desktop Environment
Python
104
star
57

fleet

๐ŸŒŠ Soothing pastel theme for JetBrains Fleet
Kotlin
103
star
58

tty

๐Ÿ–ฅ๏ธ Soothing pastel theme for the Linux TTY
Shell
101
star
59

dunst

๐Ÿค Soothing pastel theme for Dunst
100
star
60

steam

๐Ÿ•น๏ธ Soothing pastel theme for Steam (WIP)
CSS
99
star
61

warp

โšก Soothing pastel theme for Warp
TypeScript
98
star
62

rust

๐Ÿฆ€ Soothing pastel theme for Rust
Rust
97
star
63

python

๐Ÿ Soothing pastel theme for Python
Python
96
star
64

gnome-terminal

๐Ÿงโ€โ™‚๏ธ Soothing pastel theme for Gnome Terminal
Python
95
star
65

jetbrains-icons

๐ŸฆŠ Soothing pastel icons for JetBrains IDEs
Kotlin
94
star
66

godot

๐Ÿ‘พ Soothing pastel theme for Godot
Just
89
star
67

xcode

๐ŸŒ Soothing pastel theme for Xcode
Just
88
star
68

mdBook

๐ŸŽŠ Soothing pastel theme for mdBook
CSS
87
star
69

chrome

๐Ÿ‘ป Soothing pastel theme for Chrome
86
star
70

papirus-folders

๐Ÿ“œ Soothing pastel theme for Papirus Icon Theme folders
Shell
84
star
71

hyprlock

๐Ÿ”’ Soothing pastel theme for Hyprlock
80
star
72

go

๐Ÿฆซ Soothing pastel library for Go
Go
77
star
73

duckduckgo

๐Ÿฆ† Soothing pastel theme for DuckDuckGo
JavaScript
75
star
74

github-file-explorer-icons

๐Ÿ™ Soothing pastel icons for GitHub File Explorer
TypeScript
74
star
75

cli

๐Ÿช„ Soothing pastel theme manager (WIP)
Go
72
star
76

joplin

๐Ÿ“”๏ธ Soothing pastel theme for Joplin
CSS
72
star
77

vimium

๐ŸŒผ Soothing pastel theme for Vimium
CSS
71
star
78

matplotlib

๐Ÿ“Š Soothing pastel theme for Matplotlib
Python
71
star
79

notepad-plus-plus

๐Ÿˆ Soothing pastel theme for Notepad++
70
star
80

zathura

๐Ÿงšโ€โ™‚๏ธ Soothing pastel theme for Zathura
70
star
81

termux

โ›„ Soothing pastel theme for Termux!
69
star
82

helix

โžฟ Soothing pastel theme for Helix!
Python
69
star
83

website

๐ŸŒ Soothing pastel theme for the World Wide Web
Astro
69
star
84

toolbox

๐Ÿงฐ Catppuccin's development tools
JavaScript
69
star
85

sddm

๐Ÿ”’ Soothing pastel theme for SDDM
QML
67
star
86

obs

โบ๏ธ Soothing pastel theme for OBS Studio
Shell
67
star
87

fcitx5

๐Ÿงƒ Soothing pastel theme for Fcitx5
66
star
88

k9s

๐Ÿถ Soothing pastel theme for k9s
TypeScript
64
star
89

polybar

๐Ÿ“ Soothing pastel theme for Polybar
64
star
90

refind

๐Ÿ”„ Soothing pastel theme for rEFInd
63
star
91

yazi

๐Ÿฅ Soothing pastel theme for Yazi
TypeScript
63
star
92

floris-board

๐Ÿฅ€ Soothing pastel theme for Floris Board
61
star
93

gitui

๐Ÿด Soothing pastel theme for GitUI
Just
59
star
94

swaync

๐Ÿ”” Soothing pastel theme for SwayNC
SCSS
57
star
95

infinity

๐Ÿ›ธ Soothing pastel theme for Infinity for Reddit
57
star
96

qt5ct

๐ŸŽจ Soothing pastel theme for qt5ct
57
star
97

mc

๐ŸŒœ Soothing pastel theme for Midnight Commander
57
star
98

visual-studio

๐ŸŒŠ Soothing pastel themes for Visual Studio
PowerShell
54
star
99

Terminal.app

๐Ÿ’ป Soothing pastel theme for Terminal.app
54
star
100

freshrss

๐Ÿ“ฅ Soothing pastel theme for FreshRSS
CSS
53
star