Implement support of `data-theme` attribute

[UltimatChamp]

Use [data-theme="..."]{...}:

Websites, that allow the user to toggle the theme using data-theme (in combination with prefers-color-scheme CSS media feature), won't be able to change the notice's theme, and the notice will look out of place.

Syntax:

/* Light Theme */
[data-theme="light"]{
    /* Color Variables */
}

/* Dark Theme */
[data-theme="dark"]{
    /* Color Variables */
}

[martignoni]

@UltimatChamp: Please test this and report back here.

[UltimatChamp]

I can't test now :P, but this is how I made it work, in my site. You might want to label the PR to help wanted for testers!

...
<!--Modified to use "data-theme"--><style type="text/css">[data-theme="light"]{--root-color:#444;--root-background:#eff;--title-color:#fff;--title-background:#7bd;--warning-title:#c33;--warning-content:#fee;--info-title:#fb7;--info-content:#fec;--note-title:#6be;--note-content:#e7f2fa;--tip-title:#5a5;--tip-content:#efe} [data-theme="dark"]{--root-color:#ddd;--root-background:#eff;--title-color:#fff;--title-background:#7bd;--warning-title:#800;--warning-content:#400;--info-title:#a50;--info-content:#420;--note-title:#069;--note-content:#023;--tip-title:#363;--tip-content:#121} .notice{padding:18px;line-height:24px;margin-bottom:24px;border-radius:4px;color:var(--root-color);background:var(--root-background)}.notice p:last-child{margin-bottom:0}.notice-title{margin:-18px -18px 12px;padding:4px 18px;border-radius:4px 4px 0 0;font-weight:700;color:var(--title-color);background:var(--title-background)}.notice.warning .notice-title{background:var(--warning-title)}.notice.warning{background:var(--warning-content)}.notice.info .notice-title{background:var(--info-title)}.notice.info{background:var(--info-content)}.notice.note .notice-title{background:var(--note-title)}.notice.note{background:var(--note-content)}.notice.tip .notice-title{background:var(--tip-title)}.notice.tip{background:var(--tip-content)}.icon-notice{display:inline-flex;align-self:center;margin-right:8px}.icon-notice img,.icon-notice svg{height:1em;width:1em;fill:currentColor}.icon-notice img,.icon-notice.baseline svg{top:.125em;position:relative}</style>
...

[UltimatChamp]

I tested, but it unfortunately didn't work.

The problem is that data-theme doesn't seem to like prefers-color-scheme! (it only works w/o prefers-color-scheme)

[martignoni]

I'd be interested if you can find a way to make work both prefer-color-scheme and data-theme together.

[ZhenHuangLab]

I found the solution! You can try it out:

In the notice.html:

+ [data-theme="dark"] .notice {
+	        --root-color: #ddd;
+	        --root-background: #eff;
+	        --title-color: #fff;
+	        --title-background: #7bd;
+	        --warning-title: #800;
+	        --warning-content: #400;
+	        --info-title: #a50;
+	        --info-content: #420;
+	        --note-title: #069;
+	        --note-content: #023;
+	        --tip-title: #363;
+	        --tip-content: #121
+	    }

- @media (prefers-color-scheme:dark) {
-       .notice {
-          --root-color: #ddd;
-          --root-background: #eff;
-          --title-color: #fff;
-          --title-background: #7bd;
-          --warning-title: #800;
-          --warning-content: #400;
-          --info-title: #a50;
-          --info-content: #420;
-          --note-title: #069;
-          --note-content: #023;
-          --tip-title: #363;
-          --tip-content: #121
-      }
-   }

-	body.dark .notice {
-	        --root-color: #ddd;
-	        --root-background: #eff;
-	        --title-color: #fff;
-	        --title-background: #7bd;
-	        --warning-title: #800;
-	        --warning-content: #400;
-	        --info-title: #a50;
-	        --info-content: #420;
-	        --note-title: #069;
-	        --note-content: #023;
-	        --tip-title: #363;
-	        --tip-content: #121
-	    }

[UltimatChamp]

@ZhenHuangLab This is the problem. We will have to sacrifice prefers-color-scheme.

[martignoni]

We will have to sacrifice prefers-color-scheme.

Indeed, and I'm afraid this is not an option, since it'll break lots of existing websites when upgrading. We need a backward compatible option.