Darkmodus erkennen und nutzen
So erkennt man den Darkmodus , bzw so arbeitet man damit
Der hier verwendete Code
<!doctype html>
<html lang="en" class="bg-gray-100 dark:bg-gray-900 transition-colors duration-500 ease-in-out">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Davy de Vries</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,600,700,800,900" rel="stylesheet">
<style>
/*! tailwindcss v2.1.2 | MIT License | https://tailwindcss.com *//*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
/*
Document
========
*/
/**
Use a better box model (opinionated).
*/
*,
::before,
::after {
box-sizing: border-box;
}
/**
Use a more readable tab size (opinionated).
*/
html {
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
}
/**
1. Correct the line height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/*
Sections
========
*/
/**
Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
*/
body {
font-family:
system-ui,
-apple-system, /* Firefox supports this but not yet `system-ui` */
'Segoe UI',
Roboto,
Helvetica,
Arial,
sans-serif,
'Apple Color Emoji',
'Segoe UI Emoji';
}
/*
Grouping content
================
*/
/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/
hr {
height: 0; /* 1 */
color: inherit; /* 2 */
}
/*
Text-level semantics
====================
*/
/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr[title] {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/**
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family:
ui-monospace,
SFMono-Regular,
Consolas,
'Liberation Mono',
Menlo,
monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
Tabular data
============
*/
/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table {
text-indent: 0; /* 1 */
border-color: inherit; /* 2 */
}
/*
Forms
=====
*/
/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
Remove the inheritance of text transform in Edge and Firefox.
1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
}
/**
Remove the inner border and padding in Firefox.
*/
::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
Restore the focus styles unset by the previous rule.
*/
:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/
:-moz-ui-invalid {
box-shadow: none;
}
/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend {
padding: 0;
}
/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/*
Interactive
===========
*/
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}/**
* Manually forked from SUIT CSS Base: https://github.com/suitcss/base
* A thin layer on top of normalize.css that provides a starting point more
* suitable for web applications.
*/
/**
* Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
button {
background-color: transparent;
background-image: none;
}
/**
* Work around a Firefox/IE bug where the transparent `button` background
* results in a loss of the default `button` focus styles.
*/
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
fieldset {
margin: 0;
padding: 0;
}
ol,
ul {
list-style: none;
margin: 0;
padding: 0;
}
/**
* Tailwind custom reset styles
*/
/**
* 1. Use the user's configured `sans` font-family (with Tailwind's default
* sans-serif font stack as a fallback) as a sane default.
* 2. Use Tailwind's default "normal" line-height so the user isn't forced
* to override it to ensure consistency even when using the default theme.
*/
html {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
line-height: 1.5; /* 2 */
}
/**
* Inherit font-family and line-height from `html` so users can set them as
* a class directly on the `html` element.
*/
body {
font-family: inherit;
line-height: inherit;
}
/**
* 1. Prevent padding and border from affecting element width.
*
* We used to set this in the html element and inherit from
* the parent element for everything else. This caused issues
* in shadow-dom-enhanced elements like <details> where the content
* is wrapped by a div with box-sizing set to `content-box`.
*
* https://github.com/mozdevs/cssremedy/issues/4
*
*
* 2. Allow adding a border to an element by just adding a border-width.
*
* By default, the way the browser specifies that an element should have no
* border is by setting it's border-style to `none` in the user-agent
* stylesheet.
*
* In order to easily add borders to elements by just setting the `border-width`
* property, we change the default border-style for all elements to `solid`, and
* use border-width to hide them instead. This way our `border` utilities only
* need to set the `border-width` property instead of the entire `border`
* shorthand, making our border utilities much more straightforward to compose.
*
* https://github.com/tailwindcss/tailwindcss/pull/116
*/
*,
::before,
::after {
box-sizing: border-box; /* 1 */
border-width: 0; /* 2 */
border-style: solid; /* 2 */
border-color: #e5e7eb; /* 2 */
}
/*
* Ensure horizontal rules are visible by default
*/
hr {
border-top-width: 1px;
}
/**
* Undo the `border-style: none` reset that Normalize applies to images so that
* our `border-{width}` utilities have the expected effect.
*
* The Normalize reset is unnecessary for us since we default the border-width
* to 0 on all elements.
*
* https://github.com/tailwindcss/tailwindcss/issues/362
*/
img {
border-style: solid;
}
textarea {
resize: vertical;
}
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1;
color: #9ca3af;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
opacity: 1;
color: #9ca3af;
}
input::placeholder,
textarea::placeholder {
opacity: 1;
color: #9ca3af;
}
button,
[role="button"] {
cursor: pointer;
}
table {
border-collapse: collapse;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/**
* Reset links to optimize for opt-in styling instead of
* opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/**
* Reset form element properties that are easy to forget to
* style explicitly so you don't inadvertently introduce
* styles that deviate from your design system. These styles
* supplement a partial reset that is already applied by
* normalize.css.
*/
button,
input,
optgroup,
select,
textarea {
padding: 0;
line-height: inherit;
color: inherit;
}
/**
* Use the configured 'mono' font family for elements that
* are expected to be rendered with a monospace font, falling
* back to the system monospace stack if there is no configured
* 'mono' font family.
*/
pre,
code,
kbd,
samp {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
/**
* Make replaced elements `display: block` by default as that's
* the behavior you want almost all of the time. Inspired by
* CSS Remedy, with `svg` added as well.
*
* https://github.com/mozdevs/cssremedy/issues/14
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
vertical-align: middle;
}
/**
* Constrain images and videos to the parent width and preserve
* their intrinsic aspect ratio.
*
* https://github.com/mozdevs/cssremedy/issues/14
*/
img,
video {
max-width: 100%;
height: auto;
}
* {
--tw-shadow: 0 0 #0000;
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgba(59, 130, 246, 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
}
.container {
width: 100%;
}
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.bottom-40 {
bottom: 10rem;
}
.bottom-\[40px\] {
bottom: 40px;
}
.left-\[40px\] {
left: 40px;
}
.right-\[40px\] {
right: 40px;
}
.right-\[-40px\] {
right: -40px;
}
.bottom-0 {
bottom: 0px;
}
.left-0 {
left: 0px;
}
.col-span-3 {
grid-column: span 3 / span 3;
}
.col-span-1 {
grid-column: span 1 / span 1;
}
.col-span-4 {
grid-column: span 4 / span 4;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.my-12 {
margin-top: 3rem;
margin-bottom: 3rem;
}
.my-8 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.my-5 {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
.mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mx-1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.mt-8 {
margin-top: 2rem;
}
.mt-4 {
margin-top: 1rem;
}
.mr-1 {
margin-right: 0.25rem;
}
.ml-1 {
margin-left: 0.25rem;
}
.mr-4 {
margin-right: 1rem;
}
.mt-1 {
margin-top: 0.25rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mb-8 {
margin-bottom: 2rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mb-5 {
margin-bottom: 1.25rem;
}
.mr-3 {
margin-right: 0.75rem;
}
.mt-0 {
margin-top: 0px;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.mb-10 {
margin-bottom: 2.5rem;
}
.ml-4 {
margin-left: 1rem;
}
.block {
display: block;
}
.inline {
display: inline;
}
.flex {
display: flex;
}
.table {
display: table;
}
.grid {
display: grid;
}
.hidden {
display: none;
}
.h-48 {
height: 12rem;
}
.h-8 {
height: 2rem;
}
.h-px {
height: 1px;
}
.h-full {
height: 100%;
}
.h-10 {
height: 2.5rem;
}
.h-56 {
height: 14rem;
}
.h-4 {
height: 1rem;
}
.h-\[720px\] {
height: 720px;
}
.h-\[60vh\] {
height: 60vh;
}
.h-\[20px\] {
height: 20px;
}
.h-\[432px\] {
height: 432px;
}
.h-64 {
height: 16rem;
}
.h-\[480px\] {
height: 480px;
}
.h-\[150px\] {
height: 150px;
}
.h-\[270px\] {
height: 270px;
}
.h-\[50\%\] {
height: 50%;
}
.h-20 {
height: 5rem;
}
.h-16 {
height: 4rem;
}
.max-h-\[20\%\] {
max-height: 20%;
}
.w-48 {
width: 12rem;
}
.w-8 {
width: 2rem;
}
.w-3\/4 {
width: 75%;
}
.w-full {
width: 100%;
}
.w-10 {
width: 2.5rem;
}
.w-4 {
width: 1rem;
}
.w-\[1280px\] {
width: 1280px;
}
.w-1\/2 {
width: 50%;
}
.w-\[470px\] {
width: 470px;
}
.w-\[432px\] {
width: 432px;
}
.w-64 {
width: 16rem;
}
.w-1\/4 {
width: 25%;
}
.w-\[200px\] {
width: 200px;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.transform {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer {
cursor: pointer;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.gap-2 {
gap: 0.5rem;
}
.gap-4 {
gap: 1rem;
}
.gap-10 {
gap: 2.5rem;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-auto {
overflow: auto;
}
.whitespace-nowrap {
white-space: nowrap;
}
.rounded-full {
border-radius: 9999px;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-md {
border-radius: 0.375rem;
}
.rounded-xl {
border-radius: 0.75rem;
}
.border-0 {
border-width: 0px;
}
.border {
border-width: 1px;
}
.border-2 {
border-width: 2px;
}
.border-4 {
border-width: 4px;
}
.border-b-4 {
border-bottom-width: 4px;
}
.border-gray-500 {
--tw-border-opacity: 1;
border-color: rgba(107, 114, 128, var(--tw-border-opacity));
}
.border-prepr {
--tw-border-opacity: 1;
border-color: rgba(0, 188, 212, var(--tw-border-opacity));
}
.border-readless {
--tw-border-opacity: 1;
border-color: rgba(76, 175, 80, var(--tw-border-opacity));
}
.border-escapehotel {
--tw-border-opacity: 1;
border-color: rgba(141, 110, 99, var(--tw-border-opacity));
}
.border-stackoverflow {
--tw-border-opacity: 1;
border-color: rgba(244, 128, 36, var(--tw-border-opacity));
}
.border-red-500 {
--tw-border-opacity: 1;
border-color: rgba(239, 68, 68, var(--tw-border-opacity));
}
.border-blue-500 {
--tw-border-opacity: 1;
border-color: rgba(59, 130, 246, var(--tw-border-opacity));
}
.border-yellow-500 {
--tw-border-opacity: 1;
border-color: rgba(245, 158, 11, var(--tw-border-opacity));
}
.border-white {
--tw-border-opacity: 1;
border-color: rgba(255, 255, 255, var(--tw-border-opacity));
}
.bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
}
.bg-gray-400 {
--tw-bg-opacity: 1;
background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}
.bg-gray-800 {
--tw-bg-opacity: 1;
background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
}
.bg-black {
--tw-bg-opacity: 1;
background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
}
.bg-\[\#00ff00\] {
--tw-bg-opacity: 1;
background-color: rgba(0, 255, 0, var(--tw-bg-opacity));
}
.bg-opacity-20 {
--tw-bg-opacity: 0.2;
}
.bg-opacity-50 {
--tw-bg-opacity: 0.5;
}
.bg-cover {
background-size: cover;
}
.bg-center {
background-position: center;
}
.fill-current {
fill: currentColor;
}
.p-8 {
padding: 2rem;
}
.p-6 {
padding: 1.5rem;
}
.p-10 {
padding: 2.5rem;
}
.p-\[40px\] {
padding: 40px;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.text-center {
text-align: center;
}
.font-GraunaNegra {
font-family: GraunaNegra, sans-serif;
}
.font-InterExtraLight {
font-family: InterExtraLight;
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-\[39px\] {
font-size: 39px;
}
.text-\[20px\] {
font-size: 20px;
}
.text-\[14px\] {
font-size: 14px;
}
.text-\[37px\] {
font-size: 37px;
}
.text-\[35px\] {
font-size: 35px;
}
.text-\[30px\] {
font-size: 30px;
}
.font-bold {
font-weight: 700;
}
.font-semibold {
font-weight: 600;
}
.font-black {
font-weight: 900;
}
.uppercase {
text-transform: uppercase;
}
.leading-tight {
line-height: 1.25;
}
.tracking-wide {
letter-spacing: 0.025em;
}
.text-gray-900 {
--tw-text-opacity: 1;
color: rgba(17, 24, 39, var(--tw-text-opacity));
}
.text-gray-400 {
--tw-text-opacity: 1;
color: rgba(156, 163, 175, var(--tw-text-opacity));
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgba(107, 114, 128, var(--tw-text-opacity));
}
.text-gray-600 {
--tw-text-opacity: 1;
color: rgba(75, 85, 99, var(--tw-text-opacity));
}
.text-prepr {
--tw-text-opacity: 1;
color: rgba(0, 188, 212, var(--tw-text-opacity));
}
.text-readless {
--tw-text-opacity: 1;
color: rgba(76, 175, 80, var(--tw-text-opacity));
}
.text-escapehotel {
--tw-text-opacity: 1;
color: rgba(141, 110, 99, var(--tw-text-opacity));
}
.text-stackoverflow {
--tw-text-opacity: 1;
color: rgba(244, 128, 36, var(--tw-text-opacity));
}
.text-red-500 {
--tw-text-opacity: 1;
color: rgba(239, 68, 68, var(--tw-text-opacity));
}
.text-blue-500 {
--tw-text-opacity: 1;
color: rgba(59, 130, 246, var(--tw-text-opacity));
}
.text-yellow-500 {
--tw-text-opacity: 1;
color: rgba(245, 158, 11, var(--tw-text-opacity));
}
.text-white {
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.text-black {
--tw-text-opacity: 1;
color: rgba(0, 0, 0, var(--tw-text-opacity));
}
.underline {
text-decoration: underline;
}
.shadow-xl {
--tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.transition-colors {
transition-property: background-color, border-color, color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-shadow {
transition-property: box-shadow;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-500 {
transition-duration: 500ms;
}
.duration {
transition-duration: 150ms;
}
.ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
body {
font-family: "Nunito", sans-serif;
}
.hover\:text-twitter:hover {
--tw-text-opacity: 1;
color: rgba(29, 161, 242, var(--tw-text-opacity));
}
.hover\:text-black:hover {
--tw-text-opacity: 1;
color: rgba(0, 0, 0, var(--tw-text-opacity));
}
.hover\:text-gray-500:hover {
--tw-text-opacity: 1;
color: rgba(107, 114, 128, var(--tw-text-opacity));
}
.hover\:underline:hover {
text-decoration: underline;
}
.group:hover .group-hover\:text-gray-500 {
--tw-text-opacity: 1;
color: rgba(107, 114, 128, var(--tw-text-opacity));
}
@media (min-width: 768px) {
.md\:my-24 {
margin-top: 6rem;
margin-bottom: 6rem;
}
.md\:my-12 {
margin-top: 3rem;
margin-bottom: 3rem;
}
.md\:h-64 {
height: 16rem;
}
.md\:w-64 {
width: 16rem;
}
.md\:w-1\/2 {
width: 50%;
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md\:gap-8 {
gap: 2rem;
}
.md\:text-5xl {
font-size: 3rem;
line-height: 1;
}
.md\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
}
@media (min-width: 1024px) {
.lg\:p-10 {
padding: 2.5rem;
}
.lg\:px-20 {
padding-left: 5rem;
padding-right: 5rem;
}
}
@media (prefers-color-scheme: dark) {
.dark\:block {
display: block;
}
.dark\:hidden {
display: none;
}
.dark\:bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgba(17, 24, 39, var(--tw-bg-opacity));
}
.dark\:bg-gray-800 {
--tw-bg-opacity: 1;
background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
}
.dark\:bg-gray-700 {
--tw-bg-opacity: 1;
background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
}
.dark\:bg-black {
--tw-bg-opacity: 1;
background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
}
.dark\:text-gray-300 {
--tw-text-opacity: 1;
color: rgba(209, 213, 219, var(--tw-text-opacity));
}
.dark\:shadow-xl-white {
--tw-shadow: 0 25px 50px -12px rgba(255, 255, 255, 0.25);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dark\:shadow-lg-white {
--tw-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.1), 0 4px 6px -2px rgba(255, 255, 255, 0.05);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dark\:hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
}
}
@media (prefers-color-scheme: light) {
.light\:block {
display: block;
}
.light\:hidden {
display: none;
}
.light\:bg-white {
--tw-bg-opacity: 1;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}
}
:root {
--color-code-green: #b5f4a5;
--color-code-yellow: #ffe484;
--color-code-purple: #d9a9ff;
--color-code-red: #ff8383;
--color-code-blue: #93ddfd;
--color-code-white: #fff;
}
code[class * =language-], pre[class * =language-] {
font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
--text-opacity: 1;
color: #edf2f7;
color: rgba(237, 242, 247, var(--text-opacity));
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens:none
}
pre[class * =language-] {
overflow: auto;
border-radius:.3em
}
:not(pre) > code[class * =language-], pre[class * =language-] {
background:#1d1f21
}
:not(pre) > code[class * =language-] {
border-radius:.3em
}
.token.cdata, .token.comment, .token.doctype, .token.prolog {
--text-opacity: 1;
color: #a0aec0;
color:rgba(160, 174, 192, var(--text-opacity))
}
.token.punctuation {
color:#c5c8c6
}
.namespace {
opacity:.7
}
.token.keyword, .token.property, .token.tag {
color:#96cbfe
}
.token.class-name {
color: #ffffb6;
text-decoration:underline
}
.token.boolean, .token.constant {
color:#9c9
}
.token.deleted, .token.symbol {
color:#f92672
}
.token.number {
color:#ff73fd
}
.token.attr-name, .token.builtin, .token.char, .token.inserted, .token.selector, .token.string {
color:#a8ff60
}
.token.variable {
color:#c6c5fe
}
.token.operator {
color:#ededed
}
.token.entity {
color:#ffffb6
}
.token.url {
color:#96cbfe
}
.language-css .token.string, .style .token.string {
color:#87c38a
}
.token.atrule, .token.attr-value {
color:#f9ee98
}
.token.function {
color:#dad085
}
.token.regex {
color:#e9c062
}
.token.important {
color:#fd971f
}
.token.bold, .token.important {
font-weight:700
}
.token.italic {
font-style:italic
}
.token.entity {
cursor:help
}
:not(pre) > code[class * =language-], pre[class * =language-] {
background: transparent;
font-size:.875rem
}
code[class * =language-], pre[class * =language-] {
-webkit-font-smoothing: auto !important;
-moz-osx-font-smoothing: auto !important;
color: var(--color-code-white) !important;
-webkit-overflow-scrolling:touch !important
}
.token.comment {
--text-opacity: 1 !important;
color: #a0aec0 !important;
color:rgba(160, 174, 192, var(--text-opacity)) !important
}
.token.atrule {
color:var(--color-code-white) !important
}
.token.atrule > .token.property {
color:var(--color-code-white) !important
}
.token.atrule > .token.property + .token.punctuation {
color:var(--color-code-white) !important
}
.token.atrule > .token.property + .token.punctuation + .token.number + .token.unit {
color:var(--color-code-white) !important
}
.token.atrule > .token.number {
color:var(--color-code-white) !important
}
.token.atrule > .token.unit {
color:var(--color-code-white) !important
}
.token.function {
color:var(--color-code-blue) !important
}
.token.number {
color:var(--color-code-red) !important
}
.token.unit {
color:var(--color-code-red) !important
}
.token.punctuation {
color:var(--color-code-blue) !important
}
.token.hexcode {
color:var(--color-code-blue) !important
}
.token.tag {
color:var(--color-code-red) !important
}
.token.attr-name {
color:var(--color-code-yellow) !important
}
.token.attr-value {
color:var(--color-code-green) !important
}
.token.string {
color:var(--color-code-green) !important
}
.token.url {
color:var(--color-code-green) !important
}
.token.selector {
color:var(--color-code-yellow) !important
}
.token.property {
color:var(--color-code-yellow) !important
}
.token.rule {
color:var(--color-code-purple) !important
}
.token.important {
font-weight: inherit !important;
color:var(--color-code-purple) !important
}
code.language-js .token.operator, pre.language-js .token.operator {
color:var(--color-code-blue) !important
}
code.language-js .token.punctuation, pre.language-js .token.punctuation {
color:var(--color-code-white) !important
}
code.language-js .token.boolean, pre.language-js .token.boolean {
color:var(--color-code-red) !important
}
code.language-js .token.keyword, pre.language-js .token.keyword {
color:var(--color-code-white) !important
}
code.language-js .token.regex, pre.language-js .token.regex {
color:var(--color-code-yellow) !important
}
code.language-bash .token.function, pre.language-bash .token.function {
color:var(--color-code-white) !important
}
code.language-diff, pre.language-diff {
--text-opacity: 1 !important;
color: #cbd5e0 !important;
color:rgba(203, 213, 224, var(--text-opacity)) !important
}
code.language-diff .token.deleted, pre.language-diff .token.deleted {
color:var(--color-code-red) !important
}
code.language-diff .token.inserted, pre.language-diff .token.inserted {
color:var(--color-code-green) !important
}
</style>
</head>
<body>
<div class="container mx-auto my-12 md:my-24">
<div class="grid grid-cols-1 gap-2 md:gap-8 px-2 lg:px-20">
<div class="w-full bg-white rounded shadow-lg dark:shadow-lg-white relative overflow-hidden dark:bg-gray-800 transition-all duration-500 ease-in-out block dark:hidden light:hidden">
<div class="p-8 lg:p-10 border-b-4 border-red-500 h-full">
<div class="flex items-center">
<div class="mr-4">
<svg aria-hidden="true" data-prefix="fal" data-icon="times-hexagon" class="h-10 w-10 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="currentColor" d="M441.5 39.8C432.9 25.1 417.1 16 400 16H176c-17.1 0-32.9 9.1-41.5 23.8l-112 192c-8.7 14.9-8.7 33.4 0 48.4l112 192c8.6 14.7 24.4 23.8 41.5 23.8h224c17.1 0 32.9-9.1 41.5-23.8l112-192c8.7-14.9 8.7-33.4 0-48.4l-112-192zm84.3 224.3l-112 192c-2.9 4.9-8.2 7.9-13.8 7.9H176c-5.7 0-11-3-13.8-7.9l-112-192c-2.9-5-2.9-11.2 0-16.1l112-192c2.8-5 8.1-8 13.8-8h224c5.7 0 11 3 13.8 7.9l112 192c2.9 5 2.9 11.2 0 16.2zm-143 78.2l-8.5 8.5c-4.7 4.7-12.3 4.7-17 0L288 281.5l-69.3 69.3c-4.7 4.7-12.3 4.7-17 0l-8.5-8.5c-4.7-4.7-4.7-12.3 0-17l69.3-69.3-69.3-69.3c-4.7-4.7-4.7-12.3 0-17l8.5-8.5c4.7-4.7 12.3-4.7 17 0l69.3 69.3 69.3-69.3c4.7-4.7 12.3-4.7 17 0l8.5 8.5c4.7 4.7 4.7 12.3 0 17L313.5 256l69.3 69.3c4.6 4.7 4.6 12.3 0 17z"/>
</svg>
</div>
<div>
<div class="flex uppercase tracking-wide text-sm font-bold text-gray-600">No preference detected</div>
<div class="block mt-1 text-lg leading-tight font-semibold text-gray-900 dark:text-gray-300 transition-colors duration-500 ease-in-out">Whoops, it seems like your browser doesn't support dark/light mode</div>
</div>
</div>
</div>
</div>
<div class="w-full bg-white rounded shadow-lg dark:shadow-lg-white relative overflow-hidden dark:bg-gray-800 transition-all duration-500 ease-in-out hidden dark:block">
<div class="p-8 lg:p-10 border-b-4 border-blue-500 h-full">
<div class="flex items-center">
<div class="mr-4">
<svg aria-hidden="true" data-prefix="fal" data-icon="moon" class="h-10 w-10 text-blue-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M448.964 365.617C348.188 384.809 255.14 307.765 255.14 205.419c0-58.893 31.561-112.832 82.574-141.862 25.83-14.7 19.333-53.859-10.015-59.28A258.114 258.114 0 00280.947 0c-141.334 0-256 114.546-256 256 0 141.334 114.547 256 256 256 78.931 0 151.079-35.924 198.85-94.783 18.846-23.22-1.706-57.149-30.833-51.6zM280.947 480c-123.712 0-224-100.288-224-224s100.288-224 224-224c13.984 0 27.665 1.294 40.94 3.745-58.972 33.56-98.747 96.969-98.747 169.674 0 122.606 111.613 214.523 231.81 191.632C413.881 447.653 351.196 480 280.947 480z"/>
</svg>
</div>
<div>
<div class="flex uppercase tracking-wide text-sm font-bold text-gray-600">Dark preference detected</div>
<div class="block mt-1 text-lg leading-tight font-semibold text-gray-900 dark:text-gray-300 transition-colors duration-500 ease-in-out">Night owl, thank me later for saving your eyes</div>
</div>
</div>
</div>
</div>
<div class="w-full bg-white rounded shadow-lg dark:shadow-lg-white relative overflow-hidden dark:bg-gray-800 transition-all duration-500 ease-in-out hidden light:block">
<div class="p-8 lg:p-10 border-b-4 border-yellow-500 h-full">
<div class="flex items-center">
<div class="mr-4">
<svg aria-hidden="true" data-prefix="fal" data-icon="sun" class="h-10 w-10 text-yellow-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M256 143.7c-61.8 0-112 50.3-112 112.1s50.2 112.1 112 112.1 112-50.3 112-112.1-50.2-112.1-112-112.1zm0 192.2c-44.1 0-80-35.9-80-80.1s35.9-80.1 80-80.1 80 35.9 80 80.1-35.9 80.1-80 80.1zm256-80.1c0-5.3-2.7-10.3-7.1-13.3L422 187l19.4-97.9c1-5.2-.6-10.7-4.4-14.4-3.8-3.8-9.1-5.5-14.4-4.4l-97.8 19.4-55.5-83c-6-8.9-20.6-8.9-26.6 0l-55.5 83-97.8-19.5c-5.3-1.1-10.6.6-14.4 4.4-3.8 3.8-5.4 9.2-4.4 14.4L90 187 7.1 242.5c-4.4 3-7.1 8-7.1 13.3 0 5.3 2.7 10.3 7.1 13.3L90 324.6l-19.4 97.9c-1 5.2.6 10.7 4.4 14.4 3.8 3.8 9.1 5.5 14.4 4.4l97.8-19.4 55.5 83c3 4.5 8 7.1 13.3 7.1s10.3-2.7 13.3-7.1l55.5-83 97.8 19.4c5.4 1.2 10.7-.6 14.4-4.4 3.8-3.8 5.4-9.2 4.4-14.4L422 324.6l82.9-55.5c4.4-3 7.1-8 7.1-13.3zm-116.7 48.1c-5.4 3.6-8 10.1-6.8 16.4l16.8 84.9-84.8-16.8c-6.6-1.4-12.8 1.4-16.4 6.8l-48.1 72-48.1-71.9c-3-4.5-8-7.1-13.3-7.1-1 0-2.1.1-3.1.3l-84.8 16.8 16.8-84.9c1.2-6.3-1.4-12.8-6.8-16.4l-71.9-48.1 71.9-48.2c5.4-3.6 8-10.1 6.8-16.4l-16.8-84.9 84.8 16.8c6.5 1.3 12.8-1.4 16.4-6.8l48.1-72 48.1 72c3.6 5.4 9.9 8.1 16.4 6.8l84.8-16.8-16.8 84.9c-1.2 6.3 1.4 12.8 6.8 16.4l71.9 48.2-71.9 48z"/>
</svg>
</div>
<div>
<div class="flex uppercase tracking-wide text-sm font-bold text-gray-600">Lichtpräferenz erkannt</div>
<div class="block mt-1 text-lg leading-tight font-semibold text-gray-900 dark:text-gray-300 transition-colors duration-500 ease-in-out">Frühaufsteher, halte es bei strahlendem Sonnenschein</div>
</div>
</div>
</div>
</div>
<div class="w-full bg-white rounded shadow-lg dark:shadow-lg-white relative overflow-hidden dark:bg-gray-800 transition-color duration-500 ease-in-out">
<div class="p-8 lg:p-10 border-b-4 border-stackoverflow h-full">
<div class="flex">
<div class="mr-4">
<svg aria-hidden="true" data-prefix="fab" data-icon="stack-overflow" class="h-10 w-10 text-stackoverflow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
<path fill="currentColor" d="M290.7 311L95 269.7 86.8 309l195.7 41zm51-87L188.2 95.7l-25.5 30.8 153.5 128.3zm-31.2 39.7L129.2 179l-16.7 36.5L293.7 300zM262 32l-32 24 119.3 160.3 32-24zm20.5 328h-200v39.7h200zm39.7 80H42.7V320h-40v160h359.5V320h-40z"/>
</svg>
</div>
<div>
<div class="flex uppercase tracking-wide text-sm font-bold text-stackoverflow">Stack Overflow</div>
<div class="block mt-1 text-lg leading-tight font-semibold text-gray-900 dark:text-gray-300 transition-colors duration-500 ease-in-out">
<a class="group cursor-pointer" href="https://stackoverflow.com/a/52986538/9423288" target="_blank">
<span class="underline group-hover:text-gray-500">Dark mode</span>
<svg aria-hidden="true" data-prefix="far" data-icon="external-link-square" class="inline h-4 w-4 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor" d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zm-6 400H54a6 6 0 01-6-6V86a6 6 0 016-6h340a6 6 0 016 6v340a6 6 0 01-6 6zm-54-304l-136 .145c-6.627 0-12 5.373-12 12V167.9c0 6.722 5.522 12.133 12.243 11.998l58.001-2.141L99.515 340.485c-4.686 4.686-4.686 12.284 0 16.971l23.03 23.029c4.686 4.686 12.284 4.686 16.97 0l162.729-162.729-2.141 58.001c-.136 6.721 5.275 12.242 11.998 12.242h27.755c6.628 0 12-5.373 12-12L352 140c0-6.627-5.373-12-12-12z"/>
</svg>
</a>
</div>
<p class="mt-2 text-gray-600 w-full">Ich bin ein großer Fan des Dunkelmodus, daher empfehle ich jedem, ihn in seiner Webanwendung zu implementieren. Ich habe eine sehr umfassende Antwort auf Stack Overflow..</p>
</div>
</div>
</div>
</div>
<div class="w-full bg-white rounded shadow-lg dark:shadow-lg-white relative overflow-hidden dark:bg-gray-800 transition-color duration-500 ease-in-out">
<div class="p-8 lg:p-10 border-b-4 border-gray-500 h-full">
<div class="flex">
<div class="mr-4">
<svg aria-hidden="true" data-prefix="fal" data-icon="code" class="h-10 w-10 text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="currentColor" d="M228.5 511.8l-25-7.1c-3.2-.9-5-4.2-4.1-7.4L340.1 4.4c.9-3.2 4.2-5 7.4-4.1l25 7.1c3.2.9 5 4.2 4.1 7.4L235.9 507.6c-.9 3.2-4.3 5.1-7.4 4.2zm-75.6-125.3l18.5-20.9c1.9-2.1 1.6-5.3-.5-7.1L49.9 256l121-102.5c2.1-1.8 2.4-5 .5-7.1l-18.5-20.9c-1.8-2.1-5-2.3-7.1-.4L1.7 252.3c-2.3 2-2.3 5.5 0 7.5L145.8 387c2.1 1.8 5.3 1.6 7.1-.5zm277.3.4l144.1-127.2c2.3-2 2.3-5.5 0-7.5L430.2 125.1c-2.1-1.8-5.2-1.6-7.1.4l-18.5 20.9c-1.9 2.1-1.6 5.3.5 7.1l121 102.5-121 102.5c-2.1 1.8-2.4 5-.5 7.1l18.5 20.9c1.8 2.1 5 2.3 7.1.4z"/>
</svg>
</div>
<div>
<div class="flex uppercase tracking-wide text-sm font-bold text-gray-600">CSS pure</div>
<div class="mt-2 text-gray-600 w-full grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-8 ">
<div>
<p class="mt-2 text-gray-600 w-full">Media query für <span class="font-black">light</span> modus</p>
<pre class="language-css bg-gray-800 dark:bg-gray-700 rounded p-6 mb-8 mt-2"><code class="language-css">/* Light mode */
@media (prefers-color-scheme: light) {
body {
background-color: #000;
color: white;
}
}</code></pre>
</div>
<div>
<p class="mt-2 text-gray-600 w-full">Media query für <span class="font-black">dark</span> modus</p>
<pre class="language-css bg-gray-800 dark:bg-gray-700 rounded p-6 mb-8 mt-2"><code class="language-css">/* Dark mode */
@media (prefers-color-scheme: dark) {
body {
background-color: #000;
color: white;
}
}</code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full bg-white rounded shadow-lg dark:shadow-lg-white relative overflow-hidden dark:bg-gray-800 transition-color duration-500 ease-in-out">
<div class="p-8 lg:p-10 border-b-4 border-teal-500 h-full">
<div class="flex">
<div class="mr-4">
<svg class="h-10 w-10 block" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<path d="M13.5 11.1C15.3 3.9 19.8.3 27 .3c10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 27.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z" transform="translate(5 16)" fill="url(#logoMarkGradient)" fill-rule="evenodd"></path>
<defs>
<linearGradient x1="0%" y1="0%" y2="100%" id="logoMarkGradient">
<stop stop-color="#2298BD"></stop>
<stop offset="1" stop-color="#0ED7B5"></stop>
</linearGradient>
</defs>
</svg>
</div>
<div>
<div class="flex uppercase tracking-wide text-sm font-bold text-teal-600">Tailwind CSS Verwendenh</div>
<div class="block mt-1 text-lg leading-tight font-semibold text-gray-900 dark:text-gray-300 transition-colors duration-500 ease-in-out">1. installiere Tailwind CSS</div>
<p class="mt-2 text-gray-600 w-full">Wenn Sie Tailwind CSS nicht verwenden, würde ich empfehlen, <a href="https://tailwindcss.com/docs/installation" target="_blank" class="underline hover:text-gray-500">die Dokumentation </a> zu lesen und in Betracht zu ziehen, es zu verwenden, es ist verdammt großartig!</p>
<div class="block mt-6 text-lg leading-tight font-semibold text-gray-900 dark:text-gray-300 transition-colors duration-500 ease-in-out">2. Bearbeiten der tailwind.config.js</div>
<p class="mt-2 text-gray-600 w-full">Fügen Sie Folgendes hinzu <a href="https://tailwindcss.com/docs/breakpoints/#dark-mode" target="_blank" class="underline hover:text-gray-500">erweitert</a> zur Tallwind configurations
<div class="mt-2 text-white w-full">
<pre class="language-js bg-gray-800 dark:bg-gray-700 rounded p-6 mb-8 mt-2"><code class="language-js">module.exports = {
theme: {
extend: {
screens: {
'dark': {'raw': '(prefers-color-scheme: dark)'},
'light': {'raw': '(prefers-color-scheme: light)'},
},
}
}
}
</code></pre>
<div class="block mt-6 text-lg leading-tight font-semibold text-gray-900 dark:text-gray-300 transition-colors duration-500 ease-in-out">3. Erstellen Sie Ihr CSS neu</div>
<p class="mt-2 text-gray-600 w-full">Natürlich müssen Sie Ihr CSS <a href="https://tailwindcss.com/docs/installation#4-process-your-css-with-tailwind" target="_blank" class="underline hover:text-gray-500">neu erstellen</a> , aber das hängt von Ihrem Setup ab.</p>
<div class="mt-2 text-white w-full grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-8 ">
<div>
<p class="mt-2 text-gray-600 w-full">Tailwind CLI</p>
<pre class="language-css bg-gray-800 dark:bg-gray-700 rounded p-6 mb-8 mt-2"><code class="language-bash">npx tailwindcss build styles.css -o output.css</code></pre>
</div>
<div>
<p class="mt-2 text-gray-600 w-full">Laravel Mix</p>
<pre class="language-css bg-gray-800 dark:bg-gray-700 rounded p-6 mb-8 mt-2"><code class="language-bash">npm run production</code></pre>
</div>
</div>
<div class="block mt-6 text-lg leading-tight font-semibold text-gray-900 dark:text-gray-300 transition-colors duration-500 ease-in-out">4. Verwendung der Varianten</div>
<p class="mt-2 text-gray-600 w-full">Nach Schritt 3 können Sie die folgenden Varianten verwenden <span class="font-black">light:</span> and <span class="font-black">dark:</span></p>
<p class="mt-2 text-gray-600 w-full">Default <span class="font-black">light</span> application</p>
<pre class="language-css bg-gray-800 dark:bg-gray-700 rounded p-6 mb-8 mt-2"><code class="language-css"><div class="bg-white text-black dark:bg-black dark:text-white"></div></code></pre>
<p class="mt-2 text-gray-600 w-full">Default <span class="font-black">dark</span> application</p>
<pre class="language-css bg-gray-800 dark:bg-gray-700 rounded p-6 mb-8 mt-2"><code class="language-css"><div class="bg-black text-white light:bg-white light:text-black"></div></code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
/* **********************************************
Begin prism-core.js
********************************************** */
var _self = (typeof window !== 'undefined')
? window // if in browser
: (
(typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope)
? self // if in worker
: {} // if in node js
);
/**
* Prism: Lightweight, robust, elegant syntax highlighting
* MIT license http://www.opensource.org/licenses/mit-license.php/
* @author Lea Verou http://lea.verou.me
*/
var Prism = (function (_self){
// Private helper vars
var lang = /\blang(?:uage)?-([\w-]+)\b/i;
var uniqueId = 0;
var _ = {
manual: _self.Prism && _self.Prism.manual,
disableWorkerMessageHandler: _self.Prism && _self.Prism.disableWorkerMessageHandler,
util: {
encode: function encode(tokens) {
if (tokens instanceof Token) {
return new Token(tokens.type, encode(tokens.content), tokens.alias);
} else if (Array.isArray(tokens)) {
return tokens.map(encode);
} else {
return tokens.replace(/&/g, '&').replace(/</g, '<').replace(/\u00a0/g, ' ');
}
},
type: function (o) {
return Object.prototype.toString.call(o).slice(8, -1);
},
objId: function (obj) {
if (!obj['__id']) {
Object.defineProperty(obj, '__id', { value: ++uniqueId });
}
return obj['__id'];
},
// Deep clone a language definition (e.g. to extend it)
clone: function deepClone(o, visited) {
var clone, id, type = _.util.type(o);
visited = visited || {};
switch (type) {
case 'Object':
id = _.util.objId(o);
if (visited[id]) {
return visited[id];
}
clone = {};
visited[id] = clone;
for (var key in o) {
if (o.hasOwnProperty(key)) {
clone[key] = deepClone(o[key], visited);
}
}
return clone;
case 'Array':
id = _.util.objId(o);
if (visited[id]) {
return visited[id];
}
clone = [];
visited[id] = clone;
o.forEach(function (v, i) {
clone[i] = deepClone(v, visited);
});
return clone;
default:
return o;
}
},
/**
* Returns the Prism language of the given element set by a `language-xxxx` or `lang-xxxx` class.
*
* If no language is set for the element or the element is `null` or `undefined`, `none` will be returned.
*
* @param {Element} element
* @returns {string}
*/
getLanguage: function (element) {
while (element && !lang.test(element.className)) {
element = element.parentElement;
}
if (element) {
return (element.className.match(lang) || [, 'none'])[1].toLowerCase();
}
return 'none';
},
/**
* Returns the script element that is currently executing.
*
* This does __not__ work for line script element.
*
* @returns {HTMLScriptElement | null}
*/
currentScript: function () {
if (typeof document === 'undefined') {
return null;
}
if ('currentScript' in document) {
return document.currentScript;
}
// IE11 workaround
// we'll get the src of the current script by parsing IE11's error stack trace
// this will not work for inline scripts
try {
throw new Error();
} catch (err) {
// Get file src url from stack. Specifically works with the format of stack traces in IE.
// A stack will look like this:
//
// Error
// at _.util.currentScript (http://localhost/components/prism-core.js:119:5)
// at Global code (http://localhost/components/prism-core.js:606:1)
var src = (/at [^(\r\n]*\((.*):.+:.+\)$/i.exec(err.stack) || [])[1];
if (src) {
var scripts = document.getElementsByTagName('script');
for (var i in scripts) {
if (scripts[i].src == src) {
return scripts[i];
}
}
}
return null;
}
}
},
languages: {
extend: function (id, redef) {
var lang = _.util.clone(_.languages[id]);
for (var key in redef) {
lang[key] = redef[key];
}
return lang;
},
/**
* Insert a token before another token in a language literal
* As this needs to recreate the object (we cannot actually insert before keys in object literals),
* we cannot just provide an object, we need an object and a key.
* @param inside The key (or language id) of the parent
* @param before The key to insert before.
* @param insert Object with the key/value pairs to insert
* @param root The object that contains `inside`. If equal to Prism.languages, it can be omitted.
*/
insertBefore: function (inside, before, insert, root) {
root = root || _.languages;
var grammar = root[inside];
var ret = {};
for (var token in grammar) {
if (grammar.hasOwnProperty(token)) {
if (token == before) {
for (var newToken in insert) {
if (insert.hasOwnProperty(newToken)) {
ret[newToken] = insert[newToken];
}
}
}
// Do not insert token which also occur in insert. See #1525
if (!insert.hasOwnProperty(token)) {
ret[token] = grammar[token];
}
}
}
var old = root[inside];
root[inside] = ret;
// Update references in other language definitions
_.languages.DFS(_.languages, function(key, value) {
if (value === old && key != inside) {
this[key] = ret;
}
});
return ret;
},
// Traverse a language definition with Depth First Search
DFS: function DFS(o, callback, type, visited) {
visited = visited || {};
var objId = _.util.objId;
for (var i in o) {
if (o.hasOwnProperty(i)) {
callback.call(o, i, o[i], type || i);
var property = o[i],
propertyType = _.util.type(property);
if (propertyType === 'Object' && !visited[objId(property)]) {
visited[objId(property)] = true;
DFS(property, callback, null, visited);
}
else if (propertyType === 'Array' && !visited[objId(property)]) {
visited[objId(property)] = true;
DFS(property, callback, i, visited);
}
}
}
}
},
plugins: {},
highlightAll: function(async, callback) {
_.highlightAllUnder(document, async, callback);
},
highlightAllUnder: function(container, async, callback) {
var env = {
callback: callback,
container: container,
selector: 'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'
};
_.hooks.run('before-highlightall', env);
env.elements = Array.prototype.slice.apply(env.container.querySelectorAll(env.selector));
_.hooks.run('before-all-elements-highlight', env);
for (var i = 0, element; element = env.elements[i++];) {
_.highlightElement(element, async === true, env.callback);
}
},
highlightElement: function(element, async, callback) {
// Find language
var language = _.util.getLanguage(element);
var grammar = _.languages[language];
// Set language on the element, if not present
element.className = element.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;
// Set language on the parent, for styling
var parent = element.parentNode;
if (parent && parent.nodeName.toLowerCase() === 'pre') {
parent.className = parent.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;
}
var code = element.textContent;
var env = {
element: element,
language: language,
grammar: grammar,
code: code
};
function insertHighlightedCode(highlightedCode) {
env.highlightedCode = highlightedCode;
_.hooks.run('before-insert', env);
env.element.innerHTML = env.highlightedCode;
_.hooks.run('after-highlight', env);
_.hooks.run('complete', env);
callback && callback.call(env.element);
}
_.hooks.run('before-sanity-check', env);
if (!env.code) {
_.hooks.run('complete', env);
callback && callback.call(env.element);
return;
}
_.hooks.run('before-highlight', env);
if (!env.grammar) {
insertHighlightedCode(_.util.encode(env.code));
return;
}
if (async && _self.Worker) {
var worker = new Worker(_.filename);
worker.onmessage = function(evt) {
insertHighlightedCode(evt.data);
};
worker.postMessage(JSON.stringify({
language: env.language,
code: env.code,
immediateClose: true
}));
}
else {
insertHighlightedCode(_.highlight(env.code, env.grammar, env.language));
}
},
highlight: function (text, grammar, language) {
var env = {
code: text,
grammar: grammar,
language: language
};
_.hooks.run('before-tokenize', env);
env.tokens = _.tokenize(env.code, env.grammar);
_.hooks.run('after-tokenize', env);
return Token.stringify(_.util.encode(env.tokens), env.language);
},
tokenize: function(text, grammar) {
var rest = grammar.rest;
if (rest) {
for (var token in rest) {
grammar[token] = rest[token];
}
delete grammar.rest;
}
var tokenList = new LinkedList();
addAfter(tokenList, tokenList.head, text);
matchGrammar(text, tokenList, grammar, tokenList.head, 0);
return toArray(tokenList);
},
hooks: {
all: {},
add: function (name, callback) {
var hooks = _.hooks.all;
hooks[name] = hooks[name] || [];
hooks[name].push(callback);
},
run: function (name, env) {
var callbacks = _.hooks.all[name];
if (!callbacks || !callbacks.length) {
return;
}
for (var i=0, callback; callback = callbacks[i++];) {
callback(env);
}
}
},
Token: Token
};
_self.Prism = _;
function Token(type, content, alias, matchedStr, greedy) {
this.type = type;
this.content = content;
this.alias = alias;
// Copy of the full string this token was created from
this.length = (matchedStr || '').length|0;
this.greedy = !!greedy;
}
Token.stringify = function stringify(o, language) {
if (typeof o == 'string') {
return o;
}
if (Array.isArray(o)) {
var s = '';
o.forEach(function (e) {
s += stringify(e, language);
});
return s;
}
var env = {
type: o.type,
content: stringify(o.content, language),
tag: 'span',
classes: ['token', o.type],
attributes: {},
language: language
};
var aliases = o.alias;
if (aliases) {
if (Array.isArray(aliases)) {
Array.prototype.push.apply(env.classes, aliases);
} else {
env.classes.push(aliases);
}
}
_.hooks.run('wrap', env);
var attributes = '';
for (var name in env.attributes) {
attributes += ' ' + name + '="' + (env.attributes[name] || '').replace(/"/g, '"') + '"';
}
return '<' + env.tag + ' class="' + env.classes.join(' ') + '"' + attributes + '>' + env.content + '</' + env.tag + '>';
};
/**
* @param {string} text
* @param {LinkedList<string | Token>} tokenList
* @param {any} grammar
* @param {LinkedListNode<string | Token>} startNode
* @param {number} startPos
* @param {boolean} [oneshot=false]
* @param {string} [target]
*/
function matchGrammar(text, tokenList, grammar, startNode, startPos, oneshot, target) {
for (var token in grammar) {
if (!grammar.hasOwnProperty(token) || !grammar[token]) {
continue;
}
var patterns = grammar[token];
patterns = Array.isArray(patterns) ? patterns : [patterns];
for (var j = 0; j < patterns.length; ++j) {
if (target && target == token + ',' + j) {
return;
}
var pattern = patterns[j],
inside = pattern.inside,
lookbehind = !!pattern.lookbehind,
greedy = !!pattern.greedy,
lookbehindLength = 0,
alias = pattern.alias;
if (greedy && !pattern.pattern.global) {
// Without the global flag, lastIndex won't work
var flags = pattern.pattern.toString().match(/[imsuy]*$/)[0];
pattern.pattern = RegExp(pattern.pattern.source, flags + 'g');
}
pattern = pattern.pattern || pattern;
for ( // iterate the token list and keep track of the current token/string position
var currentNode = startNode.next, pos = startPos;
currentNode !== tokenList.tail;
pos += currentNode.value.length, currentNode = currentNode.next
) {
var str = currentNode.value;
if (tokenList.length > text.length) {
// Something went terribly wrong, ABORT, ABORT!
return;
}
if (str instanceof Token) {
continue;
}
var removeCount = 1; // this is the to parameter of removeBetween
if (greedy && currentNode != tokenList.tail.prev) {
pattern.lastIndex = pos;
var match = pattern.exec(text);
if (!match) {
break;
}
var from = match.index + (lookbehind && match[1] ? match[1].length : 0);
var to = match.index + match[0].length;
var p = pos;
// find the node that contains the match
p += currentNode.value.length;
while (from >= p) {
currentNode = currentNode.next;
p += currentNode.value.length;
}
// adjust pos (and p)
p -= currentNode.value.length;
pos = p;
// the current node is a Token, then the match starts inside another Token, which is invalid
if (currentNode.value instanceof Token) {
continue;
}
// find the last node which is affected by this match
for (
var k = currentNode;
k !== tokenList.tail && (p < to || (typeof k.value === 'string' && !k.prev.value.greedy));
k = k.next
) {
removeCount++;
p += k.value.length;
}
removeCount--;
// replace with the new match
str = text.slice(pos, p);
match.index -= pos;
} else {
pattern.lastIndex = 0;
var match = pattern.exec(str);
}
if (!match) {
if (oneshot) {
break;
}
continue;
}
if (lookbehind) {
lookbehindLength = match[1] ? match[1].length : 0;
}
var from = match.index + lookbehindLength,
match = match[0].slice(lookbehindLength),
to = from + match.length,
before = str.slice(0, from),
after = str.slice(to);
var removeFrom = currentNode.prev;
if (before) {
removeFrom = addAfter(tokenList, removeFrom, before);
pos += before.length;
}
removeRange(tokenList, removeFrom, removeCount);
var wrapped = new Token(token, inside ? _.tokenize(match, inside) : match, alias, match, greedy);
currentNode = addAfter(tokenList, removeFrom, wrapped);
if (after) {
addAfter(tokenList, currentNode, after);
}
if (removeCount > 1)
matchGrammar(text, tokenList, grammar, currentNode.prev, pos, true, token + ',' + j);
if (oneshot)
break;
}
}
}
}
/**
* @typedef LinkedListNode
* @property {T} value
* @property {LinkedListNode<T> | null} prev The previous node.
* @property {LinkedListNode<T> | null} next The next node.
* @template T
*/
/**
* @template T
*/
function LinkedList() {
/** @type {LinkedListNode<T>} */
var head = { value: null, prev: null, next: null };
/** @type {LinkedListNode<T>} */
var tail = { value: null, prev: head, next: null };
head.next = tail;
/** @type {LinkedListNode<T>} */
this.head = head;
/** @type {LinkedListNode<T>} */
this.tail = tail;
this.length = 0;
}
/**
* Adds a new node with the given value to the list.
* @param {LinkedList<T>} list
* @param {LinkedListNode<T>} node
* @param {T} value
* @returns {LinkedListNode<T>} The added node.
* @template T
*/
function addAfter(list, node, value) {
// assumes that node != list.tail && values.length >= 0
var next = node.next;
var newNode = { value: value, prev: node, next: next };
node.next = newNode;
next.prev = newNode;
list.length++;
return newNode;
}
/**
* Removes `count` nodes after the given node. The given node will not be removed.
* @param {LinkedList<T>} list
* @param {LinkedListNode<T>} node
* @param {number} count
* @template T
*/
function removeRange(list, node, count) {
var next = node.next;
for (var i = 0; i < count && next !== list.tail; i++) {
next = next.next;
}
node.next = next;
next.prev = node;
list.length -= i;
}
/**
* @param {LinkedList<T>} list
* @returns {T[]}
* @template T
*/
function toArray(list) {
var array = [];
var node = list.head.next;
while (node !== list.tail) {
array.push(node.value);
node = node.next;
}
return array;
}
if (!_self.document) {
if (!_self.addEventListener) {
// in Node.js
return _;
}
if (!_.disableWorkerMessageHandler) {
// In worker
_self.addEventListener('message', function (evt) {
var message = JSON.parse(evt.data),
lang = message.language,
code = message.code,
immediateClose = message.immediateClose;
_self.postMessage(_.highlight(code, _.languages[lang], lang));
if (immediateClose) {
_self.close();
}
}, false);
}
return _;
}
//Get current script and highlight
var script = _.util.currentScript();
if (script) {
_.filename = script.src;
if (script.hasAttribute('data-manual')) {
_.manual = true;
}
}
function highlightAutomaticallyCallback() {
if (!_.manual) {
_.highlightAll();
}
}
if (!_.manual) {
// If the document state is "loading", then we'll use DOMContentLoaded.
// If the document state is "interactive" and the prism.js script is deferred, then we'll also use the
// DOMContentLoaded event because there might be some plugins or languages which have also been deferred and they
// might take longer one animation frame to execute which can create a race condition where only some plugins have
// been loaded when Prism.highlightAll() is executed, depending on how fast resources are loaded.
// See https://github.com/PrismJS/prism/issues/2102
var readyState = document.readyState;
if (readyState === 'loading' || readyState === 'interactive' && script && script.defer) {
document.addEventListener('DOMContentLoaded', highlightAutomaticallyCallback);
} else {
if (window.requestAnimationFrame) {
window.requestAnimationFrame(highlightAutomaticallyCallback);
} else {
window.setTimeout(highlightAutomaticallyCallback, 16);
}
}
}
return _;
})(_self);
if (typeof module !== 'undefined' && module.exports) {
module.exports = Prism;
}
// hack for components to work correctly in node.js
if (typeof global !== 'undefined') {
global.Prism = Prism;
}
/* **********************************************
Begin prism-markup.js
********************************************** */
Prism.languages.markup = {
'comment': /<!--[\s\S]*?-->/,
'prolog': /<\?[\s\S]+?\?>/,
'doctype': {
pattern: /<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:(?!<!--)[^"'\]]|"[^"]*"|'[^']*'|<!--[\s\S]*?-->)*\]\s*)?>/i,
greedy: true
},
'cdata': /<!\[CDATA\[[\s\S]*?]]>/i,
'tag': {
pattern: /<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/i,
greedy: true,
inside: {
'tag': {
pattern: /^<\/?[^\s>\/]+/i,
inside: {
'punctuation': /^<\/?/,
'namespace': /^[^\s>\/:]+:/
}
},
'attr-value': {
pattern: /=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/i,
inside: {
'punctuation': [
/^=/,
{
pattern: /^(\s*)["']|["']$/,
lookbehind: true
}
]
}
},
'punctuation': /\/?>/,
'attr-name': {
pattern: /[^\s>\/]+/,
inside: {
'namespace': /^[^\s>\/:]+:/
}
}
}
},
'entity': /&#?[\da-z]{1,8};/i
};
Prism.languages.markup['tag'].inside['attr-value'].inside['entity'] =
Prism.languages.markup['entity'];
// Plugin to make entity title show the real entity, idea by Roman Komarov
Prism.hooks.add('wrap', function(env) {
if (env.type === 'entity') {
env.attributes['title'] = env.content.replace(/&/, '&');
}
});
Object.defineProperty(Prism.languages.markup.tag, 'addInlined', {
/**
* Adds an inlined language to markup.
*
* An example of an inlined language is CSS with `<style>` tags.
*
* @param {string} tagName The name of the tag that contains the inlined language. This name will be treated as
* case insensitive.
* @param {string} lang The language key.
* @example
* addInlined('style', 'css');
*/
value: function addInlined(tagName, lang) {
var includedCdataInside = {};
includedCdataInside['language-' + lang] = {
pattern: /(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,
lookbehind: true,
inside: Prism.languages[lang]
};
includedCdataInside['cdata'] = /^<!\[CDATA\[|\]\]>$/i;
var inside = {
'included-cdata': {
pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i,
inside: includedCdataInside
}
};
inside['language-' + lang] = {
pattern: /[\s\S]+/,
inside: Prism.languages[lang]
};
var def = {};
def[tagName] = {
pattern: RegExp(/(<__[\s\S]*?>)(?:<!\[CDATA\[[\s\S]*?\]\]>\s*|[\s\S])*?(?=<\/__>)/.source.replace(/__/g, function () { return tagName; }), 'i'),
lookbehind: true,
greedy: true,
inside: inside
};
Prism.languages.insertBefore('markup', 'cdata', def);
}
});
Prism.languages.xml = Prism.languages.extend('markup', {});
Prism.languages.html = Prism.languages.markup;
Prism.languages.mathml = Prism.languages.markup;
Prism.languages.svg = Prism.languages.markup;
/* **********************************************
Begin prism-css.js
********************************************** */
(function (Prism) {
var string = /("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;
Prism.languages.css = {
'comment': /\/\*[\s\S]*?\*\//,
'atrule': {
pattern: /@[\w-]+[\s\S]*?(?:;|(?=\s*\{))/,
inside: {
'rule': /^@[\w-]+/,
'selector-function-argument': {
pattern: /(\bselector\s*\((?!\s*\))\s*)(?:[^()]|\((?:[^()]|\([^()]*\))*\))+?(?=\s*\))/,
lookbehind: true,
alias: 'selector'
}
// See rest below
}
},
'url': {
pattern: RegExp('url\\((?:' + string.source + '|[^\n\r()]*)\\)', 'i'),
greedy: true,
inside: {
'function': /^url/i,
'punctuation': /^\(|\)$/
}
},
'selector': RegExp('[^{}\\s](?:[^{};"\']|' + string.source + ')*?(?=\\s*\\{)'),
'string': {
pattern: string,
greedy: true
},
'property': /[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,
'important': /!important\b/i,
'function': /[-a-z0-9]+(?=\()/i,
'punctuation': /[(){};:,]/
};
Prism.languages.css['atrule'].inside.rest = Prism.languages.css;
var markup = Prism.languages.markup;
if (markup) {
markup.tag.addInlined('style', 'css');
Prism.languages.insertBefore('inside', 'attr-value', {
'style-attr': {
pattern: /\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,
inside: {
'attr-name': {
pattern: /^\s*style/i,
inside: markup.tag.inside
},
'punctuation': /^\s*=\s*['"]|['"]\s*$/,
'attr-value': {
pattern: /.+/i,
inside: Prism.languages.css
}
},
alias: 'language-css'
}
}, markup.tag);
}
}(Prism));
/* **********************************************
Begin prism-clike.js
********************************************** */
Prism.languages.clike = {
'comment': [
{
pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,
lookbehind: true
},
{
pattern: /(^|[^\\:])\/\/.*/,
lookbehind: true,
greedy: true
}
],
'string': {
pattern: /(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
greedy: true
},
'class-name': {
pattern: /(\b(?:class|interface|extends|implements|trait|instanceof|new)\s+|\bcatch\s+\()[\w.\\]+/i,
lookbehind: true,
inside: {
'punctuation': /[.\\]/
}
},
'keyword': /\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,
'boolean': /\b(?:true|false)\b/,
'function': /\w+(?=\()/,
'number': /\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i,
'operator': /[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,
'punctuation': /[{}[\];(),.:]/
};
/* **********************************************
Begin prism-javascript.js
********************************************** */
Prism.languages.javascript = Prism.languages.extend('clike', {
'class-name': [
Prism.languages.clike['class-name'],
{
pattern: /(^|[^$\w\xA0-\uFFFF])[_$A-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\.(?:prototype|constructor))/,
lookbehind: true
}
],
'keyword': [
{
pattern: /((?:^|})\s*)(?:catch|finally)\b/,
lookbehind: true
},
{
pattern: /(^|[^.]|\.\.\.\s*)\b(?:as|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,
lookbehind: true
},
],
'number': /\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/,
// Allow for all non-ASCII characters (See http://stackoverflow.com/a/2008444)
'function': /#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,
'operator': /--|\+\+|\*\*=?|=>|&&|\|\||[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?[.?]?|[~:]/
});
Prism.languages.javascript['class-name'][0].pattern = /(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/;
Prism.languages.insertBefore('javascript', 'keyword', {
'regex': {
pattern: /((?:^|[^$\w\xA0-\uFFFF."'\])\s])\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*]|\\.|[^/\\\[\r\n])+\/[gimyus]{0,6}(?=(?:\s|\/\*[\s\S]*?\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,
lookbehind: true,
greedy: true
},
// This must be declared before keyword because we use "function" inside the look-forward
'function-variable': {
pattern: /#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/,
alias: 'function'
},
'parameter': [
{
pattern: /(function(?:\s+[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)?\s*\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\))/,
lookbehind: true,
inside: Prism.languages.javascript
},
{
pattern: /[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=>)/i,
inside: Prism.languages.javascript
},
{
pattern: /(\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*=>)/,
lookbehind: true,
inside: Prism.languages.javascript
},
{
pattern: /((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*\s*)\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*\{)/,
lookbehind: true,
inside: Prism.languages.javascript
}
],
'constant': /\b[A-Z](?:[A-Z_]|\dx?)*\b/
});
Prism.languages.insertBefore('javascript', 'string', {
'template-string': {
pattern: /`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|(?!\${)[^\\`])*`/,
greedy: true,
inside: {
'template-punctuation': {
pattern: /^`|`$/,
alias: 'string'
},
'interpolation': {
pattern: /((?:^|[^\\])(?:\\{2})*)\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}/,
lookbehind: true,
inside: {
'interpolation-punctuation': {
pattern: /^\${|}$/,
alias: 'punctuation'
},
rest: Prism.languages.javascript
}
},
'string': /[\s\S]+/
}
}
});
if (Prism.languages.markup) {
Prism.languages.markup.tag.addInlined('script', 'javascript');
}
Prism.languages.js = Prism.languages.javascript;
/* **********************************************
Begin prism-file-highlight.js
********************************************** */
(function () {
if (typeof self === 'undefined' || !self.Prism || !self.document || !document.querySelector) {
return;
}
/**
* @param {Element} [container=document]
*/
self.Prism.fileHighlight = function(container) {
container = container || document;
var Extensions = {
'js': 'javascript',
'py': 'python',
'rb': 'ruby',
'ps1': 'powershell',
'psm1': 'powershell',
'sh': 'bash',
'bat': 'batch',
'h': 'c',
'tex': 'latex'
};
Array.prototype.slice.call(container.querySelectorAll('pre[data-src]')).forEach(function (pre) {
// ignore if already loaded
if (pre.hasAttribute('data-src-loaded')) {
return;
}
// load current
var src = pre.getAttribute('data-src');
var language, parent = pre;
var lang = /\blang(?:uage)?-([\w-]+)\b/i;
while (parent && !lang.test(parent.className)) {
parent = parent.parentNode;
}
if (parent) {
language = (pre.className.match(lang) || [, ''])[1];
}
if (!language) {
var extension = (src.match(/\.(\w+)$/) || [, ''])[1];
language = Extensions[extension] || extension;
}
var code = document.createElement('code');
code.className = 'language-' + language;
pre.textContent = '';
code.textContent = 'Loading…';
pre.appendChild(code);
var xhr = new XMLHttpRequest();
xhr.open('GET', src, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status < 400 && xhr.responseText) {
code.textContent = xhr.responseText;
Prism.highlightElement(code);
// mark as loaded
pre.setAttribute('data-src-loaded', '');
}
else if (xhr.status >= 400) {
code.textContent = '✖ Error ' + xhr.status + ' while fetching file: ' + xhr.statusText;
}
else {
code.textContent = '✖ Error: File does not exist or is empty';
}
}
};
xhr.send(null);
});
};
document.addEventListener('DOMContentLoaded', function () {
// execute inside handler, for dropping Event as argument
self.Prism.fileHighlight();
});
})();
</script>
<script>
Prism.plugins.NormalizeWhitespace.setDefaults({
'remove-trailing': true,
'remove-indent': true,
'left-trim': true,
'right-trim': true,
/*'break-lines': 80,
'indent': 2,
'remove-initial-line-feed': false,
'tabs-to-spaces': 4,
'spaces-to-tabs': 4*/
});
</script>
</body>
</html>