From 3579e51f5f742e32569ce0adcd279ebc6d1ea4a8 Mon Sep 17 00:00:00 2001
From: JoelCDL <joel.hagedorn@ucop.edu>
Date: Tue, 17 Dec 2024 16:46:44 -0800
Subject: [PATCH] Write development instructions within readme

---
 README.md      | 44 +++++++++++++++++++++++++++++++++++++++++++-
 src/index.html |  2 +-
 2 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 2e9df76..bb61e76 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,46 @@
 # Klaro UI
+
 The Klaro consent manager custom UI for the California Digital Library.
 
-Developer instructions coming soon.
+View sample at https://cdlib.github.io/klaro-ui
+
+## Requirements
+
+- Git
+- Node version 20 or above
+- NPM version 10 or above
+- Klaro source and a valid config file
+
+## Installation
+
+1. Follow the steps in [Getting Started](https://klaro.org/docs/getting-started) within the Klaro documentation.
+
+2. Within the `src` URL of the Klaro script (after the config script), replace the URL ending in **klaro.js** with the "no CSS" version:
+
+```
+https://cdn.kiprotect.com/klaro/v0.7/klaro-no-css.js
+```
+
+3. From your CLI, install Klaro UI into your application as a dependency:
+
+```
+npm install https://github.com/cdlib/klaro-ui --save
+```
+
+The module **klaro-ui** is now installed in your application's **node_modules** folder.
+
+4. From your bundler/build tool, source the `klaro-ui` stylesheet from the klaro-ui module:
+
+```
+/node_modules/klaro-ui/dist/klaro-ui.css
+```
+
+## Appearance
+
+Klaro UI doesn't include any typefaces. The Klaro text will include the font defined for the document.
+
+The Klaro UI default stylesheet renders a light colored theme when a user's system appearance is set to light colors and a dark colored theme when set to dark colors.
+
+For only the light colored theme, use **klaro-ui-light.css** within **klaro-ui/dist**.
+
+For only the dark colored theme, use **klaro-ui-dark.css** within **klaro-ui/dist**.
diff --git a/src/index.html b/src/index.html
index c3ade0d..db5fa78 100644
--- a/src/index.html
+++ b/src/index.html
@@ -35,7 +35,7 @@
     <h1>Klaro UI for the California Digital Library</h1>
     <main>
       <p>This page demonstrates the Klaro consent manager using the custom CDL design, text and functionality.</p>
-      <p>Developer instructions for applying this custom UI to instances of Klaro on CDL websites will be published soon to <a href="https://github.com/cdlib/klaro-ui" target="_blank">cdlib Klaro-UI GitHub repository</a>.</p>
+      <p>To use this custom UI for instances of Klaro on CDL websites, see the <a href="https://github.com/cdlib/klaro-ui" target="_blank">cdlib Klaro-UI GitHub readme</a>.</p>
       <p>Below is filler content to force some vertical page scrolling and test that Klaro is always rendering as a fixed component in the lower-right of the browser.</p>
     </main>
     <aside>