CRUD on instance colors. renders in UI.

lib/graphql/resolvers/admin.ex

@@ -267,7 +267,7 @@ defmodule Mobilizon.GraphQL.Resolvers.Admin do
         context: %{current_user: %User{role: role}}
       })
       when is_admin(role) do
-    with {:ok, res} <- Admin.save_settings("instance", IO.inspect(args, label: "SAVE_ARGS")),
+    with {:ok, res} <- Admin.save_settings("instance", args),
          res <-
            res
            |> Enum.map(fn {key, val} ->

lib/graphql/resolvers/config.ex

@@ -39,11 +39,6 @@ defmodule Mobilizon.GraphQL.Resolvers.Config do
     {:ok, MediaResolver.transform_media(Config.instance_logo())}
   end
 
-  @spec instance_favicon(any(), map(), Absinthe.Resolution.t()) :: {:ok, Media.t()}
-  def instance_favicon(_parent, _params, _resolution) do
-    {:ok, MediaResolver.transform_media(Config.instance_favicon())}
-  end
-
   @spec default_picture(any(), map(), Absinthe.Resolution.t()) :: {:ok, Media.t()}
   def default_picture(_parent, _params, _resolution) do
     {:ok, MediaResolver.transform_media(Config.default_picture())}
@@ -117,7 +112,8 @@ defmodule Mobilizon.GraphQL.Resolvers.Config do
       slogan: Config.instance_slogan(),
       languages: Config.instance_languages(),
       instance_logo: Config.instance_logo(),
-      instance_favicon: Config.instance_favicon(),
+      primary_color: Config.primary_color(),
+      secondary_color: Config.secondary_color(),
       default_picture: Config.default_picture(),
       anonymous: %{
         participation: %{

lib/graphql/schema/admin.ex

@@ -137,6 +137,9 @@ defmodule Mobilizon.GraphQL.Schema.AdminType do
       resolve: &Admin.get_default_picture/3
     )
 
+    field(:primary_color, :string, description: "The instance's primary color")
+    field(:secondary_color, :string, description: "The instance's secondary color")
+
     field(:instance_privacy_policy, :string,
       description: "The instance's privacy policy body text"
     )
@@ -439,6 +442,9 @@ defmodule Mobilizon.GraphQL.Schema.AdminType do
           "The default picture, either as an object or directly the ID of an existing media"
       )
 
+      arg(:primary_color, :string, description: "The instance's primary color")
+      arg(:secondary_color, :string, description: "The instance's secondary color")
+
       arg(:instance_terms, :string, description: "The instance's terms body text")
       arg(:instance_terms_type, :instance_terms_type, description: "The instance's terms type")
       arg(:instance_terms_url, :string, description: "The instance's terms URL")

lib/graphql/schema/config.ex

@@ -63,14 +63,13 @@ defmodule Mobilizon.GraphQL.Schema.ConfigType do
       resolve(&Config.instance_logo/3)
     end
 
-    field(:instance_favicon, :media, description: "The instance's favicon") do
-      resolve(&Config.instance_favicon/3)
-    end
-
     field(:default_picture, :media, description: "The default picture") do
       resolve(&Config.default_picture/3)
     end
 
+    field(:primary_color, :string, description: "The instance's primary color")
+    field(:secondary_color, :string, description: "The instance's secondary color")
+
     field(:privacy, :privacy, description: "The instance's privacy policy") do
       arg(:locale, :string,
         default_value: "en",

lib/mobilizon/admin/admin.ex

@@ -181,8 +181,6 @@ defmodule Mobilizon.Admin do
   @spec save_settings(String.t(), map()) :: {:ok, any} | {:error, any}
   def save_settings(group, args) do
     {medias, values} = Map.split(args, [:instance_logo, :instance_favicon, :default_picture])
-    IO.inspect(medias, label: "MEDIAS")
-    IO.inspect(values, label: "VALUES")
 
     Multi.new()
     |> do_save_media_setting(group, medias)

lib/mobilizon/config.ex

@@ -87,6 +87,12 @@ defmodule Mobilizon.Config do
   @spec default_picture :: Media.t() | nil
   def default_picture, do: config_cached_value( "instance", "default_picture")
 
+  @spec primary_color :: Media.t() | nil
+  def primary_color, do: config_cached_value( "instance", "primary_color")
+
+  @spec secondary_color :: Media.t() | nil
+  def secondary_color, do: config_cached_value( "instance", "secondary_color")
+
   @spec contact :: String.t() | nil
   def contact, do: config_cached_value("instance", "contact")
 
@@ -440,6 +446,8 @@ defmodule Mobilizon.Config do
       instance_slogan: instance_slogan(),
       registrations_open: instance_registrations_open?(),
       contact: contact(),
+      primary_color: primary_color(),
+      secondary_color: secondary_color(),
       instance_logo: instance_logo(),
       instance_terms: instance_terms(),
       instance_terms_type: instance_terms_type(),

schema.graphql

@@ -172,12 +172,15 @@ type Config {
   "The instance's logo"
   instanceLogo: Media
 
-  "The instance's favicon"
-  instanceFavicon: Media
-
   "The default picture"
   defaultPicture: Media
 
+  "The instance's primary color"
+  primaryColor: String
+
+  "The instance's secondary color"
+  secondaryColor: String
+
   "The instance's contact details"
   contact: String
 

src/composition/apollo/config.ts

@@ -10,7 +10,7 @@ import {
   EVENT_PARTICIPANTS,
   FEATURES,
   GEOCODING_AUTOCOMPLETE,
-  INSTANCE_FAVICON,
+  COLORS,
   INSTANCE_LOGO,
   LOCATION,
   MAPS_TILES,
@@ -90,15 +90,18 @@ export function useInstanceLogoUrl() {
   return { instanceLogoUrl, error, loading };
 }
 
-export function useInstanceFaviconUrl() {
+export function useColors() {
   const { result, error, loading } = useQuery<{
-    config: Pick<IConfig, "instanceFavicon">;
+    config: Pick<IConfig, "primaryColor" | "secondaryColor">;
-  }>(INSTANCE_FAVICON);
+  }>(COLORS);
 
-  const instanceFaviconUrl = computed(
+  const primaryColor = computed(
-    () => result.value?.config?.instanceFavicon?.url
+    () => result.value?.config?.primaryColor
   );
-  return { instanceFaviconUrl, error, loading };
+  const secondaryColor = computed(
+    () => result.value?.config?.secondaryColor
+  );
+  return { primaryColor, secondaryColor, error, loading };
 }
 
 export function useDefaultPicture() {

src/graphql/admin.ts

@@ -210,6 +210,8 @@ export const ADMIN_SETTINGS_FRAGMENT = gql`
       url
       name
     }
+    primaryColor
+    secondaryColor
     instanceTerms
     instanceTermsType
     instanceTermsUrl
@@ -241,6 +243,8 @@ export const SAVE_ADMIN_SETTINGS = gql`
     $instanceLogo: MediaInput
     $instanceFavicon: MediaInput
     $defaultPicture: MediaInput
+    $primaryColor: String
+    $secondaryColor: String
     $instanceTerms: String
     $instanceTermsType: InstanceTermsType
     $instanceTermsUrl: String
@@ -260,6 +264,8 @@ export const SAVE_ADMIN_SETTINGS = gql`
       instanceLogo: $instanceLogo
       instanceFavicon: $instanceFavicon
       defaultPicture: $defaultPicture
+      primaryColor: $primaryColor
+      secondaryColor: $secondaryColor
       instanceTerms: $instanceTerms
       instanceTermsType: $instanceTermsType
       instanceTermsUrl: $instanceTermsUrl

src/graphql/config.ts

@@ -12,12 +12,11 @@ export const CONFIG = gql`
       demoMode
       countryCode
       languages
+      primaryColor
+      secondaryColor
       instanceLogo {
         url
       }
-      instanceFavicon {
-        url
-      }
       defaultPicture {
         id
         url
@@ -480,12 +479,11 @@ export const INSTANCE_LOGO = gql`
   }
 `;
 
-export const INSTANCE_FAVICON = gql`
+export const COLORS = gql`
-  query InstanceFavicon {
+  query Colors {
     config {
-      instanceFavicon {
+      primaryColor
-        url
+      secondaryColor
-      }
     }
   }
 `;

src/main.ts

@@ -57,6 +57,15 @@ apolloClient
   })
   .then(({ data: configData }) => {
     instanceName.value = configData.config?.name;
+
+    const primaryColor = configData.config?.primaryColor;
+    if (primaryColor) {
+      document.documentElement.style.setProperty('--custom-primary', primaryColor);
+    }
+    const secondaryColor = configData.config?.secondaryColor;
+    if (secondaryColor) {
+      document.documentElement.style.setProperty('--custom-secondary', secondaryColor);
+    }
   });
 
 const head = createHead();

src/types/admin.model.ts

@@ -27,8 +27,9 @@ export interface IAdminSettings {
   instanceLongDescription: string;
   contact: string;
   instanceLogo: IMedia | null;
-  instanceFavicon: IMedia | null;
   defaultPicture: IMedia | null;
+  primaryColor: string;
+  secondaryColor: string;
   instanceTerms: string;
   instanceTermsType: InstanceTermsType;
   instanceTermsUrl: string | null;

src/types/config.model.ts

@@ -38,8 +38,9 @@ export interface IConfig {
   contact: string;
   slogan: string;
   instanceLogo: { url: string };
-  instanceFavicon: { url: string };
   defaultPicture: { url: string };
+  primaryColor: string;
+  secondaryColor: string;
 
   registrationsOpen: boolean;
   registrationsAllowlist: boolean;

src/views/Admin/SettingsView.vue

@@ -94,6 +94,26 @@
             :maxSize="maxSize"
           />
         </label>
+        <div class="field flex flex-col">
+          <label class="" for="primary-color">{{
+            t("Primary Color")
+          }}</label>
+          <o-input
+            type="color"
+            v-model="settingsToWrite.primaryColor"
+            id="primary-color"
+          />
+        </div>
+        <div class="field flex flex-col">
+          <label class="" for="secondary-color">{{
+            t("Secondary Color")
+          }}</label>
+          <o-input
+            type="color"
+            v-model="settingsToWrite.secondaryColor"
+            id="secondary-color"
+          />
+        </div>
         <o-field :label="t('Allow registrations')">
           <o-switch v-model="settingsToWrite.registrationsOpen">
             <p
@@ -442,6 +462,8 @@ const defaultAdminSettings: IAdminSettings = {
   instanceLogo: null,
   instanceFavicon: null,
   defaultPicture: null,
+  primaryColor: "",
+  secondaryColor: "",
   instanceTerms: "",
   instanceTermsType: InstanceTermsType.DEFAULT,
   instanceTermsUrl: null,