From 75105f20c70c9ceeb859290628330b06250d1121 Mon Sep 17 00:00:00 2001
From: Tamara Steinwender <tamara.steinwender@tugraz.at>
Date: Tue, 1 Feb 2022 14:30:35 +0100
Subject: [PATCH] Convert theme switcher to a webcomponent

---
 packages/theme-switcher/.eslintignore         |   4 +
 packages/theme-switcher/.eslintrc.json        |   4 +
 packages/theme-switcher/.gitignore            |   6 +
 packages/theme-switcher/.npmignore            |   5 +
 packages/theme-switcher/LICENSE               | 502 ++++++++++++++++++
 packages/theme-switcher/README.md             | 132 +++++
 packages/theme-switcher/assets/favicon.ico    | Bin 0 -> 38078 bytes
 .../theme-switcher/i18next-scanner.config.js  |  16 +
 packages/theme-switcher/karma.conf.js         |   1 +
 packages/theme-switcher/package.json          |  58 ++
 packages/theme-switcher/rollup.config.js      |  47 ++
 .../theme-switcher/src/dbp-theme-switcher.js  |   4 +
 packages/theme-switcher/src/demo.js           | 125 +++++
 packages/theme-switcher/src/i18n.js           |   8 +
 .../src/i18n/de/translation.json              |   5 +
 .../src/i18n/en/translation.json              |   5 +
 packages/theme-switcher/src/index.js          |   1 +
 packages/theme-switcher/src/theme-switcher.js | 249 +++++++++
 packages/theme-switcher/test/unit.js          |  40 ++
 .../assets/theme-switcher.metadata.json       |  18 +
 .../src/dbp-theme-switcher-demo-activity.js   |   0
 21 files changed, 1230 insertions(+)
 create mode 100644 packages/theme-switcher/.eslintignore
 create mode 100644 packages/theme-switcher/.eslintrc.json
 create mode 100644 packages/theme-switcher/.gitignore
 create mode 100644 packages/theme-switcher/.npmignore
 create mode 100644 packages/theme-switcher/LICENSE
 create mode 100644 packages/theme-switcher/README.md
 create mode 100644 packages/theme-switcher/assets/favicon.ico
 create mode 100644 packages/theme-switcher/i18next-scanner.config.js
 create mode 100644 packages/theme-switcher/karma.conf.js
 create mode 100644 packages/theme-switcher/package.json
 create mode 100644 packages/theme-switcher/rollup.config.js
 create mode 100644 packages/theme-switcher/src/dbp-theme-switcher.js
 create mode 100644 packages/theme-switcher/src/demo.js
 create mode 100644 packages/theme-switcher/src/i18n.js
 create mode 100644 packages/theme-switcher/src/i18n/de/translation.json
 create mode 100644 packages/theme-switcher/src/i18n/en/translation.json
 create mode 100644 packages/theme-switcher/src/index.js
 create mode 100644 packages/theme-switcher/src/theme-switcher.js
 create mode 100644 packages/theme-switcher/test/unit.js
 create mode 100644 toolkit-showcase/assets/theme-switcher.metadata.json
 create mode 100644 toolkit-showcase/src/dbp-theme-switcher-demo-activity.js

diff --git a/packages/theme-switcher/.eslintignore b/packages/theme-switcher/.eslintignore
new file mode 100644
index 00000000..c139ed4c
--- /dev/null
+++ b/packages/theme-switcher/.eslintignore
@@ -0,0 +1,4 @@
+/vendor/**
+/dist/**
+*.conf.js
+*.config.js
\ No newline at end of file
diff --git a/packages/theme-switcher/.eslintrc.json b/packages/theme-switcher/.eslintrc.json
new file mode 100644
index 00000000..d72b93be
--- /dev/null
+++ b/packages/theme-switcher/.eslintrc.json
@@ -0,0 +1,4 @@
+{
+    "root": true,
+    "extends": "./../../eslint.common.json"
+}
\ No newline at end of file
diff --git a/packages/theme-switcher/.gitignore b/packages/theme-switcher/.gitignore
new file mode 100644
index 00000000..fa695126
--- /dev/null
+++ b/packages/theme-switcher/.gitignore
@@ -0,0 +1,6 @@
+dist
+node_modules
+.idea
+npm-debug.log
+package-lock.json
+index.html
diff --git a/packages/theme-switcher/.npmignore b/packages/theme-switcher/.npmignore
new file mode 100644
index 00000000..bd8138ce
--- /dev/null
+++ b/packages/theme-switcher/.npmignore
@@ -0,0 +1,5 @@
+node_modules
+.idea
+npm-debug.log
+package-lock.json
+index.html
diff --git a/packages/theme-switcher/LICENSE b/packages/theme-switcher/LICENSE
new file mode 100644
index 00000000..4362b491
--- /dev/null
+++ b/packages/theme-switcher/LICENSE
@@ -0,0 +1,502 @@
+                  GNU LESSER GENERAL PUBLIC LICENSE
+                       Version 2.1, February 1999
+
+ Copyright (C) 1991, 1999 Free Software Foundation, Inc.
+ 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+[This is the first released version of the Lesser GPL.  It also counts
+ as the successor of the GNU Library Public License, version 2, hence
+ the version number 2.1.]
+
+                            Preamble
+
+  The licenses for most software are designed to take away your
+freedom to share and change it.  By contrast, the GNU General Public
+Licenses are intended to guarantee your freedom to share and change
+free software--to make sure the software is free for all its users.
+
+  This license, the Lesser General Public License, applies to some
+specially designated software packages--typically libraries--of the
+Free Software Foundation and other authors who decide to use it.  You
+can use it too, but we suggest you first think carefully about whether
+this license or the ordinary General Public License is the better
+strategy to use in any particular case, based on the explanations below.
+
+  When we speak of free software, we are referring to freedom of use,
+not price.  Our General Public Licenses are designed to make sure that
+you have the freedom to distribute copies of free software (and charge
+for this service if you wish); that you receive source code or can get
+it if you want it; that you can change the software and use pieces of
+it in new free programs; and that you are informed that you can do
+these things.
+
+  To protect your rights, we need to make restrictions that forbid
+distributors to deny you these rights or to ask you to surrender these
+rights.  These restrictions translate to certain responsibilities for
+you if you distribute copies of the library or if you modify it.
+
+  For example, if you distribute copies of the library, whether gratis
+or for a fee, you must give the recipients all the rights that we gave
+you.  You must make sure that they, too, receive or can get the source
+code.  If you link other code with the library, you must provide
+complete object files to the recipients, so that they can relink them
+with the library after making changes to the library and recompiling
+it.  And you must show them these terms so they know their rights.
+
+  We protect your rights with a two-step method: (1) we copyright the
+library, and (2) we offer you this license, which gives you legal
+permission to copy, distribute and/or modify the library.
+
+  To protect each distributor, we want to make it very clear that
+there is no warranty for the free library.  Also, if the library is
+modified by someone else and passed on, the recipients should know
+that what they have is not the original version, so that the original
+author's reputation will not be affected by problems that might be
+introduced by others.
+
+  Finally, software patents pose a constant threat to the existence of
+any free program.  We wish to make sure that a company cannot
+effectively restrict the users of a free program by obtaining a
+restrictive license from a patent holder.  Therefore, we insist that
+any patent license obtained for a version of the library must be
+consistent with the full freedom of use specified in this license.
+
+  Most GNU software, including some libraries, is covered by the
+ordinary GNU General Public License.  This license, the GNU Lesser
+General Public License, applies to certain designated libraries, and
+is quite different from the ordinary General Public License.  We use
+this license for certain libraries in order to permit linking those
+libraries into non-free programs.
+
+  When a program is linked with a library, whether statically or using
+a shared library, the combination of the two is legally speaking a
+combined work, a derivative of the original library.  The ordinary
+General Public License therefore permits such linking only if the
+entire combination fits its criteria of freedom.  The Lesser General
+Public License permits more lax criteria for linking other code with
+the library.
+
+  We call this license the "Lesser" General Public License because it
+does Less to protect the user's freedom than the ordinary General
+Public License.  It also provides other free software developers Less
+of an advantage over competing non-free programs.  These disadvantages
+are the reason we use the ordinary General Public License for many
+libraries.  However, the Lesser license provides advantages in certain
+special circumstances.
+
+  For example, on rare occasions, there may be a special need to
+encourage the widest possible use of a certain library, so that it becomes
+a de-facto standard.  To achieve this, non-free programs must be
+allowed to use the library.  A more frequent case is that a free
+library does the same job as widely used non-free libraries.  In this
+case, there is little to gain by limiting the free library to free
+software only, so we use the Lesser General Public License.
+
+  In other cases, permission to use a particular library in non-free
+programs enables a greater number of people to use a large body of
+free software.  For example, permission to use the GNU C Library in
+non-free programs enables many more people to use the whole GNU
+operating system, as well as its variant, the GNU/Linux operating
+system.
+
+  Although the Lesser General Public License is Less protective of the
+users' freedom, it does ensure that the user of a program that is
+linked with the Library has the freedom and the wherewithal to run
+that program using a modified version of the Library.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.  Pay close attention to the difference between a
+"work based on the library" and a "work that uses the library".  The
+former contains code derived from the library, whereas the latter must
+be combined with the library in order to run.
+
+                  GNU LESSER GENERAL PUBLIC LICENSE
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+  0. This License Agreement applies to any software library or other
+program which contains a notice placed by the copyright holder or
+other authorized party saying it may be distributed under the terms of
+this Lesser General Public License (also called "this License").
+Each licensee is addressed as "you".
+
+  A "library" means a collection of software functions and/or data
+prepared so as to be conveniently linked with application programs
+(which use some of those functions and data) to form executables.
+
+  The "Library", below, refers to any such software library or work
+which has been distributed under these terms.  A "work based on the
+Library" means either the Library or any derivative work under
+copyright law: that is to say, a work containing the Library or a
+portion of it, either verbatim or with modifications and/or translated
+straightforwardly into another language.  (Hereinafter, translation is
+included without limitation in the term "modification".)
+
+  "Source code" for a work means the preferred form of the work for
+making modifications to it.  For a library, complete source code means
+all the source code for all modules it contains, plus any associated
+interface definition files, plus the scripts used to control compilation
+and installation of the library.
+
+  Activities other than copying, distribution and modification are not
+covered by this License; they are outside its scope.  The act of
+running a program using the Library is not restricted, and output from
+such a program is covered only if its contents constitute a work based
+on the Library (independent of the use of the Library in a tool for
+writing it).  Whether that is true depends on what the Library does
+and what the program that uses the Library does.
+
+  1. You may copy and distribute verbatim copies of the Library's
+complete source code as you receive it, in any medium, provided that
+you conspicuously and appropriately publish on each copy an
+appropriate copyright notice and disclaimer of warranty; keep intact
+all the notices that refer to this License and to the absence of any
+warranty; and distribute a copy of this License along with the
+Library.
+
+  You may charge a fee for the physical act of transferring a copy,
+and you may at your option offer warranty protection in exchange for a
+fee.
+
+  2. You may modify your copy or copies of the Library or any portion
+of it, thus forming a work based on the Library, and copy and
+distribute such modifications or work under the terms of Section 1
+above, provided that you also meet all of these conditions:
+
+    a) The modified work must itself be a software library.
+
+    b) You must cause the files modified to carry prominent notices
+    stating that you changed the files and the date of any change.
+
+    c) You must cause the whole of the work to be licensed at no
+    charge to all third parties under the terms of this License.
+
+    d) If a facility in the modified Library refers to a function or a
+    table of data to be supplied by an application program that uses
+    the facility, other than as an argument passed when the facility
+    is invoked, then you must make a good faith effort to ensure that,
+    in the event an application does not supply such function or
+    table, the facility still operates, and performs whatever part of
+    its purpose remains meaningful.
+
+    (For example, a function in a library to compute square roots has
+    a purpose that is entirely well-defined independent of the
+    application.  Therefore, Subsection 2d requires that any
+    application-supplied function or table used by this function must
+    be optional: if the application does not supply it, the square
+    root function must still compute square roots.)
+
+These requirements apply to the modified work as a whole.  If
+identifiable sections of that work are not derived from the Library,
+and can be reasonably considered independent and separate works in
+themselves, then this License, and its terms, do not apply to those
+sections when you distribute them as separate works.  But when you
+distribute the same sections as part of a whole which is a work based
+on the Library, the distribution of the whole must be on the terms of
+this License, whose permissions for other licensees extend to the
+entire whole, and thus to each and every part regardless of who wrote
+it.
+
+Thus, it is not the intent of this section to claim rights or contest
+your rights to work written entirely by you; rather, the intent is to
+exercise the right to control the distribution of derivative or
+collective works based on the Library.
+
+In addition, mere aggregation of another work not based on the Library
+with the Library (or with a work based on the Library) on a volume of
+a storage or distribution medium does not bring the other work under
+the scope of this License.
+
+  3. You may opt to apply the terms of the ordinary GNU General Public
+License instead of this License to a given copy of the Library.  To do
+this, you must alter all the notices that refer to this License, so
+that they refer to the ordinary GNU General Public License, version 2,
+instead of to this License.  (If a newer version than version 2 of the
+ordinary GNU General Public License has appeared, then you can specify
+that version instead if you wish.)  Do not make any other change in
+these notices.
+
+  Once this change is made in a given copy, it is irreversible for
+that copy, so the ordinary GNU General Public License applies to all
+subsequent copies and derivative works made from that copy.
+
+  This option is useful when you wish to copy part of the code of
+the Library into a program that is not a library.
+
+  4. You may copy and distribute the Library (or a portion or
+derivative of it, under Section 2) in object code or executable form
+under the terms of Sections 1 and 2 above provided that you accompany
+it with the complete corresponding machine-readable source code, which
+must be distributed under the terms of Sections 1 and 2 above on a
+medium customarily used for software interchange.
+
+  If distribution of object code is made by offering access to copy
+from a designated place, then offering equivalent access to copy the
+source code from the same place satisfies the requirement to
+distribute the source code, even though third parties are not
+compelled to copy the source along with the object code.
+
+  5. A program that contains no derivative of any portion of the
+Library, but is designed to work with the Library by being compiled or
+linked with it, is called a "work that uses the Library".  Such a
+work, in isolation, is not a derivative work of the Library, and
+therefore falls outside the scope of this License.
+
+  However, linking a "work that uses the Library" with the Library
+creates an executable that is a derivative of the Library (because it
+contains portions of the Library), rather than a "work that uses the
+library".  The executable is therefore covered by this License.
+Section 6 states terms for distribution of such executables.
+
+  When a "work that uses the Library" uses material from a header file
+that is part of the Library, the object code for the work may be a
+derivative work of the Library even though the source code is not.
+Whether this is true is especially significant if the work can be
+linked without the Library, or if the work is itself a library.  The
+threshold for this to be true is not precisely defined by law.
+
+  If such an object file uses only numerical parameters, data
+structure layouts and accessors, and small macros and small inline
+functions (ten lines or less in length), then the use of the object
+file is unrestricted, regardless of whether it is legally a derivative
+work.  (Executables containing this object code plus portions of the
+Library will still fall under Section 6.)
+
+  Otherwise, if the work is a derivative of the Library, you may
+distribute the object code for the work under the terms of Section 6.
+Any executables containing that work also fall under Section 6,
+whether or not they are linked directly with the Library itself.
+
+  6. As an exception to the Sections above, you may also combine or
+link a "work that uses the Library" with the Library to produce a
+work containing portions of the Library, and distribute that work
+under terms of your choice, provided that the terms permit
+modification of the work for the customer's own use and reverse
+engineering for debugging such modifications.
+
+  You must give prominent notice with each copy of the work that the
+Library is used in it and that the Library and its use are covered by
+this License.  You must supply a copy of this License.  If the work
+during execution displays copyright notices, you must include the
+copyright notice for the Library among them, as well as a reference
+directing the user to the copy of this License.  Also, you must do one
+of these things:
+
+    a) Accompany the work with the complete corresponding
+    machine-readable source code for the Library including whatever
+    changes were used in the work (which must be distributed under
+    Sections 1 and 2 above); and, if the work is an executable linked
+    with the Library, with the complete machine-readable "work that
+    uses the Library", as object code and/or source code, so that the
+    user can modify the Library and then relink to produce a modified
+    executable containing the modified Library.  (It is understood
+    that the user who changes the contents of definitions files in the
+    Library will not necessarily be able to recompile the application
+    to use the modified definitions.)
+
+    b) Use a suitable shared library mechanism for linking with the
+    Library.  A suitable mechanism is one that (1) uses at run time a
+    copy of the library already present on the user's computer system,
+    rather than copying library functions into the executable, and (2)
+    will operate properly with a modified version of the library, if
+    the user installs one, as long as the modified version is
+    interface-compatible with the version that the work was made with.
+
+    c) Accompany the work with a written offer, valid for at
+    least three years, to give the same user the materials
+    specified in Subsection 6a, above, for a charge no more
+    than the cost of performing this distribution.
+
+    d) If distribution of the work is made by offering access to copy
+    from a designated place, offer equivalent access to copy the above
+    specified materials from the same place.
+
+    e) Verify that the user has already received a copy of these
+    materials or that you have already sent this user a copy.
+
+  For an executable, the required form of the "work that uses the
+Library" must include any data and utility programs needed for
+reproducing the executable from it.  However, as a special exception,
+the materials to be distributed need not include anything that is
+normally distributed (in either source or binary form) with the major
+components (compiler, kernel, and so on) of the operating system on
+which the executable runs, unless that component itself accompanies
+the executable.
+
+  It may happen that this requirement contradicts the license
+restrictions of other proprietary libraries that do not normally
+accompany the operating system.  Such a contradiction means you cannot
+use both them and the Library together in an executable that you
+distribute.
+
+  7. You may place library facilities that are a work based on the
+Library side-by-side in a single library together with other library
+facilities not covered by this License, and distribute such a combined
+library, provided that the separate distribution of the work based on
+the Library and of the other library facilities is otherwise
+permitted, and provided that you do these two things:
+
+    a) Accompany the combined library with a copy of the same work
+    based on the Library, uncombined with any other library
+    facilities.  This must be distributed under the terms of the
+    Sections above.
+
+    b) Give prominent notice with the combined library of the fact
+    that part of it is a work based on the Library, and explaining
+    where to find the accompanying uncombined form of the same work.
+
+  8. You may not copy, modify, sublicense, link with, or distribute
+the Library except as expressly provided under this License.  Any
+attempt otherwise to copy, modify, sublicense, link with, or
+distribute the Library is void, and will automatically terminate your
+rights under this License.  However, parties who have received copies,
+or rights, from you under this License will not have their licenses
+terminated so long as such parties remain in full compliance.
+
+  9. You are not required to accept this License, since you have not
+signed it.  However, nothing else grants you permission to modify or
+distribute the Library or its derivative works.  These actions are
+prohibited by law if you do not accept this License.  Therefore, by
+modifying or distributing the Library (or any work based on the
+Library), you indicate your acceptance of this License to do so, and
+all its terms and conditions for copying, distributing or modifying
+the Library or works based on it.
+
+  10. Each time you redistribute the Library (or any work based on the
+Library), the recipient automatically receives a license from the
+original licensor to copy, distribute, link with or modify the Library
+subject to these terms and conditions.  You may not impose any further
+restrictions on the recipients' exercise of the rights granted herein.
+You are not responsible for enforcing compliance by third parties with
+this License.
+
+  11. If, as a consequence of a court judgment or allegation of patent
+infringement or for any other reason (not limited to patent issues),
+conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot
+distribute so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you
+may not distribute the Library at all.  For example, if a patent
+license would not permit royalty-free redistribution of the Library by
+all those who receive copies directly or indirectly through you, then
+the only way you could satisfy both it and this License would be to
+refrain entirely from distribution of the Library.
+
+If any portion of this section is held invalid or unenforceable under any
+particular circumstance, the balance of the section is intended to apply,
+and the section as a whole is intended to apply in other circumstances.
+
+It is not the purpose of this section to induce you to infringe any
+patents or other property right claims or to contest validity of any
+such claims; this section has the sole purpose of protecting the
+integrity of the free software distribution system which is
+implemented by public license practices.  Many people have made
+generous contributions to the wide range of software distributed
+through that system in reliance on consistent application of that
+system; it is up to the author/donor to decide if he or she is willing
+to distribute software through any other system and a licensee cannot
+impose that choice.
+
+This section is intended to make thoroughly clear what is believed to
+be a consequence of the rest of this License.
+
+  12. If the distribution and/or use of the Library is restricted in
+certain countries either by patents or by copyrighted interfaces, the
+original copyright holder who places the Library under this License may add
+an explicit geographical distribution limitation excluding those countries,
+so that distribution is permitted only in or among countries not thus
+excluded.  In such case, this License incorporates the limitation as if
+written in the body of this License.
+
+  13. The Free Software Foundation may publish revised and/or new
+versions of the Lesser General Public License from time to time.
+Such new versions will be similar in spirit to the present version,
+but may differ in detail to address new problems or concerns.
+
+Each version is given a distinguishing version number.  If the Library
+specifies a version number of this License which applies to it and
+"any later version", you have the option of following the terms and
+conditions either of that version or of any later version published by
+the Free Software Foundation.  If the Library does not specify a
+license version number, you may choose any version ever published by
+the Free Software Foundation.
+
+  14. If you wish to incorporate parts of the Library into other free
+programs whose distribution conditions are incompatible with these,
+write to the author to ask for permission.  For software which is
+copyrighted by the Free Software Foundation, write to the Free
+Software Foundation; we sometimes make exceptions for this.  Our
+decision will be guided by the two goals of preserving the free status
+of all derivatives of our free software and of promoting the sharing
+and reuse of software generally.
+
+                            NO WARRANTY
+
+  15. BECAUSE THE LIBRARY IS LICENSED FREE OF CHARGE, THERE IS NO
+WARRANTY FOR THE LIBRARY, TO THE EXTENT PERMITTED BY APPLICABLE LAW.
+EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR
+OTHER PARTIES PROVIDE THE LIBRARY "AS IS" WITHOUT WARRANTY OF ANY
+KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE
+LIBRARY IS WITH YOU.  SHOULD THE LIBRARY PROVE DEFECTIVE, YOU ASSUME
+THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN
+WRITING WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY
+AND/OR REDISTRIBUTE THE LIBRARY AS PERMITTED ABOVE, BE LIABLE TO YOU
+FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR
+CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE
+LIBRARY (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING
+RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A
+FAILURE OF THE LIBRARY TO OPERATE WITH ANY OTHER SOFTWARE), EVEN IF
+SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH
+DAMAGES.
+
+                     END OF TERMS AND CONDITIONS
+
+           How to Apply These Terms to Your New Libraries
+
+  If you develop a new library, and you want it to be of the greatest
+possible use to the public, we recommend making it free software that
+everyone can redistribute and change.  You can do so by permitting
+redistribution under these terms (or, alternatively, under the terms of the
+ordinary General Public License).
+
+  To apply these terms, attach the following notices to the library.  It is
+safest to attach them to the start of each source file to most effectively
+convey the exclusion of warranty; and each file should have at least the
+"copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the library's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This library is free software; you can redistribute it and/or
+    modify it under the terms of the GNU Lesser General Public
+    License as published by the Free Software Foundation; either
+    version 2.1 of the License, or (at your option) any later version.
+
+    This library is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+    Lesser General Public License for more details.
+
+    You should have received a copy of the GNU Lesser General Public
+    License along with this library; if not, write to the Free Software
+    Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
+
+Also add information on how to contact you by electronic and paper mail.
+
+You should also get your employer (if you work as a programmer) or your
+school, if any, to sign a "copyright disclaimer" for the library, if
+necessary.  Here is a sample; alter the names:
+
+  Yoyodyne, Inc., hereby disclaims all copyright interest in the
+  library `Frob' (a library for tweaking knobs) written by James Random Hacker.
+
+  <signature of Ty Coon>, 1 April 1990
+  Ty Coon, President of Vice
+
+That's all there is to it!
diff --git a/packages/theme-switcher/README.md b/packages/theme-switcher/README.md
new file mode 100644
index 00000000..3ebe38af
--- /dev/null
+++ b/packages/theme-switcher/README.md
@@ -0,0 +1,132 @@
+# Theme-Switcher web component
+
+This web component allows to switch between multiple predefined themes and can detect browsers default theme.
+
+## Installation
+
+You can install these components via npm:
+
+```bash
+npm i @dbp-toolkit/theme-switcher
+```
+
+After you have installed the theme-switcher component via npm you can use this example to get a button
+that opens a dialogue with multiple themes. After you have selected a theme the class of the theme is 
+applied to the body of your html document. To add a style to the specific class you have to 
+
+```html
+<dbp-theme-switcher 
+        themes='[{"class": "light-theme", "icon": "sun", "name": "Light Mode"}, 
+        {"class": "dark-theme", "icon": "night", "name": "Dark Mode"}]'>
+</dbp-theme-switcher>
+
+
+<style>
+  .light-theme{
+    --dbp-override-base: white;
+    --dbp-override-base-inverted: black;
+    --dbp-override-text: black;
+    --dbp-override-text-inverted: white;
+    --dbp-override-text-muted: #767676;
+    --dbp-override-accent: #c24f68;
+    --dbp-override-primary-base: #2a4491;
+    --dbp-override-primary-text: white;
+    --dbp-override-primary-border: 1px solid #2a4491;
+    --dbp-override-secondary-base: white;
+    --dbp-override-secondary-text: black;
+    --dbp-override-secondary-border: 1px solid black;
+    --dbp-override-info: #2a4491;
+    --dbp-override-success: #188018;
+    --dbp-override-warning-as-text: #c15500;
+    --dbp-override-warning: #f99a41;
+    --dbp-override-danger: #de3535;
+    --dbp-override-border: 1px solid black;
+    --dbp-override-border-radius: 0px;
+    --dbp-override-hover-base: black;
+    --dbp-override-hover-text: white;
+
+  }
+
+  .dark-theme{
+    --dbp-override-base: #151515;
+    --dbp-override-base-inverted: white;
+    --dbp-override-text: white;
+    --dbp-override-text-inverted: #151515;
+    --dbp-override-text-muted: #666666;
+    --dbp-override-accent: #c24f68;
+    --dbp-override-primary-base: #8ca4eb;
+    --dbp-override-primary-text: #151515;
+    --dbp-override-primary-border: 1px solid #8ca4eb;
+    --dbp-override-secondary-base: #151515;
+    --dbp-override-secondary-text: white;
+    --dbp-override-secondary-border: 1px solid white;
+    --dbp-override-info: #8ca4eb;
+    --dbp-override-success: #7acc79;
+    --dbp-override-warning-as-text: #f99a41;
+    --dbp-override-warning: #f99a41;
+    --dbp-override-danger: #de3535;
+    --dbp-override-border: 1px solid white;
+    --dbp-override-border-radius: 0px;
+    --dbp-override-hover-base: white;
+    --dbp-override-hover-text: #151515;
+
+  }
+</style>
+<script type="module" src="node_modules/@dbp-toolkit/theme-switcher/dist/dbp-theme-switcher.js"></script>
+```
+
+Or you can include the JS files directly via CDN:
+
+```html
+<script type="module" src="https://unpkg.com/@dbp-toolkit/theme-switcher@0.0.1/dist/theme-switcher.js"></script>
+```
+
+## Theme Switcher
+
+### Usage
+
+```html
+<dbp-theme-switcher></dbp-theme-switcher>
+```
+
+### Attributes
+
+- `lang` (optional, default: `de`): set to `de` or `en` for German or English
+    - example `<dbp-file-source lang="de"></dbp-file-source>`
+- `themes`: An array with objects with properties: `class` (defines the class name which is append to the body), 
+    `icon` (defines the icon which is used for presenting the theme), `name` (defines the displayed name),
+    - if no or only one theme object is added, then the theme switcher would not be displayed.
+      - example `<dbp-theme-switcher
+        themes='[{"class": "light-theme", "icon": "sun", "name": "Light Mode"},
+        {"class": "dark-theme", "icon": "night", "name": "Dark Mode"}]'>
+        </dbp-theme-switcher>` 
+- `darkModeThemeOverride` (optional)
+    - Options:
+      - `darkModeThemeOverride` not set: the theme switcher detects if the browser uses the dark mode and add 
+         the `dark-theme` class automatically to the body if it is in the themes array and no user preference is set
+      - `darkModeThemeOverride` is set: the theme switcher not detects the browser color mode
+      - `darkModeThemeOverride` is set with a string: e.g.: `darkModeThemeOverride="dunkles-theme`, the theme switcher
+         detects if the browser uses the dark mode and handles the given string as dark mode class
+      
+
+### Note
+Where to body is defined, there the classes had to be defined!
+
+## Local development
+
+```bash
+# get the source
+git clone git@gitlab.tugraz.at:dbp/web-components/toolkit.git
+cd toolkit/packages/theme-switcher
+
+# install dependencies
+yarn install
+
+# constantly build dist/bundle.js and run a local web-server on port 8002 
+yarn run watch-local
+
+# build local packages in dist directory
+yarn run build
+```
+
+Jump to <http://localhost:8002> and you should get a demo page.
diff --git a/packages/theme-switcher/assets/favicon.ico b/packages/theme-switcher/assets/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..50a2c752cd4560bf1a0aa11c63575777ab69a29b
GIT binary patch
literal 38078
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
b0W<$Y^g`Ik85ESbA)^2PgX0Cxp&A1K2~*yD

literal 0
HcmV?d00001

diff --git a/packages/theme-switcher/i18next-scanner.config.js b/packages/theme-switcher/i18next-scanner.config.js
new file mode 100644
index 00000000..aeb8fdb6
--- /dev/null
+++ b/packages/theme-switcher/i18next-scanner.config.js
@@ -0,0 +1,16 @@
+module.exports = {
+    input: [
+        'src/*.js',
+    ],
+    output: './',
+    options: {
+        debug: false,
+        removeUnusedKeys: true,
+        func: {list: ['i18n.t', '_i18n.t']},
+        lngs: ['en','de'],
+        resource: {
+            loadPath: 'src/i18n/{{lng}}/{{ns}}.json',
+            savePath: 'src/i18n/{{lng}}/{{ns}}.json'
+        },
+    },
+}
diff --git a/packages/theme-switcher/karma.conf.js b/packages/theme-switcher/karma.conf.js
new file mode 100644
index 00000000..ca038af2
--- /dev/null
+++ b/packages/theme-switcher/karma.conf.js
@@ -0,0 +1 @@
+module.exports = require('../../karma.common.conf.js');
diff --git a/packages/theme-switcher/package.json b/packages/theme-switcher/package.json
new file mode 100644
index 00000000..51d74bc5
--- /dev/null
+++ b/packages/theme-switcher/package.json
@@ -0,0 +1,58 @@
+{
+  "name": "@dbp-toolkit/theme-switcher",
+  "homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/theme-switcher",
+  "version": "0.0.1",
+  "main": "src/index.js",
+  "license": "LGPL-2.1-or-later",
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.tugraz.at/dbp/web-components/toolkit.git",
+    "directory": "packages/theme-switcher"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "devDependencies": {
+    "@esm-bundle/chai": "^4.2.0",
+    "@rollup/plugin-commonjs": "^21.0.0",
+    "@rollup/plugin-json": "^4.0.2",
+    "@rollup/plugin-node-resolve": "^13.0.0",
+    "eslint": "^8.0.0",
+    "eslint-plugin-jsdoc": "^37.0.0",
+    "i18next-scanner": "^3.0.0",
+    "karma": "^6.0.0",
+    "karma-chrome-launcher": "^3.0.0",
+    "karma-firefox-launcher": "^2.1.0",
+    "karma-mocha": "^2.0.0",
+    "mocha": "^9.0.0",
+    "rollup": "^2.33.3",
+    "rollup-plugin-copy": "^3.1.0",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-serve": "^1.0.1",
+    "rollup-plugin-terser": "^7.0.2"
+  },
+  "dependencies": {
+    "@dbp-toolkit/common": "^0.2.2",
+    "@open-wc/scoped-elements": "^2.0.0",
+    "i18next": "^21.4.2",
+    "jszip": "^3.5.0",
+    "lit": "^2.0.0",
+    "material-design-icons-svg": "^3.0.0"
+  },
+  "scripts": {
+    "clean": "rm dist/*",
+    "build": "npm run build-local",
+    "build-local": "rollup -c",
+    "build-dev": "rollup -c --environment BUILD:development",
+    "build-prod": "rollup -c --environment BUILD:production",
+    "build-demo": "rollup -c --environment BUILD:demo",
+    "build-test": "rollup -c --environment BUILD:test",
+    "i18next": "i18next-scanner",
+    "watch": "npm run watch-local",
+    "watch-local": "rollup -c --watch",
+    "watch-dev": "rollup -c --watch --environment BUILD:development",
+    "test": "npm run build-test && karma start --singleRun",
+    "lint": "eslint ."
+  }
+}
diff --git a/packages/theme-switcher/rollup.config.js b/packages/theme-switcher/rollup.config.js
new file mode 100644
index 00000000..940641a0
--- /dev/null
+++ b/packages/theme-switcher/rollup.config.js
@@ -0,0 +1,47 @@
+import glob from 'glob';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import copy from 'rollup-plugin-copy';
+import {terser} from "rollup-plugin-terser";
+import json from '@rollup/plugin-json';
+import serve from 'rollup-plugin-serve';
+import del from 'rollup-plugin-delete';
+import {getPackagePath, getDistPath} from '../../rollup.utils.js';
+import path from "path";
+
+const pkg = require('./package.json');
+const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : 'local';
+console.log("build: " + build);
+
+let nextcloudBaseURL = 'https://cloud.tugraz.at';
+let nextcloudFileURL = nextcloudBaseURL + '/apps/files/?dir=';
+
+export default (async () => {
+    return {
+        input: (build !== 'test') ? ['src/demo.js', 'src/dbp-theme-switcher.js'] : glob.sync('test/**/*.js'),
+        output: {
+            dir: 'dist',
+            entryFileNames: '[name].js',
+            chunkFileNames: 'shared/[name].[hash].[format].js',
+            format: 'esm',
+            sourcemap: true
+        },
+        plugins: [
+            del({
+                targets: 'dist/*'
+            }),
+            resolve({browser: true}),
+            commonjs(),
+            json(),
+            (build !== 'local' && build !== 'test') ? terser() : false,
+            copy({
+                targets: [
+                    {src: 'assets/index.html', dest: 'dist'},
+                    {src: 'assets/favicon.ico', dest: 'dist'},
+                    {src: await getPackagePath('@dbp-toolkit/common', 'assets/icons/*.svg'), dest: 'dist/' + await getDistPath('@dbp-toolkit/common', 'icons')},
+                ],
+            }),
+            (process.env.ROLLUP_WATCH === 'true') ? serve({contentBase: 'dist', host: '127.0.0.1', port: 8002}) : false
+        ]
+    };
+})();
\ No newline at end of file
diff --git a/packages/theme-switcher/src/dbp-theme-switcher.js b/packages/theme-switcher/src/dbp-theme-switcher.js
new file mode 100644
index 00000000..5bec62cc
--- /dev/null
+++ b/packages/theme-switcher/src/dbp-theme-switcher.js
@@ -0,0 +1,4 @@
+import * as commonUtils from "@dbp-toolkit/common/utils";
+import {ThemeSwitcher} from './theme-switcher';
+
+commonUtils.defineCustomElement('dbp-theme-switcher', ThemeSwitcher);
diff --git a/packages/theme-switcher/src/demo.js b/packages/theme-switcher/src/demo.js
new file mode 100644
index 00000000..013fff6e
--- /dev/null
+++ b/packages/theme-switcher/src/demo.js
@@ -0,0 +1,125 @@
+import {createInstance} from './i18n';
+import {html, LitElement} from 'lit';
+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
+import {ThemeSwitcher} from "./theme-switcher";
+import * as commonUtils from '@dbp-toolkit/common/utils';
+
+export class ThemeSwitcherDemo extends ScopedElementsMixin(LitElement) {
+    constructor() {
+        super();
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
+        this.url = '';
+        this.selectedFiles = [];
+        this.selectedFilesCount = 0;
+    }
+
+    static get scopedElements() {
+        return {
+          'dbp-theme-switcher': ThemeSwitcher,
+        };
+    }
+
+    static get properties() {
+        return {
+            lang: { type: String }
+        };
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+    }
+
+    update(changedProperties) {
+        changedProperties.forEach((oldValue, propName) => {
+            if (propName === "lang") {
+                this._i18n.changeLanguage(this.lang);
+            }
+        });
+
+        super.update(changedProperties);
+    }
+
+
+    render() {
+        const i18n = this._i18n;
+
+        return html`
+            <style>
+                .light-theme{
+                    /* You must not fill out all vars, if they are not filled in, it would take an appropriate default value */
+                    --dbp-override-base: white;
+                    --dbp-override-base-inverted: black;
+                    --dbp-override-text: black;
+                    --dbp-override-text-inverted: white;
+                    --dbp-override-text-muted: #767676;
+                    --dbp-override-accent: #c24f68;
+                    --dbp-override-primary-base: #2a4491;
+                    --dbp-override-primary-text: white;
+                    --dbp-override-primary-border: 1px solid #2a4491;
+                    --dbp-override-secondary-base: white;
+                    --dbp-override-secondary-text: black;
+                    --dbp-override-secondary-border: 1px solid black;
+                    --dbp-override-info: #2a4491;
+                    --dbp-override-success: #188018;
+                    --dbp-override-warning-as-text: #c15500;
+                    --dbp-override-warning: #f99a41;
+                    --dbp-override-danger: #de3535;
+                    --dbp-override-border: 1px solid black;
+                    --dbp-override-border-radius: 0px;
+
+                    /* Remove hover vars if you don't want a hover effect */
+
+                    --dbp-override-hover-base: black;
+                    --dbp-override-hover-text: white;
+
+                }
+
+                .dark-theme{
+                    /* If you don't want to use an additional theme, then delete the "themes" attribute */
+                    /* You have to fill out all vars, if you want to use the dark theme, the default values would be the light theme. */
+
+                    --dbp-override-base: #151515;
+                    --dbp-override-base-inverted: white;
+                    --dbp-override-text: white;
+                    --dbp-override-text-inverted: #151515;
+                    --dbp-override-text-muted: #666666;
+                    --dbp-override-accent: #c24f68;
+                    --dbp-override-primary-base: #8ca4eb;
+                    --dbp-override-primary-text: #151515;
+                    --dbp-override-primary-border: 1px solid #8ca4eb;
+                    --dbp-override-secondary-base: #151515;
+                    --dbp-override-secondary-text: white;
+                    --dbp-override-secondary-border: 1px solid white;
+                    --dbp-override-info: #8ca4eb;
+                    --dbp-override-success: #7acc79;
+                    --dbp-override-warning-as-text: #f99a41;
+                    --dbp-override-warning: #f99a41;
+                    --dbp-override-danger: #de3535;
+                    --dbp-override-border: 1px solid white;
+                    --dbp-override-border-radius: 0px;
+
+
+                    /* Remove hover vars if you don't want a hover effect */
+
+                    --dbp-override-hover-base: white;
+                    --dbp-override-hover-text: #151515;
+
+                }
+            </style>
+ 
+            <section class="section">
+                <div class="content">
+                    <h1 class="title">${i18n.t('demo-title')}</h1>
+                    <p>${i18n.t('intro')}</p>
+                </div>
+                <div class="content">
+                    <dbp-theme-switcher themes='[{"class": "light-theme", "icon": "sun", "name": "Light Mode"}, {"class": "dark-theme", "icon": "night", "name": "Dark Mode"}]'></dbp-theme-switcher>
+               </div>
+            </section>
+        `;
+    }
+
+}
+
+commonUtils.defineCustomElement('dbp-theme-switcher-demo', ThemeSwitcherDemo);
diff --git a/packages/theme-switcher/src/i18n.js b/packages/theme-switcher/src/i18n.js
new file mode 100644
index 00000000..975c1993
--- /dev/null
+++ b/packages/theme-switcher/src/i18n.js
@@ -0,0 +1,8 @@
+import {createInstance as _createInstance} from '@dbp-toolkit/common/i18next.js';
+
+import de from './i18n/de/translation.json';
+import en from './i18n/en/translation.json';
+
+export function createInstance() {
+    return _createInstance({en: en, de: de}, 'de', 'en');
+}
\ No newline at end of file
diff --git a/packages/theme-switcher/src/i18n/de/translation.json b/packages/theme-switcher/src/i18n/de/translation.json
new file mode 100644
index 00000000..c25326d6
--- /dev/null
+++ b/packages/theme-switcher/src/i18n/de/translation.json
@@ -0,0 +1,5 @@
+{
+  "demo-title": "Theme Switcher Demo",
+  "intro": "Mit dem Theme-Switcher können Sie zwischen unterschiedlichen Farb-Themes umschalten.",
+  "color-mode": "Farbmodus ändern"
+}
diff --git a/packages/theme-switcher/src/i18n/en/translation.json b/packages/theme-switcher/src/i18n/en/translation.json
new file mode 100644
index 00000000..5822689e
--- /dev/null
+++ b/packages/theme-switcher/src/i18n/en/translation.json
@@ -0,0 +1,5 @@
+{
+  "demo-title": "Theme Switcher Demo",
+  "intro": "With the theme-switcher you can switch between multiple themes.",
+  "color-mode": "Farbmodus ändern"
+}
diff --git a/packages/theme-switcher/src/index.js b/packages/theme-switcher/src/index.js
new file mode 100644
index 00000000..1b7dbe73
--- /dev/null
+++ b/packages/theme-switcher/src/index.js
@@ -0,0 +1 @@
+export {ThemeSwitcher} from './theme-switcher';
\ No newline at end of file
diff --git a/packages/theme-switcher/src/theme-switcher.js b/packages/theme-switcher/src/theme-switcher.js
new file mode 100644
index 00000000..691cbc8b
--- /dev/null
+++ b/packages/theme-switcher/src/theme-switcher.js
@@ -0,0 +1,249 @@
+import {createInstance} from './i18n.js';
+import {html, css} from 'lit';
+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
+import {AdapterLitElement, Icon} from '@dbp-toolkit/common';
+import * as commonStyles from '@dbp-toolkit/common/styles';
+import {classMap} from 'lit/directives/class-map.js';
+
+
+export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) {
+    constructor() {
+        super();
+
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
+        this.themes = [];
+        this.boundCloseAdditionalMenuHandler = this.hideModeMenu.bind(this);
+        this.detectBrowserDarkMode = false;
+        this.darkModeClass = "dark-theme";
+    }
+
+    static get properties() {
+        return {
+            ...super.properties,
+            lang: { type: String },
+            themes: { type: Array, attribute: "themes" },
+            darkModeThemeOverride: {type: String, attribute: "dark-mode-theme-override"}
+        };
+    }
+
+    static get scopedElements() {
+        return {
+            'dbp-icon': Icon
+        };
+    }
+
+
+    update(changedProperties) {
+        changedProperties.forEach((oldValue, propName) => {
+            if (propName === "lang") {
+                this._i18n.changeLanguage(this.lang);
+            }
+        });
+        super.update(changedProperties);
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateComplete.then(() => {
+            if (typeof this.darkModeThemeOverride === "undefined") {
+                this.detectBrowserDarkMode = true;
+            } else if ( this.darkModeThemeOverride === "") {
+                this.detectBrowserDarkMode = false;
+            } else {
+                this.detectBrowserDarkMode = true;
+                this.darkModeClass = this.darkModeThemeOverride;
+            }
+            this.loadTheme("light-theme");
+            this.detectInitialMode();
+        });
+
+    }
+
+    detectInitialMode() {
+        //look for saved modes
+        let prefMode = localStorage.getItem('prefered-color-mode');
+        if (prefMode) {
+            // search for prefered mode
+            const theme = this.themes.find(theme => theme.class === prefMode);
+
+            if (theme) {
+                this.loadTheme(theme.class);
+            }
+            return;
+        }
+
+        if (this.detectBrowserDarkMode) {
+            //look for browser mode
+            const useDark = window.matchMedia("(prefers-color-scheme: dark)");
+            if (useDark.matches) {
+                // search for dark mode
+                const theme = this.themes.find(theme => theme.class === this.darkModeClass);
+
+                if (theme) {
+                    this.loadTheme(theme.class);
+                }
+            }
+        }
+    }
+
+    toggleModeMenu() {
+        const button = this.shadowRoot.querySelector(".mode-button");
+        if(!button) {
+            return;
+        }
+        if (button.classList.contains("active"))
+            button.classList.remove("active");
+        else
+            button.classList.add("active");
+        const menu = this.shadowRoot.querySelector("ul.extended-menu");
+        const menuStart = this.shadowRoot.querySelector(".mode-button");
+        if (menu === null || menuStart === null) {
+            return;
+        }
+
+        menu.classList.toggle('hidden');
+
+        if (!menu.classList.contains('hidden')) { // add event listener for clicking outside of menu
+            document.addEventListener('click', this.boundCloseAdditionalMenuHandler);
+            this.initateOpenAdditionalMenu = true;
+        }
+        else {
+            document.removeEventListener('click', this.boundCloseAdditionalMenuHandler);
+        }
+    }
+
+    hideModeMenu() {
+        if (this.initateOpenAdditionalMenu) {
+            this.initateOpenAdditionalMenu = false;
+            return;
+        }
+
+        const menu = this.shadowRoot.querySelector("ul.extended-menu");
+        if (menu && !menu.classList.contains('hidden'))
+            this.toggleModeMenu();
+    }
+
+    loadTheme(themeName) {
+        const button = this.shadowRoot.querySelector(".button-" + themeName);
+        const otherButtons = this.shadowRoot.querySelectorAll(".button-theme");
+        const body = this.shadowRoot.host.getRootNode({composed: true}).body;
+
+        if (button === null || otherButtons.length === 0 || body === null ) {
+            return;
+        }
+
+        otherButtons.forEach(button => button.classList.remove("active"));
+        button.classList.add("active");
+
+        if (!body.classList.contains(themeName)) {
+            this.themes.forEach(theme => {
+                body.classList.remove(theme.class);
+            });
+
+            body.classList.add(themeName);
+        }
+    }
+
+    saveTheme(themeName) {
+        //set active state
+        const browserModeDark = window.matchMedia("(prefers-color-scheme: dark)");
+        const browserModeLight = window.matchMedia("(prefers-color-scheme: light)");
+
+        if (themeName === "light-theme" && browserModeLight.matches) {
+            localStorage.removeItem('prefered-color-mode');
+        } else if (themeName === this.darkModeClass && browserModeDark.matches) {
+            localStorage.removeItem('prefered-color-mode');
+        } else {
+            localStorage.setItem('prefered-color-mode', themeName);
+        }
+    }
+
+    static get styles() {
+        return css`
+            ${commonStyles.getThemeCSS()}
+            ${commonStyles.getGeneralCSS()}
+            ${commonStyles.getButtonCSS()}
+           
+            
+            mode-button, button.button {
+                border: none;
+            }
+            
+            .active, .extended-menu li a.active dbp-icon {
+                color: var(--dbp-accent);
+            }
+            
+            .active {
+                font-weight: bolder;
+            }
+            
+            a:hover:not(.active) , .extended-menu li a:hover:not(.active) {
+              color: var(--dbp-hover-text);
+              background-color: var(--dbp-hover-base);
+              transition: none;
+            }
+            
+            a {
+              padding: 0.3em;
+              display: inline-block;
+              text-decoration: none;
+              transition: background-color 0.15s, color 0.15s;
+              color: var(--dbp-text);
+            }
+            
+            .extended-menu {
+              list-style: none;
+              border: var(--dbp-border);
+              position: absolute;
+              background-color: var(--dbp-base);
+              z-index: 1000;
+              border-radius: var(--dbp-border-radius);
+            }
+            
+            .extended-menu li {
+       
+              text-align: left;
+              min-width: 160px;
+            }
+            
+            .extended-menu li a {
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              padding: 12px 15px;
+              w1idth: 100%;
+              box-sizing: border-box;
+              text-align: left;
+              color: var(--dbp-text);
+              background: none;
+              display: block
+            }
+            
+            .icon {
+                margin-right: 10px;
+            }
+          
+        `;
+    }
+
+    render() {
+        const i18n = this._i18n;
+
+        return html`
+            <div class="${classMap({hidden: this.themes.length <= 1})}">
+                <a class="mode-button" title="${i18n.t('color-mode')}"
+                        @click="${() => {this.toggleModeMenu();}}"><dbp-icon name="contrast"></dbp-icon></a>
+                <ul class='extended-menu hidden'>
+                    ${this.themes.map(theme => html`
+                        <li class="" id="${theme.class}">
+                            <a class="button-theme button-${theme.class}" @click="${() => {this.loadTheme(theme.class); this.saveTheme(theme.class);}}" title="${theme.name}">
+                                <dbp-icon class="icon" name="${theme.icon}"></dbp-icon> ${theme.name}
+                            </a>
+                        </li>
+                    `)}
+                </ul>
+            </div>
+        `;
+    }
+}
\ No newline at end of file
diff --git a/packages/theme-switcher/test/unit.js b/packages/theme-switcher/test/unit.js
new file mode 100644
index 00000000..d235d545
--- /dev/null
+++ b/packages/theme-switcher/test/unit.js
@@ -0,0 +1,40 @@
+import {assert} from '@esm-bundle/chai';
+
+import '../src/dbp-theme-switcher';
+import '../src/demo';
+
+suite('dbp-theme-switcher basics', () => {
+  let node;
+
+  setup(async () => {
+    node = document.createElement('dbp-theme-switcher');
+    document.body.appendChild(node);
+    await node.updateComplete;
+  });
+
+  teardown(() => {
+    node.remove();
+  });
+
+  test('should render', () => {
+    assert.isNotNull(node.shadowRoot);
+  });
+});
+
+suite('dbp-theme-switcher demo', () => {
+  let node;
+
+  setup(async () => {
+    node = document.createElement('dbp-theme-switcher-demo');
+    document.body.appendChild(node);
+    await node.updateComplete;
+  });
+
+  teardown(() => {
+    node.remove();
+  });
+
+  test('should render', () => {
+    assert.isNotNull(node.shadowRoot);
+  });
+});
diff --git a/toolkit-showcase/assets/theme-switcher.metadata.json b/toolkit-showcase/assets/theme-switcher.metadata.json
new file mode 100644
index 00000000..423846ab
--- /dev/null
+++ b/toolkit-showcase/assets/theme-switcher.metadata.json
@@ -0,0 +1,18 @@
+{
+  "element": "dbp-theme-switcher-demo-activity",
+  "module_src": "dbp-theme-switcher-demo-activity.js",
+  "routing_name": "theme-switcher",
+  "name": {
+    "de": "Theme-Switcher Komponente",
+    "en": "Theme-switcher component"
+  },
+  "short_name": {
+    "de": "Theme-Switcher Komponente",
+    "en": "Theme-switcher component"
+  },
+  "description": {
+    "de": "Theme Switcher Web Komponente",
+    "en": "Theme-Switcher web component"
+  },
+  "subscribe": "lang"
+}
diff --git a/toolkit-showcase/src/dbp-theme-switcher-demo-activity.js b/toolkit-showcase/src/dbp-theme-switcher-demo-activity.js
new file mode 100644
index 00000000..e69de29b
-- 
GitLab