refactoring and optimization for theme handler

Description

Refactored theme handler functions on themeutils.ts and Navbar.vue component. Removed useless code logic and cleaned existent codebase.

Additional Information

With those changes, the theme handler is more efficient and stable using localStorage to store user theme preference. In the future, we'd like to make sure to apply theme preference on website pre-rendering stage, to provide a powerful theme handler to users.

Major changes

Created a composable useTheme function to inject a Ref globally on the project:

export const useTheme = () => {
return useState("APIVaultTheme", () =>
process.client ? localStorage.getItem("APIVaultTheme")! : "light"
)};

Migrated the setTheme() function to useTheme() composable in Navbar.vue component:
```
const theme = useTheme();
```

Added setThemeValue(color: string) function to set the theme based on function argument:

export function setThemeValue(color: string): void {
if (process.client) localStorage.setItem("APIVaultTheme", color);
}

Refactored functions on themeutils.ts:

setTheme function

export function setTheme(): string {
const theme = localStorage.getItem("APIVaultTheme");
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");

if (!theme || (theme !== "dark" && theme !== "light")) {
if (prefersDark.matches) {
  localStorage.setItem("APIVaultTheme", "dark");
  return "dark";
} else {
  localStorage.setItem("APIVaultTheme", "light");
  return "light";
}
}

return theme;
}

setThemeLogoPath function

export const setThemeLogoPath = (theme: globalThis.Ref<string>): string => {
const value = theme.value;
return value === null || value === undefined ? "/img/apivault-full-dark-nobg.png" : `/img/apivault-full-${value}-nobg.png`;
}

setLocalStorage function

export const setLocalStorage = (theme: globalThis.Ref<string>): boolean => {
  const value = theme.value;
  const newTheme = value === "dark" || value === undefined ? "light" : "dark";
  theme.value = newTheme;
  localStorage.setItem("APIVaultTheme", newTheme);
  return newTheme === "dark";
}

Checklist

[x] My submission is formatted according to the guidelines in the contributing guide
[x] My addition is ordered alphabetically
[x] My submission has a useful description
[x] Code follows the established CODE_OF_CONDUCT guidelines.
[x] Code has been tested thoroughly and passes all tests.
[x] All commit messages are descriptive and follow the established commit message format.
[x] Pull request title follows the established pull request title format.
[x] Pull request description clearly describes the changes included in the pull request.
[x] The description does not have more than 100 characters
[x] Each table column is padded with one space on either side
[x] I have searched the repository for any relevant issues or pull requests
[x] Any category I am creating has the minimum requirement of 3 items

Exifly / ApiVault