From a9f75d2465861878b67f0216fd49c75b54d69132 Mon Sep 17 00:00:00 2001
From: Ayman Bagabas <ayman.bagabas@gmail.com>
Date: Wed, 22 Feb 2023 15:28:22 -0500
Subject: [PATCH] docs: add styles section and examples

---
 README.md                   | 19 +++++++++++++++++++
 examples/styles/styles.go   | 20 ++++++++++++++++++++
 examples/styles/styles.tape |  8 ++++++++
 3 files changed, 47 insertions(+)
 create mode 100644 examples/styles/styles.go
 create mode 100644 examples/styles/styles.tape

diff --git a/README.md b/README.md
index b262547..14f5070 100644
--- a/README.md
+++ b/README.md
@@ -152,6 +152,25 @@ logger.SetReportCaller(false)
 logger.SetLevel(log.DebugLevel)
 ```
 
+### Styles
+
+You can customize the logger styles using [Lipgloss][lipgloss]. The styles are
+defined at a global level in [styles.go](./styles.go).
+
+```go
+// Override the default error level style.
+log.ErrorLevelStyle = lipgloss.NewStyle().
+    SetString("ERROR!!").
+    Padding(0, 1, 0, 1).
+    Background(lipgloss.Color("204")).
+    Foreground(lipgloss.Color("0"))
+// Add a custom style for key `err`
+log.KeyStyles["err"] = lipgloss.NewStyle().Foreground(lipgloss.Color("204"))
+log.Error("Whoops!", "err", "kitchen on fire")
+```
+
+<img width="400" src="https://vhs.charm.sh/vhs-1s1qma0OVFeWFGqtBAPpfW.gif" alt="Made with VHS">
+
 ### Sub-logger
 
 Create sub-loggers with their specific fields.
diff --git a/examples/styles/styles.go b/examples/styles/styles.go
new file mode 100644
index 0000000..89de2aa
--- /dev/null
+++ b/examples/styles/styles.go
@@ -0,0 +1,20 @@
+package main
+
+import (
+	"time"
+
+	"github.com/charmbracelet/lipgloss"
+	"github.com/charmbracelet/log"
+)
+
+func main() {
+	log.ErrorLevelStyle = lipgloss.NewStyle().
+		SetString("ERROR!!").
+		Padding(0, 1, 0, 1).
+		Background(lipgloss.Color("204")).
+		Foreground(lipgloss.Color("0"))
+	log.KeyStyles["err"] = lipgloss.NewStyle().Foreground(lipgloss.Color("204"))
+	logger := log.New()
+	logger.Error("Whoops!", "err", "kitchen on fire")
+	time.Sleep(3 * time.Second)
+}
diff --git a/examples/styles/styles.tape b/examples/styles/styles.tape
new file mode 100644
index 0000000..5c54dfa
--- /dev/null
+++ b/examples/styles/styles.tape
@@ -0,0 +1,8 @@
+Output styles.gif
+
+Set Height 250
+Set Width 700
+
+Type "./styles" Sleep 500ms Enter
+
+Sleep 3s