feat: add isDarkTheme functions and composables

[ShGKme]

☑️ Resolves

A copy from what we use in Talk

• Sometimes we need to check if the dark theme is enabled
• Currently, apps do it in different ways, and sometimes it's incorrect:
  • You should not use window.matchMedia.('(prefers-color-scheme: dark)'). It checks for the user's system theme, but Nextcloud Dark theme could be enabled even on the light system theme.
  • You should not use [data-themes*=dark] or [data-theme-dark] attributes on the body. It checks for explicitly set dark theme, but a user may use the system theme.
• Add utils and composables to check the Nextcloud dark theme based on --background-invert-if-dark

🖼️ Screenshots

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable
• 3️⃣ Backport to next requested with a Vue 3 upgrade

[susnux]

⚠️ Requires dark theme support in docs

So you might want this a review ;)
#5656

[Antreesy]

Compared with Talk, works in Styleguids =)

[susnux]

Only two comments on the documentation

[susnux]

Should not import with ts extension in Typescript files, while this works with bundlers, it does not for Typescript itself.

[susnux]

This does not work, just do not import with .ts extension in Typescript files (in JS files it work).

Suggested change

"allowImportingTsExtensions": true,

[ShGKme]

This works, I missed that styleguidist uses a different config

[ShGKme]

We have 46 places with .ts imports in this repo

[susnux]

We have 46 places with .ts imports in this repo

This works as long as it is in JavaScript files and not Typescript.
Importing with .ts extension in Typescript is invalid when emitting is enabled, as the output will be invalid.
So as long as we use a bundler everything works, but e.g. tsc would not work, because Typescript does not rewrite import extensions, so you either have to import Typescript files with .js or without any extension.

[ShGKme]

Importing with .ts extension in Typescript is invalid when emitting is enabled, as the output will be invalid.
So as long as we use a bundler everything works, but e.g. tsc would not work, because Typescript does not rewrite import extensions, so you either have to import Typescript files with .js or without any extension.

We almost never use tsc as a compiler (except notify_push) and in general, in modern TypeScript usage it's rarely used as a compiler/language and not as a static analyzer (type checker).

Specifically, in this repo, we already had @babel/typescript-preset to work with TS as a static analyzer, and only the webpack config was not correct.

[ShGKme]

Fixed TS config for styleguidist (see the last commit)

[ShGKme]

Force-pushed docs fixes according to @susnux suggestions

[Antreesy]

backport?

[ShGKme]

/backport to next