Switch profile image according on the theme ? #66

GoustiFruit · 2025-03-11T19:38:04Z

GoustiFruit
Mar 11, 2025

Hi,

Sorry to disturb you. I've been playing with Frosti, lots of cool features that match to what I'm looking for to build a personal blog. I'd like to know if you have a solution to simply switch the profile image, that I'm using to display the logo of the blog, to adapt it to the dark vs light theme.

I asked different AI tools 😅, none of their solutions work.
To start:

I created another const in the consts.ts file (USER_DARK_AVATAR),
created a second "avatar" div in the ProfileCard.astro, each with their unique id
tried to add/remove the "hidden" property to the class by modifying the script in ThemeIcon.astro file.
But it doesn't work.
Do you have any idea on how to do it, or if that's even possible ?

Regards.

EveSunMaple · 2025-03-12T16:30:03Z

EveSunMaple
Mar 12, 2025
Maintainer

Hi, @GoustiFruit

Thanks for reaching out! I've seen your message, and I appreciate your interest in Frosti.

This feature is definitely achievable — you can query the <html> element's data-theme-type attribute to handle this.

However, I can't provide a detailed solution right now because I'm a student and can only respond after 10 PM Beijing time. Unfortunately, it's a bit too late today for me to write a proper answer. You’re welcome to try exploring this method in the meantime, or I can provide some code later.

I just wanted to let you know I've seen your message — I didn't want to leave you feeling ignored.

Lastly, thank you for using my theme! I'm currently working on version 3, and perhaps I can include this as a preset feature.

Best regards,
SunMaple

using translation app

9 replies

GoustiFruit Mar 18, 2025
Author

I had the same problem as here, meaning that the translation was not working. For ex., I only had "label.noTag", "label.prevPage", etc. displayed, instead of the actually translated string. I checked that everything was correct, by following your instructions posted in the discussion. No matter what, I never had any translation.
So, as the "locales" files are very short and that I only need to put my site in French, I commented out the lines invoking the i18n stuff...

import { SITE_TAB, SITE_TITLE, SITE_DESCRIPTION, DAISYUI_THEME } from "../consts";
/* import { SITE_LANG, SITE_TAB, SITE_TITLE, SITE_DESCRIPTION, DAISYUI_THEME } from "../consts";
import i18next, { changeLanguage } from "i18next";

changeLanguage(SITE_LANG); */

...and directly put the manually translated strings in the code:

<!-- {tags.length === 0 && <span class="btn btn-xs btn-disabled opacity-50">{t("label.noTag")}</span>} -->
{tags.length === 0 && <span class="btn btn-xs btn-disabled opacity-50">{noTag}</span>}

BTW, I also wanted to display the dates in a specific format...

export const DATE_FORMAT = "ddd, DD MMM YYYY";

...so I had to add those lines in BaseCard.astro so that the names of days and months were written in French:

import dayjs from "dayjs";
import 'dayjs/locale/fr';

(...)

dayjs.locale('fr');
const displayDate = pubDate ? dayjs(pubDate).format(DATE_FORMAT) : "";

EveSunMaple Mar 18, 2025
Maintainer

Ah, this is indeed quite a frustrating issue. In fact, there are no obvious error messages, yet it just doesn't work correctly in certain places — much like the issue you're facing.

Regarding this problem, there's a related issue: #57

Given this, I've decided to stop using i18n and instead switch to a configuration-based approach. I believe this method will be more effective.

GoustiFruit Mar 18, 2025
Author

Oh yeah, I read that issue previously, but I forgot about it when I was having those problems with translations. Then I would have tried with another version of node.js. Sorry to have missed the opportunity.

TNXG Mar 18, 2025
Collaborator

This project has been relying on astro-i18next, but unfortunately, the last update for this library was two years ago. With the rapid evolution of Astro and Node.js, it might no longer work properly, which is quite disappointing. As @EveSunMaple mentioned, I previously tried to resolve the issue with newer Node.js versions by using i18next, the upstream library of astro-i18next, in #61. But hearing that you're running into the same issue now is still frustrating.

If you encountered this problem in the current latest Release (2.9.1), I'm sorry that my Pull Request didn't solve this problem.(If you haven't used the latest version, you might as well try to use git to clone the latest code again and then conduct debugging.)

On the bright side, @EveSunMaple is currently working on Frosti v3, which is exciting news—hopefully, things will get better in the future. (That being said, I still can't help but wonder… why has no one stepped up to maintain astro-i18next ?)

Using ChatGPT for translation work

EveSunMaple Mar 20, 2025
Maintainer

Changed

7cc6941

GoustiFruit · 2025-03-27T15:59:06Z

GoustiFruit
Mar 27, 2025
Author

I managed to modify the required files to switch the avatar image between light and dark themes, with Frosti v3 :-)

In frosti.config.yaml, I changed the lines:

user:
  (...)
  avatar:
    light: /mylogo.svg # On light background
    dark: /mylogo_darkbg.svg # On dark background
  (...)

In site.ts:

export interface UserConfig {
  (...)
  avatar: {
    light: string;
    dark: string;
  };
  (...)

In ProfileBar.astro, I changed the "HTML" part as for the previous version:

<Image
  class="mask light-avatar"
  format="webp"
  width={150}
  height={150}
  src={USER_AVATAR.light}
  alt="Welcome on my website !"
  loading="eager"
/>
<Image
  class="mask dark-avatar hidden"
  format="webp"
  width={150}
  height={150}
  src={USER_AVATAR.dark}
  alt="Welcome on my website !"
  loading="eager"
/>

Modifications in ThemeToggle.astro:

const sunIcon = toggleButton.querySelector('.sun-icon');
const moonIcon = toggleButton.querySelector(".moon-icon");
const lightAvatar = document.querySelector('.light-avatar');
const darkAvatar = document.querySelector('.dark-avatar');

if (sunIcon && moonIcon) {
  if (isDark) {
    sunIcon.classList.remove("hidden");
    moonIcon.classList.add("hidden");
    lightAvatar.classList.add('hidden');
    darkAvatar.classList.remove('hidden');
  } else {
    sunIcon.classList.add("hidden");
    moonIcon.classList.remove("hidden");
    lightAvatar.classList.remove('hidden');
    darkAvatar.classList.add('hidden');
  }
}

0 replies

Switch profile image according on the theme ? #66

Uh oh!

Uh oh!

GoustiFruit Mar 11, 2025

Replies: 2 comments · 9 replies

Uh oh!

EveSunMaple Mar 12, 2025 Maintainer

Uh oh!

GoustiFruit Mar 18, 2025 Author

Uh oh!

EveSunMaple Mar 18, 2025 Maintainer

Uh oh!

GoustiFruit Mar 18, 2025 Author

Uh oh!

Uh oh!

TNXG Mar 18, 2025 Collaborator

Uh oh!

EveSunMaple Mar 20, 2025 Maintainer

Uh oh!

Uh oh!

GoustiFruit Mar 27, 2025 Author

GoustiFruit
Mar 11, 2025

Replies: 2 comments 9 replies

EveSunMaple
Mar 12, 2025
Maintainer

GoustiFruit Mar 18, 2025
Author

EveSunMaple Mar 18, 2025
Maintainer

GoustiFruit Mar 18, 2025
Author

TNXG Mar 18, 2025
Collaborator

EveSunMaple Mar 20, 2025
Maintainer

GoustiFruit
Mar 27, 2025
Author