[Appdir] Adds theme-switcher with Select in code-examples

[KenAJoh]

Description

Adds theme-switcher to change between legacy and darkside light/dark. The CSS is loaded dynamically, so legacy/darkside wont overlap. As of now the "default" legacy-css is loaded by in _app by default, so there might be some broken CSS until we remove if from loading by default when we launch the new sites. Note that this can only happen /dev since the switcher is hidden in prod.

Screen.Recording.2025-05-13.at.19.08.52.mov

Component Checklist 📝

• JSDoc
• Examples
• Documentation / Decision Records
• Storybook
• Style mappings (@navikt/core/css/config/_mappings.js)
• Component tokens (@navikt/core/css/tokens.json)
• CSS class deprecations (@navikt/aksel-stylelint/src/deprecations.ts)
• Exports (@navikt/core/react/src/index.ts and @navikt/core/react/package.json)
• New component? CSS import (@navikt/core/css/index.css)
• Breaking change? Update migration guide. Consider codemod.
• Changeset (Format: <Component>: <gitmoji?> <Text>. E.g. "Button: ✨ Add feature xyz.")

[changeset-bot]

⚠️ No Changeset found

Latest commit: adbf610

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[Copilot]

Pull Request Overview

This PR introduces a theme-switcher feature for code examples, enabling users to toggle between legacy and darkside light/dark themes by dynamically loading the corresponding CSS. Key changes include the addition of a theme provider component, updates to configuration to expose the design system version, and a query parameter update to ensure the darkside theme is applied in iframes.

Reviewed Changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
aksel.nav.no/website/pages/_app.tsx	Wraps app content in the new ExampleTheming provider
aksel.nav.no/website/package.json	Adds the "semver" dependency
aksel.nav.no/website/next.config.ts	Imports package.json to expose ds-react version and updates CSP
aksel.nav.no/website/components/website-modules/examples/withDsExample.tsx	Updates example theming and breakpoint display with theme support
aksel.nav.no/website/components/website-modules/examples/withDsExample.theme.tsx	Implements the theme provider and switcher components
aksel.nav.no/website/components/styles/index.css	Adopts new CSS layer syntax for style separation
aksel.nav.no/website/app/_ui/kode-eksempler/KodeEksempler.iframe.tsx	Appends a darkside query parameter to the iframe URL

Comments suppressed due to low confidence (2)

aksel.nav.no/website/next.config.ts:60

• There is a possible error if '@navikt/ds-react' is not defined in package.json; consider checking for its existence before calling .replace to prevent runtime failures.

const akselVersion = packageJson.dependencies["@navikt/ds-react"].replace("^","");

aksel.nav.no/website/components/website-modules/examples/withDsExample.tsx:92

• [nitpick] Consider using React.ElementType for Wrapper's type to improve type safety and clarity of the intended component behavior.

let Wrapper: string | ((props: any) => JSX.Element) = "div";