rookeries
/
rookeries
1
0
Fork 0
Code Issues 11 Pull Requests Projects Releases Wiki Activity

Add basic CSS to test the custom element.

This commit is contained in:
Dorian 2019-07-30 08:55:20 -04:00
parent 60b3652647
commit 1064e335c8
2 changed files with 42 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
plugins/dark-mode-switch/index.html
View File

@ -3,6 +3,46 @@
<head>
<title>Rookeries - dark-mode-switch plugin</title>
<meta charset="UTF-8" />
<style>
:root {
--dark-background: #272822;
--light-background: #CCCCCC;
--dark-element: #666666;
--light-element: #a8a8a8;
}
body.dark {
background-color: var(--dark-background);
color: var(--light-background);
}
body.light {
background-color: var(--light-background);
color: var(--dark-background);
}
dark-mode-switch > p {
display: inline;
border-color: #5b5b5b;
border-radius: 10px;
border-width: 2px;
border-style: solid;
padding: 5px;
}
body.dark > dark-mode-switch > p {
background-color: var(--dark-element);
color: var(--light-element);
}
body.light > dark-mode-switch > p {
background-color: var(--light-element);
color: var(--dark-element);
}
body.light > dark-mode-switch > p:hover {
background-color: var(--dark-element);
color: var(--light-element);
}
body.dark > dark-mode-switch > p:hover {
background-color: var(--light-element);
color: var(--dark-element);
}
</style>
</head>
<body>
<h1>Dark Mode Switch plugin</h1>

4
plugins/dark-mode-switch/src/plugin.js
View File

@ -8,7 +8,7 @@ Hello world example plugin
const tagName = "dark-mode-switch";
class HelloWorld extends HTMLElement {
class DarkModeSwitch extends HTMLElement {
connectedCallback() {
const name = this.getAttribute("name") || "World";
const element = document.createElement("p");
@ -19,5 +19,5 @@ class HelloWorld extends HTMLElement {
}
if (customElements.get(tagName) === undefined) {
customElements.define(tagName, HelloWorld);
customElements.define(tagName, DarkModeSwitch);
}