Custom themes

How to upload custom themes

Custom themes can be a great way to customize and enhance your seekr experience. Installing them is really easy and comprehendable.

1. Get the css file for the theme you want
2. Drag it into the /web/themes directory
3. Thats it!

You can then go into your seekr settings (desktop only) and choose your new theme!

How to create custom themes

Creating these customized themes is also really easy.

Below you can see a template:

[data-theme="arctic"] {
  /* Background */

  --bg: #E4EBF5;
  --bg-bright: #e9edf1;

  /* Text */
  
  --textColor-1: #9baacf;
  --textColor-hover: #6d5dfc;

  /* Icons */

  --iconColor-1: #9CCF9B;
  --iconColor-2: #E4EBF5;
  --iconColor-3: #CF9B9B;

  /* Loading spinner */

  --loadingColor: #6d5dfc;
  --loadingColor-dark: #5b0eeb;

  /* No search results text */

  --noResultsText: rgba(155, 170, 207, 0.5);

  /* Shadows */

  --shadow-1: #c8d0e7;
  --shadow-2: #FFFFFF;

  --shadowPreset-1: 0.8rem 0.8rem 1.4rem var(--shadow-1), -0.2rem -0.2rem 1.8rem var(--shadow-2);
  --shadowPreset-2: inset 0.2rem 0.2rem 0.5rem var(--shadow-1), inset -0.2rem -0.2rem 0.5rem var(--shadow-2);
  --shadowPreset-3: 0.3rem 0.3rem 0.6rem var(--shadow-1), -0.2rem -0.2rem 0.5rem var(--shadow-2);
  --shadowPreset-4: 8px 8px 16px var(--shadow-1), -8px -8px 16px var(--shadow-2);
  --shadowPreset-5: 0.3rem 0.3rem 0.6rem var(--shadow-1), -0.2rem -0.2rem 0.5rem var(--shadow-2);
  --shadowPreset-6: inset 6.91px 6.91px 15px var(--shadow-1), inset -6.91px -6.91px 15px var(--shadow-2);
  --shadowPreset-7: 0 0 15px var(--loadingColor);
}

All you have to do is change the hex codes / numbers. The file name should be like:

• arctic.css
• dusk.css
• etc.

The file name will be capitalized and used in the settings theme card.

Changing the default theme

If you want to change the default theme (used when no theme is selected), just change the /web/themes/default.css file. Make sure you dont just replace all of the content and leave the ":root" at the top.#