keystone_ui-preferences 0.6.0 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4f636363927260121283af376ea874a464189878bc0a338840fe5c3a228b13dd
-  data.tar.gz: c6e10c6b5e2b4442e74aa0448f7cbd68c23e292b5c21dfd7455291847c12e8c1
+  metadata.gz: bbf5cec0b85185ca3abee2d52c65c7e80f26044c9a0c7fb9a19df0fdba9464c6
+  data.tar.gz: a1885de65a350f4f7025fa2bdb1eb160a11d1f9402a4b38615672a4621a4d2bc
 SHA512:
-  metadata.gz: c1ac4cd559b34527ff83fa954a793b8b9433d2c8caf7a76bfb581b8417ad6f6e9bc1c69c1e91b3aaece6466b5529b8124d6466e050e67022b7aef1ecc97a7ffd
-  data.tar.gz: f8d94f6d19ce5788906d4eb8ab48c827bc38f631e5e1f3f2b7325931c2d83671efd6d03e6b610ddcb1dbd641599667a3da11050bc9350f32a4fcaaf70a38654c
+  metadata.gz: 834b8955f9a2048c833372321b52c13829376dc0d906e4c66d30bd4ef5d9b356f894057f6b1005c166d5b72e9fe33f1df7556f52bd6a9182e59613885c24771e
+  data.tar.gz: 30eb7dbafec075ee43fd6d1cc80a1af79fa6b9ef8c3eb1f68ef250f12f7a1fb042f44b9b1dccdd86580a52ac3de5c5ed15e4495ad0c8476887ba2dfac1bf53b1

data/README.md

@@ -1,12 +1,12 @@
 # keystone_ui-preferences
 
-Per-user saved choices for Keystone UI components, such as a data table's hidden columns.
+Per-user saved choices for Keystone UI components, such as a data table's hidden columns and the colours every page is drawn in.
 
 A page gives a `ui_data_table` a `key:`. This gem saves each signed-in person's layout for that key and hands it back to keystone_ui, so the table renders from it and shows a Columns menu that saves to it. A person with nothing saved sees the hidden columns the table's own call names.
 
 ## Installation
 
-Add the gem and run its install generator, which copies a migration for its table:
+Add the gem and run its install generator, which copies a migration for its table and the template picker script the appearance section uses:
 
 ```ruby
 gem "keystone_ui-preferences"
@@ -18,7 +18,14 @@ bin/rails generate keystone_ui:preferences:install
 bin/rails db:migrate
 ```
 
-After updating the gem, run its update generator to copy any migrations added since it was installed:
+The script lands at `app/javascript/controllers/keystone_ui/preferences/theme_settings_controller.js`. Register it in `app/javascript/controllers/index.js`:
+
+```js
+import ThemeSettingsController from "./keystone_ui/preferences/theme_settings_controller"
+application.register("keystone-ui--preferences--theme-settings", ThemeSettingsController)
+```
+
+After updating the gem, run its update generator to copy any migrations added since it was installed, and the template picker script when the app does not have it yet:
 
 ```bash
 bin/rails generate keystone_ui:preferences:update
@@ -49,6 +56,15 @@ KeystoneUi::Preferences.configure do |config|
   config.authentication_method = :authenticate_user! # runs before every save
   config.current_account_method = :current_account   # returns the account; nil (the default) skips the account level
   config.max_value_bytes = 10_000                    # the largest saved value accepted, in bytes
+  config.default_accent = "blue"                     # the accent for a person with no colours saved
+  config.default_surface = "zinc"                    # the surface for a person with no colours saved
+  config.default_background = "#ffffff"              # the custom background for a person with no colours saved
+  config.default_text = "#18181b"                    # the custom text colour for a person with no colours saved
+  config.default_mode = "light"                      # the mode for a person with no mode saved and for a visitor
+  config.user_looks = true                           # whether a person may choose their own look
+  config.app_look_label = "Classic"                  # the label for the app's own look in the appearance section
+  config.account_colors = true                       # whether an account may choose its colours, and its members their own
+  config.account_looks = true                        # whether an account may choose its look
 end
 ```
 
@@ -133,6 +149,133 @@ A tab declared outside any group with keystone_ui's `navigation_tab` is one row
 
 Saving keeps `"order": [{ "group": "Admin" }, { "group": "Sales", "tabs": ["orders", "quotes"] }, { "group": "Console" }]` for that person under the `navigation` key, naming groups by label and tabs by key, and a tab declared outside any group by its label alone. It leaves their saved placement as it was. keystone_ui draws the navigation in that order on the next page they open, with anything the order does not name after it in its declared order. Reset removes the saved order, so the navigation goes back to the declared order. An order that is not a list of groups is refused with a message, and nothing is saved.
 
+## Colours
+
+Add the palette style tag to your layout's `<head>`:
+
+```erb
+<%= keystone_palette_style_tag %>
+```
+
+It writes the same CSS variables keystone_ui-colors writes: `--color-accent-50` to `--color-accent-950`, `--color-surface-50` to `--color-surface-950`, `--color-custom-background` and `--color-custom-text`. A layout that already calls it for keystone_ui-colors keeps working unchanged, and an app that loads both gems stops at boot.
+
+The colours come from the `colours` key, read the way a table's layout is read: the person's own row, or the account's row when the account does not let members choose. A saved value looks like `{ "accent": "#e11d48", "surface": "#f5e6c8", "text": "#3b2f1e" }` or `{ "template_name": "forest" }`. A named accent or surface, such as `emerald` or `stone`, uses that palette's shades from keystone_ui-looks, and a hex value has its shades generated. A custom hex surface is also the custom background. A saved accent or surface that is neither a name of lowercase letters, digits and underscores nor a six-digit hex, and a saved text colour that is not a six-digit hex, is drawn as the configured default for that colour instead.
+
+A saved `template_name` draws that template's accent, surface, background and text from keystone_ui-looks, whatever else the value holds. The template named `default` is built from the four defaults in the configuration. A person with nothing saved, and a visitor who is not signed in, see those four defaults.
+
+A saved name keystone_ui-looks no longer has still draws a page. A missing template draws the account's colours, or the four defaults when the account has none or its own template is the missing one. A missing accent or surface name draws the default accent or surface. Each of these writes one warning to the app's log naming the owner's type and id and the missing name, for example `keystone_ui-preferences: User 5 saved the template "retired", which keystone_ui-looks does not have`. A saved value that is not a name or a six-digit hex falls back with no warning. The saved row is left as it is until the owner saves again, and the appearance section shows no template selected for it.
+
+## Appearance
+
+A person picks their colours in a settings_hub section the app registers:
+
+```ruby
+SettingsHub.section :appearance, area: :user, title: "Appearance",
+  renders: "keystone_ui/preferences/settings/appearance",
+  runs: "KeystoneUi::Preferences::PickAppearance"
+```
+
+The section looks and behaves as keystone_ui-colors' colour settings do. It offers Default, the five named templates from keystone_ui-looks and Custom, with an accent, a surface and a text colour picker under them. The person's own saved choice is selected, or Default when they have none, and the pickers show the colours drawn for them now. Picking a template sets the pickers to that template's colours at once, and changing a picker selects Custom, through the template picker script the install generator copies. Without the script the section still saves, and the form saves with a full page load, so it works in a Hotwire Native web view.
+
+Saving a template keeps `{ "template_name": "forest" }` for that person under the `colours` key. Saving Custom keeps `{ "accent": "#e11d48", "surface": "#f5e6c8", "text": "#3b2f1e" }`. Saving Default removes the person's `colours` row, so the account's colours, or the app's defaults, apply again. The next page the person opens is drawn in the saved colours.
+
+A template that is not Default or one of the five is refused with a message, and so is a Custom accent or surface that is neither a six-digit hex nor a palette name from keystone_ui-looks, and a text colour that is not a six-digit hex. Nothing is saved.
+
+The `colours` key follows the account layouts above. While an account turns off members-choose for it, the section says the account sets the colours for everyone and offers no colours, and a save that sends colours anyway is refused with a message and saves nothing.
+
+## Mode
+
+The appearance section also offers Light, Dark and System, as keystone_ui-colors' mode control does, with the person's saved mode selected, or `default_mode` when they have none. It offers Custom too when the person may choose their own colours, or when the colours that apply to them draw a background other than white. The mode is offered while the account sets the colours, and saving it there keeps the mode alone.
+
+Saving keeps `{ "mode": "dark" }` for that person under the `mode` key. A mode is only ever read from the person's own row, never from the account's, so it applies whether or not the account lets members choose colours. A mode other than `light`, `dark`, `system` or `custom` is refused with a message, and nothing is saved.
+
+The gem gives keystone_ui the mode through keystone_ui's theme mode supplier, so a layout whose `<html>` tag calls keystone_ui's `keystone_theme_attributes` is marked with the person's mode on every page:
+
+```erb
+<html <%= keystone_theme_attributes %>>
+```
+
+A visitor who is not signed in gets `default_mode`. A choice made with keystone_ui's theme toggle is kept in a cookie and wins over the saved mode in that browser. Saving in the appearance section clears that cookie, so the saved mode shows on the next page. The clearing runs in settings_hub's `after_settings_change` hook, which the `ComponentPreferences` concern defines, so an app that defines its own `after_settings_change` calls `super` from it.
+
+## Look
+
+When the app registers looks with keystone_ui, the appearance section also offers a look, as keystone_ui-colors' look control does. It lists the app's own look first, labelled with `app_look_label`, and then every registered look by name. The person's saved look is selected, or the app's own look when they have none.
+
+Saving a look keeps `{ "look": "rounded" }` for that person under the `look` key. Saving the app's own look removes the person's `look` row, so the account's look, or the app's default look, applies again. A look name keystone_ui does not register is refused with a message, and nothing is saved.
+
+A person's look comes from their own row while the account lets members choose their own look, then from the account's row, and a saved look the app no longer registers is passed over for the next one. With neither, keystone_ui uses its `default_look`. A visitor who is not signed in gets `default_look` too.
+
+The gem gives keystone_ui the look through keystone_ui's look supplier, so the same `keystone_theme_attributes` call marks the `<html>` tag with `data-look` on every page.
+
+An app that keeps people off their own looks sets `user_looks` to false. The appearance section then shows no look choice, a save ignores any look sent with it and keeps the rest, and a person's saved look is passed over for the account's look or the app's default look. With no looks registered the section shows no look choice.
+
+## Account appearance
+
+An admin sets the account's colours and look in a settings_hub section. Who may open it is the app's decision, so register it behind a capability of the app's choosing:
+
+```ruby
+SettingsHub.section :account_appearance, area: :account, title: "Appearance",
+  capability: :manage_account,
+  renders: "keystone_ui/preferences/settings/account_appearance",
+  runs: "KeystoneUi::Preferences::PickAccountAppearance"
+```
+
+The section looks and behaves as keystone_ui-colors' account picker does. It offers Default, the five named templates and Custom with the three colour pickers, then the app's own look and every registered look, with the account's saved choices selected, or Default and the app's own look when it has none. Under them are two switches, one for whether members choose their own colours and one for whether members choose their own look. Both are on until an admin turns them off.
+
+Saving keeps the account's colours under the `colours` key, as `{ "template_name": "forest" }` or `{ "accent": "#e11d48", "surface": "#f5e6c8", "text": "#3b2f1e" }`, and its look under the `look` key, with each switch in that row's `members_choose` column. Saving Default keeps `{ "template_name": "default" }`, and saving the app's own look keeps an empty look, so neither removes the row its switch is on. The colours and look pass the same checks as a person's, and a template, colour or look that fails one is refused with a message, and nothing is saved. A save with no account is refused too.
+
+While the colours switch is off, every member sees the account's colours, and their appearance section says the account sets the colours and offers no colour choice. While the look switch is off, every member sees the account's look, and their appearance section offers no look choice. A look a member sends then is ignored, and the rest of the save is kept. While the look switch is on, a member who chose a look keeps it, and a member with none sees the account's.
+
+An app that keeps accounts off colours sets `account_colors` to false. Neither section then offers a colour choice or the colours switch, every page is drawn in the four configured defaults, and colours sent to either section are refused with a message. An app that keeps accounts off looks sets `account_looks` to false. The account's section then offers no look choice and no look switch, a look sent to it is ignored, and a saved account look is not applied.
+
+## Keeping a page on the app's colours
+
+A controller that declares `keystone_host_colors` draws its pages in the app's four default colours, `default_mode` and keystone_ui's `default_look`, whatever the signed-in person or their account saved. The declaration has the same name keystone_ui-colors gives it, so a controller that already declares it keeps working unchanged. It takes the same `only:` and `except:` options as `before_action`.
+
+```ruby
+class HomeController < ApplicationController
+  keystone_host_colors
+end
+```
+
+A choice made with keystone_ui's theme toggle in that browser still sets light or dark on these pages.
+
+## Moving off keystone_ui-colors
+
+An app that saved colours, modes and looks with keystone_ui-colors keeps them by following these steps in this order. An app that has never installed keystone_ui-preferences adds it to the Gemfile and runs its install generator before step 1.
+
+1. Update keystone_ui-preferences.
+2. Run its update generator, which copies the migration below into `db/migrate`.
+3. Remove keystone_ui-colors from the Gemfile and run `bundle install`.
+4. Change every `KeystoneUi::Colors` name the app uses to its replacement. keystone_ui-colors' README lists each name and what replaces it under [Moving to keystone_ui-preferences](https://github.com/DYB-Development/keystone_ui-colors#moving-to-keystone_ui-preferences).
+5. Register the person's appearance section and the account's appearance section, the account's behind `capability: :manage_account`, as [Appearance](#appearance) and [Account appearance](#account-appearance) show.
+6. Call `super` from any `after_settings_change` the app defines.
+7. Run `bin/rails db:migrate`.
+
+```bash
+bundle update keystone_ui-preferences
+bin/rails generate keystone_ui:preferences:update
+# remove keystone_ui-colors from the Gemfile
+bundle install
+# change each KeystoneUi::Colors name, register both appearance sections, call super from after_settings_change
+bin/rails db:migrate
+```
+
+Boot stops with `KeystoneUi::Preferences::ColorsCheck::Error` while keystone_ui-colors is loaded, and the message names keystone_ui-colors as the gem to remove and the update generator as the step to run first. `bin/rails db:migrate` boots the app, so keystone_ui-colors comes out of the Gemfile before the migration runs, and the generator runs before keystone_ui-colors comes out so the copy migration is in `db/migrate` when it does. An initializer, route, controller or helper that still names `KeystoneUi::Colors`, such as a `KeystoneUi::Colors.configure` block, a route mounting `KeystoneUi::Colors::Engine`, `include KeystoneUi::Colors::CurrentPalette` or `helper KeystoneUi::Colors::PaletteHelper`, also stops the app from booting, so every name is changed before the migration runs.
+
+The generator copies a migration that reads every row of `keystone_ui_colors_theme_preferences` and writes up to three rows for the same owner:
+
+| keystone_ui-colors | keystone_ui-preferences |
+|--------------------|-------------------------|
+| `template_name`, including `default` | `colours` row holding `{"template_name": ...}` |
+| `accent`, `surface` and `text` with no template | `colours` row holding `{"accent": ..., "surface": ..., "text": ...}` |
+| `members_choose` | `members_choose` of the `colours` row |
+| `mode` | `mode` row holding `{"mode": ...}`, written only when a mode was saved |
+| `look` | `look` row holding `{"look": ...}`, written only when a look was saved |
+| `members_choose_look` | `members_choose` of the `look` row, which holds `{}` for an account on the app's own look that sets the look for everyone |
+
+An owner and key that already has a row keeps it, so a choice made in keystone_ui-preferences is never replaced by an older one, and running the migration again changes nothing. In an app without keystone_ui-colors' table the migration does nothing. Rolling it back changes neither table. Drop keystone_ui-colors' table once the copy has run.
+
 ## What is stored
 
 One row per owner and component key, in `keystone_ui_preferences_component_preferences`:

data/app/controllers/concerns/keystone_ui/preferences/component_preferences.rb

@@ -8,7 +8,13 @@ module KeystoneUi
       extend ActiveSupport::Concern
 
       included do
-        helper_method :keystone_component_preference if respond_to?(:helper_method)
+        helper_method :keystone_component_preference, :keystone_palette_style_tag, :keystone_theme_mode, :keystone_look if respond_to?(:helper_method)
+      end
+
+      class_methods do
+        def keystone_host_colors(**options)
+          before_action :keystone_keep_host_colours, **options
+        end
       end
 
       def keystone_component_preference(component_key)
@@ -22,6 +28,19 @@ module KeystoneUi
         }
       end
 
+      def keystone_palette_style_tag
+        colours = keystone_appearance_choice.colours
+        helpers.content_tag(:style, PaletteCss.new(**colours).to_s)
+      end
+
+      def keystone_theme_mode
+        keystone_appearance_choice.mode
+      end
+
+      def keystone_look
+        keystone_appearance_choice.look
+      end
+
       def keystone_layout_choice(component_key)
         LayoutChoice.new(person: send(KeystoneUi::Preferences.configuration.current_owner_method), account: keystone_preferences_account, component_key: component_key)
       end
@@ -30,6 +49,22 @@ module KeystoneUi
         method = KeystoneUi::Preferences.configuration.current_account_method
         send(method) if method
       end
+
+      private
+
+      def keystone_keep_host_colours
+        @keystone_host_colours = true
+      end
+
+      def keystone_appearance_choice
+        return AppearanceChoice.new(person: nil, account: nil) if @keystone_host_colours
+
+        AppearanceChoice.new(person: send(KeystoneUi::Preferences.configuration.current_owner_method), account: keystone_preferences_account)
+      end
+
+      def after_settings_change(section:, **)
+        cookies.delete(KeystoneUi::ThemeChoice::COOKIE) if section.runs.to_s == PickAppearance.name
+      end
     end
   end
 end

data/app/javascript/keystone_ui/preferences/theme_settings_controller.js

@@ -0,0 +1,59 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["accentPicker", "surfacePicker", "textPicker", "customRadio", "templateLabel"]
+
+  connect() {
+    this.colorPickerTargets().forEach(picker => picker.addEventListener("change", () => this.customColorChanged()))
+  }
+
+  colorPickerTargets() {
+    return [
+      this.hasAccentPickerTarget && this.accentPickerTarget,
+      this.hasSurfacePickerTarget && this.surfacePickerTarget,
+      this.hasTextPickerTarget && this.textPickerTarget
+    ].filter(Boolean)
+  }
+
+  selectTemplate(event) {
+    const input = event.currentTarget
+    const label = input.closest("[data-template]")
+    const accentHex = input.dataset.accentHex
+    const surfaceHex = input.dataset.surfaceHex
+    const textHex = input.dataset.textHex
+
+    this.setPickerValue(this.accentPickerTarget, accentHex)
+    this.setPickerValue(this.surfacePickerTarget, surfaceHex)
+    this.setPickerValue(this.textPickerTarget, textHex)
+
+    this.highlightTemplate(label.dataset.template)
+  }
+
+  customColorChanged() {
+    if (this.hasCustomRadioTarget) this.customRadioTarget.checked = true
+    this.highlightTemplate("custom")
+  }
+
+  highlightTemplate(selected) {
+    this.templateLabelTargets.forEach(label => {
+      const border = label.querySelector("span")
+      if (label.dataset.template === selected) {
+        border.classList.remove("border-transparent")
+        border.classList.add("border-accent-500")
+      } else {
+        border.classList.remove("border-accent-500")
+        border.classList.add("border-transparent")
+      }
+    })
+  }
+
+  setPickerValue(wrapper, hex) {
+    const input = wrapper.querySelector("input[type='hidden']")
+    const swatch = wrapper.querySelector("[data-color-picker-target='swatch']")
+    const hexLabel = wrapper.querySelector("[data-color-picker-target='hexLabel']")
+
+    if (input) input.value = hex
+    if (swatch) swatch.style.backgroundColor = hex
+    if (hexLabel) hexLabel.textContent = hex
+  }
+}

data/app/models/keystone_ui/preferences/appearance_choice.rb

@@ -0,0 +1,107 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Preferences
+    class AppearanceChoice
+      DEFAULT_TEMPLATE = "default"
+      HEX = /\A#\h{6}\z/
+      PALETTE_NAME = /\A[a-z][a-z0-9_]*\z/
+      WHITE = "#ffffff"
+
+      def initialize(person:, account:)
+        @person = person
+        @account = account
+      end
+
+      def colours
+        @colours ||= chosen_colours
+      end
+
+      def mode
+        LayoutChoice.new(person: @person, account: nil, component_key: "mode").value.to_h["mode"] || configuration.default_mode
+      end
+
+      def look
+        return nil unless @person
+
+        [ (saved_look(@person) if person_chooses_look?), (saved_look(@account) if configuration.account_looks) ].find { |look| KeystoneUi.configuration.looks.key?(look) }
+      end
+
+      def person_chooses_look?
+        configuration.user_looks && LayoutChoice.new(person: @person, account: @account, component_key: "look").members_choose?
+      end
+
+      def custom_offered?
+        !colours[:background].casecmp?(WHITE)
+      end
+
+      private
+
+      def chosen_colours
+        return default_colours unless configuration.account_colors
+        return default_colours if saved["template_name"] == DEFAULT_TEMPLATE
+        return template_colours if template_offered?
+        return fallback_colours if saved["template_name"].present?
+
+        surface = catalogue_colour("surface", KeystoneUi::Looks::Palettes::SURFACES) || configuration.default_surface
+        {
+          accent: catalogue_colour("accent", KeystoneUi::Looks::Palettes::ACCENTS) || configuration.default_accent,
+          surface: surface,
+          background: surface.start_with?("#") ? surface : configuration.default_background,
+          text: (saved["text"] if saved["text"].to_s.match?(HEX)) || configuration.default_text
+        }
+      end
+
+      def saved_look(owner)
+        LayoutChoice.new(person: owner, account: nil, component_key: "look").value.to_h["look"]
+      end
+
+      def catalogue_colour(kind, palettes)
+        value = saved[kind].to_s
+        return value if value.match?(HEX)
+        return unless value.match?(PALETTE_NAME)
+        return value if palettes.key?(value.to_sym)
+
+        warn_missing(kind, value)
+        nil
+      end
+
+      def default_colours
+        { accent: configuration.default_accent, surface: configuration.default_surface, background: configuration.default_background, text: configuration.default_text }
+      end
+
+      def fallback_colours
+        warn_missing("template", saved["template_name"])
+        return default_colours if @account.nil? || colours_choice.preference.owned_by?(@account)
+
+        AppearanceChoice.new(person: @account, account: nil).colours
+      end
+
+      def warn_missing(kind, name)
+        row = colours_choice.preference
+        Rails.logger.warn("keystone_ui-preferences: #{row.owner_type} #{row.owner_id} saved the #{kind} #{name.to_s.inspect}, which keystone_ui-looks does not have")
+      end
+
+      def template_offered?
+        KeystoneUi::Looks::Templates.names.map(&:to_s).include?(saved["template_name"].to_s)
+      end
+
+      def template_colours
+        template = KeystoneUi::Looks::Templates[saved["template_name"]]
+        { accent: template[:accent].to_s, surface: template[:surface].to_s, background: template[:background], text: template[:text] }
+      end
+
+      def saved
+        @saved ||= colours_choice.value.to_h
+      end
+
+      def colours_choice
+        @colours_choice ||= LayoutChoice.new(person: @person, account: @account, component_key: "colours")
+      end
+
+      def configuration
+        KeystoneUi::Preferences.configuration
+      end
+    end
+  end
+end

data/app/models/keystone_ui/preferences/chosen_colours.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Preferences
+    class ChosenColours
+      def initialize(values)
+        @values = values
+      end
+
+      def refusal
+        return Refusal.new("Choose Default, one of the colour templates or Custom.") unless template_offered?
+
+        Refusal.new("Choose each colour as a six-digit hex value, such as #1d4ed8.") unless colours_offered?
+      end
+
+      def value
+        return { "template_name" => @values[:template_name] } if @values[:template_name].present?
+
+        { "accent" => @values[:accent], "surface" => @values[:surface], "text" => @values[:text] }
+      end
+
+      private
+
+      def template_offered?
+        @values[:template_name].blank? || [ AppearanceChoice::DEFAULT_TEMPLATE, *KeystoneUi::Looks::Templates.names.map(&:to_s) ].include?(@values[:template_name])
+      end
+
+      def colours_offered?
+        return true if @values[:template_name].present?
+
+        colour_offered?(@values[:accent], KeystoneUi::Looks::Palettes::ACCENTS) && colour_offered?(@values[:surface], KeystoneUi::Looks::Palettes::SURFACES) && colour_offered?(@values[:text], {})
+      end
+
+      def colour_offered?(colour, palettes)
+        colour.to_s.match?(AppearanceChoice::HEX) || palettes.key?(colour.to_s.to_sym)
+      end
+    end
+  end
+end

data/app/models/keystone_ui/preferences/layout_choice.rb

@@ -12,9 +12,13 @@ module KeystoneUi
       end
 
       def value
-        return account_preference.value unless members_choose?
+        preference&.value
+      end
+
+      def preference
+        return account_preference unless members_choose?
 
-        (own_preference || account_preference)&.value
+        own_preference || account_preference
       end
 
       def members_choose?

data/app/models/keystone_ui/preferences/palette_css.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Preferences
+    class PaletteCss
+      def initialize(accent:, surface:, background:, text:)
+        @accent = accent
+        @surface = surface
+        @background = background
+        @text = text
+      end
+
+      def to_s
+        lines = shade_lines("accent", shades(@accent) { KeystoneUi::Looks::Palettes.accent(@accent) }) + shade_lines("surface", shades(@surface) { KeystoneUi::Looks::Palettes.surface(@surface) })
+        lines << "  --color-custom-background: #{@background};" << "  --color-custom-text: #{@text};"
+        ":root {\n#{lines.join("\n")}\n}"
+      end
+
+      private
+
+      def shades(colour)
+        return KeystoneUi::Looks::Palettes.generate_shades(colour) if colour.start_with?("#")
+
+        yield
+      end
+
+      def shade_lines(name, shades)
+        shades.map { |shade, hex| "  --color-#{name}-#{shade}: #{hex};" }
+      end
+    end
+  end
+end

data/app/models/keystone_ui/preferences/pick_account_appearance.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Preferences
+    class PickAccountAppearance
+      def initialize(values:, person: nil, account: nil)
+        @person = person
+        @account = account
+        @values = values
+      end
+
+      def call
+        return Refusal.new("There is no account to save this appearance on.") unless @account
+        return Refusal.new("Choose the app's own look or one of the looks it offers.") unless look_offered?
+
+        return Refusal.new("This app does not let accounts choose their colours.") if colours_sent? && !KeystoneUi::Preferences.configuration.account_colors
+
+        chosen = ChosenColours.new(@values) if colours_sent?
+        return chosen.refusal if chosen&.refusal
+
+        keep("colours", (chosen ? { value: chosen.value } : {}).merge(switch(:members_choose)))
+        keep_look
+        Kept.new
+      end
+
+      private
+
+      def colours_sent?
+        @values.key?(:template_name)
+      end
+
+      def look_offered?
+        !look_sent? || @values[:look].blank? || KeystoneUi.configuration.looks.key?(@values[:look])
+      end
+
+      def keep_look
+        chosen = look_sent? ? { value: { "look" => @values[:look].presence }.compact } : {}
+        keep("look", chosen.merge(switch(:members_choose_look)))
+      end
+
+      def look_sent?
+        @values.key?(:look) && KeystoneUi::Preferences.configuration.account_looks
+      end
+
+      def keep(component_key, changes)
+        ComponentPreference.find_or_initialize_by(owner: @account, component_key: component_key).update!(changes) if changes.any?
+      end
+
+      def switch(name)
+        @values.key?(name) ? { members_choose: @values[name] == "1" } : {}
+      end
+    end
+  end
+end

data/app/models/keystone_ui/preferences/pick_appearance.rb

@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Preferences
+    class PickAppearance
+      def initialize(values:, person: nil, account: nil)
+        @person = person
+        @account = account
+        @values = values
+      end
+
+      def call
+        return Refusal.new("Choose Light, Dark, System or Custom for the mode.") unless mode_offered?
+        return Refusal.new("Choose the app's own look or one of the looks it offers.") unless look_offered?
+        return keep_mode_and_look unless @values.key?(:template_name)
+        return Refusal.new("This app sets the colours for everyone, so this was not saved.") unless KeystoneUi::Preferences.configuration.account_colors
+        return Refusal.new("Your account sets the colours for everyone, so this was not saved.") unless members_choose?
+        return use_default if @values[:template_name] == AppearanceChoice::DEFAULT_TEMPLATE
+
+        chosen = ChosenColours.new(@values)
+        return chosen.refusal if chosen.refusal
+
+        preference.update!(value: chosen.value)
+        keep_mode_and_look
+      end
+
+      private
+
+      def mode_offered?
+        !@values.key?(:mode) || KeystoneUi::ThemeChoice::MODES.include?(@values[:mode])
+      end
+
+      def look_offered?
+        !look_sent? || @values[:look].blank? || KeystoneUi.configuration.looks.key?(@values[:look])
+      end
+
+      def members_choose?
+        LayoutChoice.new(person: @person, account: @account, component_key: "colours").members_choose?
+      end
+
+      def use_default
+        preference.destroy! if preference.persisted?
+        keep_mode_and_look
+      end
+
+      def keep_mode_and_look
+        keep_mode
+        keep_look
+        Kept.new
+      end
+
+      def keep_mode
+        return unless @values.key?(:mode)
+
+        ComponentPreference.find_or_initialize_by(owner: @person, component_key: "mode").update!(value: { "mode" => @values[:mode] })
+      end
+
+      def keep_look
+        return unless look_sent?
+        return look_preference.update!(value: { "look" => @values[:look] }) if @values[:look].present?
+
+        look_preference.destroy! if look_preference.persisted?
+      end
+
+      def look_sent?
+        @values.key?(:look) && AppearanceChoice.new(person: @person, account: @account).person_chooses_look?
+      end
+
+      def look_preference
+        @look_preference ||= ComponentPreference.find_or_initialize_by(owner: @person, component_key: "look")
+      end
+
+      def preference
+        @preference ||= ComponentPreference.find_or_initialize_by(owner: @person, component_key: "colours")
+      end
+    end
+  end
+end

data/app/views/keystone_ui/preferences/settings/_account_appearance.html.erb

@@ -0,0 +1,41 @@
+<%
+  colours = KeystoneUi::Preferences::ComponentPreference.find_by(owner: account, component_key: "colours")
+  saved = colours&.value.presence || { "template_name" => "default" }
+  look = KeystoneUi::Preferences::ComponentPreference.find_by(owner: account, component_key: "look")
+  offers_colours = KeystoneUi::Preferences.configuration.account_colors
+  offers_look = KeystoneUi::Preferences.configuration.account_looks && KeystoneUi.configuration.looks.any?
+  drawn = KeystoneUi::Preferences::AppearanceChoice.new(person: account, account: nil).colours
+%>
+
+<% if !offers_colours && !offers_look %>
+  <%= ui_alert(message: "This app does not let accounts choose their colours or look.") %>
+<% else %>
+<%= ui_panel(padding: :lg) do %>
+  <%= form_with(url: submit_url, method: :patch, data: { turbo: false, controller: "keystone-ui--preferences--theme-settings" }) do %>
+    <div style="display: flex; flex-direction: column; gap: 2rem;">
+      <% if offers_colours %>
+        <%= render partial: "keystone_ui/preferences/settings/colour_choices", locals: { saved: saved, drawn: drawn } %>
+      <% end %>
+
+      <% if offers_look %>
+        <%= render partial: "keystone_ui/preferences/settings/look_choices", locals: { saved_look: look&.value.to_h["look"] } %>
+      <% end %>
+
+      <%= ui_section(title: "Members", spacing: :sm) do %>
+        <% if offers_colours %>
+          <%= hidden_field_tag "members_choose", "0", id: nil %>
+          <%= ui_checkbox_row(name: "members_choose", value: "1", label: "Members choose their own colours", checked: colours.nil? || colours.members_choose) %>
+        <% end %>
+        <% if offers_look %>
+          <%= hidden_field_tag "members_choose_look", "0", id: nil %>
+          <%= ui_checkbox_row(name: "members_choose_look", value: "1", label: "Members choose their own look", checked: look.nil? || look.members_choose) %>
+        <% end %>
+      <% end %>
+
+      <div>
+        <%= ui_button(label: "Save", type: :submit) %>
+      </div>
+    </div>
+  <% end %>
+<% end %>
+<% end %>

data/app/views/keystone_ui/preferences/settings/_appearance.html.erb

@@ -0,0 +1,40 @@
+<%
+  choice = KeystoneUi::Preferences::LayoutChoice.new(person: person, account: account, component_key: "colours")
+  configuration = KeystoneUi::Preferences.configuration
+  chooses_colours = configuration.account_colors && choice.members_choose?
+  appearance = KeystoneUi::Preferences::AppearanceChoice.new(person: person, account: account)
+  drawn = appearance.colours
+  saved = KeystoneUi::Preferences::ComponentPreference.find_by(owner: person, component_key: "colours")&.value || { "template_name" => "default" }
+  saved_look = KeystoneUi::Preferences::ComponentPreference.find_by(owner: person, component_key: "look")&.value.to_h["look"]
+%>
+
+<% if configuration.account_colors && !choice.members_choose? %>
+  <%= ui_alert(message: "Your account sets the colours for everyone.") %>
+<% end %>
+
+<%= ui_panel(padding: :lg) do %>
+  <%= form_with(url: submit_url, method: :patch, data: { turbo: false, controller: "keystone-ui--preferences--theme-settings" }) do %>
+    <div style="display: flex; flex-direction: column; gap: 2rem;">
+      <% if chooses_colours %>
+        <%= render partial: "keystone_ui/preferences/settings/colour_choices", locals: { saved: saved, drawn: drawn } %>
+      <% end %>
+
+      <% if appearance.person_chooses_look? && KeystoneUi.configuration.looks.any? %>
+        <%= render partial: "keystone_ui/preferences/settings/look_choices", locals: { saved_look: saved_look } %>
+      <% end %>
+
+      <%= ui_section(title: "Mode", spacing: :sm) do %>
+        <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
+          <% KeystoneUi::ThemeChoice::MODES.each do |mode| %>
+            <% next if mode == "custom" && !(chooses_colours || appearance.custom_offered?) %>
+            <%= ui_radio_card(name: "mode", value: mode, label: mode.capitalize, checked: appearance.mode == mode) %>
+          <% end %>
+        </div>
+      <% end %>
+
+      <div>
+        <%= ui_button(label: "Save", type: :submit) %>
+      </div>
+    </div>
+  <% end %>
+<% end %>

data/app/views/keystone_ui/preferences/settings/_colour_choices.html.erb

@@ -0,0 +1,66 @@
+<%
+  configuration = KeystoneUi::Preferences.configuration
+  palette_hex = ->(colour, palette) { colour.to_s.start_with?("#") ? colour.to_s : palette.call(colour)[500] }
+  templates = { "default" => { accent: configuration.default_accent, surface: configuration.default_surface, text: configuration.default_text, label: "Default" } }
+  KeystoneUi::Looks::Templates.all.each { |name, template| templates[name.to_s] = template }
+%>
+
+<%= ui_section(title: "Theme", spacing: :sm) do %>
+  <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
+    <% templates.each do |name, template| %>
+      <% accent_hex = palette_hex.call(template[:accent], KeystoneUi::Looks::Palettes.method(:accent)) %>
+      <% surface_hex = palette_hex.call(template[:surface], KeystoneUi::Looks::Palettes.method(:surface)) %>
+      <%= ui_option_card(
+        name: "template_name",
+        value: name,
+        selected: saved["template_name"] == name,
+        input_data: {
+          action: "keystone-ui--preferences--theme-settings#selectTemplate",
+          "accent-hex": accent_hex,
+          "surface-hex": surface_hex,
+          "text-hex": template[:text]
+        },
+        label_data: {
+          "keystone-ui--preferences--theme-settings-target": "templateLabel",
+          template: name
+        }
+      ) do %>
+        <span style="display: inline-block; width: 1rem; height: 1rem; border-radius: 9999px; background-color: <%= accent_hex %>;"></span>
+        <span style="display: inline-block; width: 1rem; height: 1rem; border-radius: 0.25rem; background-color: <%= surface_hex %>;"></span>
+        <span><%= template[:label] %></span>
+      <% end %>
+    <% end %>
+    <%= ui_option_card(
+      name: "template_name",
+      value: "",
+      selected: saved["template_name"].blank?,
+      input_data: {
+        "keystone-ui--preferences--theme-settings-target": "customRadio"
+      },
+      label_data: {
+        "keystone-ui--preferences--theme-settings-target": "templateLabel",
+        template: "custom"
+      }
+    ) do %>
+      <span>Custom</span>
+    <% end %>
+  </div>
+<% end %>
+
+<%= ui_section(title: "Accent Color", spacing: :sm) do %>
+  <div data-keystone-ui--preferences--theme-settings-target="accentPicker">
+    <%= ui_color_picker(name: "accent", value: palette_hex.call(drawn[:accent], KeystoneUi::Looks::Palettes.method(:accent))) %>
+  </div>
+<% end %>
+
+<%= ui_section(title: "Surface", spacing: :sm) do %>
+  <div data-keystone-ui--preferences--theme-settings-target="surfacePicker">
+    <%= ui_color_picker(name: "surface", value: palette_hex.call(drawn[:surface], KeystoneUi::Looks::Palettes.method(:surface))) %>
+  </div>
+<% end %>
+
+<%= ui_section(title: "Text Color", spacing: :sm) do %>
+  <div data-keystone-ui--preferences--theme-settings-target="textPicker">
+    <%= ui_color_picker(name: "text", value: drawn[:text]) %>
+  </div>
+<% end %>

data/app/views/keystone_ui/preferences/settings/_look_choices.html.erb

@@ -0,0 +1,8 @@
+<%= ui_section(title: "Look", spacing: :sm) do %>
+  <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
+    <%= ui_radio_card(name: "look", value: "", label: KeystoneUi::Preferences.configuration.app_look_label, checked: saved_look.nil?) %>
+    <% KeystoneUi.configuration.looks.each_key do |look| %>
+      <%= ui_radio_card(name: "look", value: look, label: look.humanize, checked: saved_look == look) %>
+    <% end %>
+  </div>
+<% end %>

data/lib/generators/keystone_ui/preferences/install/install_generator.rb

@@ -11,7 +11,7 @@ module KeystoneUi
 
         source_root File.expand_path("templates", __dir__)
 
-        desc "Installs KeystoneUi::Preferences: copies its migration."
+        desc "Installs KeystoneUi::Preferences: copies its migration and its template picker script."
 
         def copy_migration
           migration_template(
@@ -19,6 +19,11 @@ module KeystoneUi
             "db/migrate/create_keystone_ui_preferences_component_preferences.rb"
           )
         end
+
+        def copy_template_picker_script
+          script = File.expand_path("../../../../../app/javascript/keystone_ui/preferences/theme_settings_controller.js", __dir__)
+          create_file "app/javascript/controllers/keystone_ui/preferences/theme_settings_controller.js", File.read(script)
+        end
       end
     end
   end

data/lib/generators/keystone_ui/preferences/update/templates/copy_keystone_ui_colors_theme_preferences.rb.erb

@@ -0,0 +1,55 @@
+class CopyKeystoneUiColorsThemePreferences < ActiveRecord::Migration[<%= ActiveRecord::Migration.current_version %>]
+  class ThemePreference < ActiveRecord::Base
+    self.table_name = "keystone_ui_colors_theme_preferences"
+  end
+
+  class ComponentPreference < ActiveRecord::Base
+    self.table_name = "keystone_ui_preferences_component_preferences"
+  end
+
+  def up
+    return unless table_exists?(:keystone_ui_colors_theme_preferences)
+
+    ThemePreference.find_in_batches do |theme_preferences|
+      rows = theme_preferences.flat_map { |theme_preference| [ colours(theme_preference), mode(theme_preference), look(theme_preference) ].compact }
+      saved = saved_keys(theme_preferences)
+      missing = rows.reject { |row| saved.include?(row.values_at(:owner_type, :owner_id, :component_key)) }
+      ComponentPreference.insert_all(missing) if missing.any?
+      missing.each { |row| Rails.cache.delete([ "keystone_ui_preferences", *row.values_at(:owner_type, :owner_id, :component_key) ].join("/")) }
+    end
+  end
+
+  private
+
+  def saved_keys(theme_preferences)
+    theme_preferences.group_by(&:owner_type).flat_map do |owner_type, owned|
+      ComponentPreference.where(owner_type: owner_type, owner_id: owned.map(&:owner_id), component_key: %w[colours mode look]).pluck(:owner_type, :owner_id, :component_key)
+    end.to_set
+  end
+
+  def colours(theme_preference)
+    row(theme_preference, "colours", colours_value(theme_preference), members_choose: theme_preference.members_choose)
+  end
+
+  def mode(theme_preference)
+    return nil if theme_preference.mode.blank?
+
+    row(theme_preference, "mode", { "mode" => theme_preference.mode })
+  end
+
+  def look(theme_preference)
+    return nil if theme_preference.look.blank? && theme_preference.members_choose_look
+
+    row(theme_preference, "look", { "look" => theme_preference.look.presence }.compact, members_choose: theme_preference.members_choose_look)
+  end
+
+  def colours_value(theme_preference)
+    return { "template_name" => theme_preference.template_name } if theme_preference.template_name.present?
+
+    { "accent" => theme_preference.accent, "surface" => theme_preference.surface, "text" => theme_preference.text }
+  end
+
+  def row(theme_preference, component_key, value, members_choose: true)
+    { owner_type: theme_preference.owner_type, owner_id: theme_preference.owner_id, component_key: component_key, value: value, members_choose: members_choose }
+  end
+end

data/lib/generators/keystone_ui/preferences/update/update_generator.rb

@@ -11,7 +11,7 @@ module KeystoneUi
 
         source_root File.expand_path("templates", __dir__)
 
-        desc "Updates KeystoneUi::Preferences: copies migrations added since it was installed."
+        desc "Updates KeystoneUi::Preferences: copies migrations added since it was installed and the template picker script when the app has none."
 
         def copy_remove_extra_owner_index_migration
           migration_template(
@@ -19,6 +19,20 @@ module KeystoneUi
             "db/migrate/remove_extra_owner_index_from_keystone_ui_preferences_component_preferences.rb"
           )
         end
+
+        def copy_keystone_ui_colors_theme_preferences_migration
+          migration_template(
+            "copy_keystone_ui_colors_theme_preferences.rb.erb",
+            "db/migrate/copy_keystone_ui_colors_theme_preferences.rb"
+          )
+        end
+
+        def copy_template_picker_script
+          copy = "app/javascript/controllers/keystone_ui/preferences/theme_settings_controller.js"
+          return if File.exist?(File.join(destination_root, copy))
+
+          create_file copy, File.read(File.expand_path("../../../../../app/javascript/keystone_ui/preferences/theme_settings_controller.js", __dir__))
+        end
       end
     end
   end

data/lib/keystone_ui/preferences/colors_check.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Preferences
+    class ColorsCheck
+      class Error < StandardError; end
+
+      MESSAGE = "keystone_ui-preferences and keystone_ui-colors both save colours, modes and looks, so the app cannot load both. " \
+        "Run bin/rails generate keystone_ui:preferences:update first, so the migration copying keystone_ui-colors' saved choices is in db/migrate, " \
+        "then remove keystone_ui-colors from the Gemfile and run bin/rails db:migrate."
+
+      def initialize(colors_loaded:)
+        @colors_loaded = colors_loaded
+      end
+
+      def call
+        raise Error, MESSAGE if @colors_loaded
+      end
+    end
+  end
+end

data/lib/keystone_ui/preferences/configuration.rb

@@ -3,13 +3,22 @@
 module KeystoneUi
   module Preferences
     class Configuration
-      attr_accessor :current_owner_method, :authentication_method, :current_account_method, :max_value_bytes
+      attr_accessor :current_owner_method, :authentication_method, :current_account_method, :max_value_bytes, :default_accent, :default_surface, :default_background, :default_text, :default_mode, :user_looks, :app_look_label, :account_colors, :account_looks
 
       def initialize
         @current_owner_method = :current_user
         @authentication_method = :authenticate_user!
         @component_names = {}
         @max_value_bytes = 10_000
+        @default_accent = "blue"
+        @default_surface = "zinc"
+        @default_background = "#ffffff"
+        @default_text = "#18181b"
+        @default_mode = "light"
+        @user_looks = true
+        @app_look_label = "Classic"
+        @account_colors = true
+        @account_looks = true
       end
 
       def name_component(component_key, name)

data/lib/keystone_ui/preferences/engine.rb

@@ -1,10 +1,20 @@
 # frozen_string_literal: true
 
+require "keystone_ui/preferences/colors_check"
+
 module KeystoneUi
   module Preferences
     class Engine < ::Rails::Engine
       isolate_namespace KeystoneUi::Preferences
 
+      def self.check_colors
+        KeystoneUi::Preferences::ColorsCheck.new(colors_loaded: KeystoneUi.const_defined?(:Colors, false)).call
+      end
+
+      config.after_initialize do
+        KeystoneUi::Preferences::Engine.check_colors
+      end
+
       initializer "keystone_ui.preferences.supplier" do
         KeystoneUi.configure do |config|
           config.preference_supplier = lambda do |view, component_key|
@@ -12,6 +22,20 @@ module KeystoneUi
           end
         end
       end
+
+      initializer "keystone_ui.preferences.theme_mode" do
+        KeystoneUi.configure do |config|
+          config.theme_mode_supplier = lambda do |view|
+            view.respond_to?(:keystone_theme_mode) ? view.keystone_theme_mode : KeystoneUi::Preferences.configuration.default_mode
+          end
+        end
+      end
+
+      initializer "keystone_ui.preferences.look" do
+        KeystoneUi.configure do |config|
+          config.look_supplier = ->(view) { view.keystone_look if view.respond_to?(:keystone_look) }
+        end
+      end
     end
   end
 end

data/lib/keystone_ui/preferences/version.rb

@@ -2,6 +2,6 @@
 
 module KeystoneUi
   module Preferences
-    VERSION = "0.6.0"
+    VERSION = "0.7.0"
   end
 end

data/lib/keystone_ui/preferences.rb

@@ -1,5 +1,6 @@
 require "keystone_ui"
 require "keystone_ui/navigation_order"
+require "keystone_ui/looks"
 require "keystone_ui/preferences/version"
 require "keystone_ui/preferences/configuration"
 require "keystone_ui/preferences/engine"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: keystone_ui-preferences
 version: !ruby/object:Gem::Version
-  version: 0.6.0
+  version: 0.7.0
 platform: ruby
 authors:
 - Tyler Schneider
@@ -23,6 +23,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 0.41.0
+- !ruby/object:Gem::Dependency
+  name: keystone_ui-looks
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.3.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.3.0
 - !ruby/object:Gem::Dependency
   name: railties
   requirement: !ruby/object:Gem::Requirement
@@ -79,25 +93,37 @@ files:
 - app/controllers/concerns/keystone_ui/preferences/component_preferences.rb
 - app/controllers/keystone_ui/preferences/application_controller.rb
 - app/controllers/keystone_ui/preferences/component_preferences_controller.rb
+- app/javascript/keystone_ui/preferences/theme_settings_controller.js
+- app/models/keystone_ui/preferences/appearance_choice.rb
 - app/models/keystone_ui/preferences/application_record.rb
+- app/models/keystone_ui/preferences/chosen_colours.rb
 - app/models/keystone_ui/preferences/component_preference.rb
 - app/models/keystone_ui/preferences/kept.rb
 - app/models/keystone_ui/preferences/layout_choice.rb
 - app/models/keystone_ui/preferences/navigation_arrangement.rb
+- app/models/keystone_ui/preferences/palette_css.rb
+- app/models/keystone_ui/preferences/pick_account_appearance.rb
 - app/models/keystone_ui/preferences/pick_account_layouts.rb
+- app/models/keystone_ui/preferences/pick_appearance.rb
 - app/models/keystone_ui/preferences/pick_navigation_order.rb
 - app/models/keystone_ui/preferences/pick_navigation_placement.rb
 - app/models/keystone_ui/preferences/refusal.rb
+- app/views/keystone_ui/preferences/settings/_account_appearance.html.erb
 - app/views/keystone_ui/preferences/settings/_account_layouts.html.erb
+- app/views/keystone_ui/preferences/settings/_appearance.html.erb
+- app/views/keystone_ui/preferences/settings/_colour_choices.html.erb
+- app/views/keystone_ui/preferences/settings/_look_choices.html.erb
 - app/views/keystone_ui/preferences/settings/_navigation_order.html.erb
 - app/views/keystone_ui/preferences/settings/_navigation_placement.html.erb
 - config/routes.rb
 - lib/generators/keystone_ui/preferences/install/install_generator.rb
 - lib/generators/keystone_ui/preferences/install/templates/create_keystone_ui_preferences_component_preferences.rb.erb
+- lib/generators/keystone_ui/preferences/update/templates/copy_keystone_ui_colors_theme_preferences.rb.erb
 - lib/generators/keystone_ui/preferences/update/templates/remove_extra_owner_index_from_keystone_ui_preferences_component_preferences.rb.erb
 - lib/generators/keystone_ui/preferences/update/update_generator.rb
 - lib/keystone_ui-preferences.rb
 - lib/keystone_ui/preferences.rb
+- lib/keystone_ui/preferences/colors_check.rb
 - lib/keystone_ui/preferences/configuration.rb
 - lib/keystone_ui/preferences/engine.rb
 - lib/keystone_ui/preferences/version.rb