sakura-themes
v1.0.2
Published
Sakura Themes Dark Light CSS
Readme
Sakura Themes
Sakura themes for both Lit and direct usage in any project by CDN
Themes
light, dark, red, orange, blue, green, darkRed, darkBlue, darkOrange, darkGreen
Usage in Lit
First, in your Lit project, run:
npm install sakura-themesThen at the top of your Lit Component do as follows.
Example using 'light' (default ) theme:
import { LitElement, html, css } from 'lit';
import { light } from 'sakura-themes';
class MyWebCom extends LitElement {
static styles = light;
Example using 'dark' theme:
import { LitElement, html, css } from 'lit';
import { dark } from 'sakura-themes';
class MyWebCom extends LitElement {
static styles = dark;
If you like to define your own css combined with a sakura theme:
import { LitElement, html, css } from 'lit';
import { light } from 'sakura-themes';
class MyWebComponent extends LitElement {
static styles = [light,
css`
h1 { color: #ff0000 }
`];Usage in index.html
CDN (recommended):
Simply add this in your
<head>tag:<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sakura-themes/sakura.css" type="text/css">
Manually:
Download the file:
wget "https://raw.githubusercontent.com/biensurerodezee/sakura-themes/master/sakura.css"OR download directly: sakura.css
Link it from HTML:
<link rel="stylesheet" href="sakura.css" type="text/css">
Example
https://sakura-themes.surge.sh