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