A minimal theme engine made to be easy
Insert this into your html file
Self-Hosted CDN
<script src="https://kaiserthe13th.w3spaces.com/eugenia.min.js"></script>or
install eugenia.min.js or eugenia.js and use them directly
First of all you must have a Eugenia instance
const themer = new Eugenia();then you can use the setTheme method to set themes
themer.setTheme({
".some-class": {
"css-property": "value"
// More
},
".some-class-before": {
"content": "value"
"css-property": "value"
// More
},
"#some-id": {
"css-property": "value"
// More
},
"#some-id:hover": {
"new-css-property": "value"
// More
},
"$some > css-selector": {
"css-property": "value"
// More
},
"some-css-variable": "value",
// More
});function rgb(r: number, g: number, b: number) -> string {...}
function rgba(r: number, g: number, b: number, a?: number) -> string {...}
function hsl(h: number, s: number, l: number) -> string {...}
function hsla(h: number, s: number, l: number, a?: number) -> string {...}
class Eugenia {
// Methods
constructor(styleIdentifier = 'eugenia-stylesheet') -> Eugenia {...}
// Sets Theme:
setTheme(theme: object) -> object(theme) {...}
// Getter for any style you have set:
getStyle(k?: string) -> object | string {...}
// Erasing method for any style you have set:
eraseStyle(k?: string) {...}
// Refresh styles
refreshStyles(k?: string) {...}
// Variables
private _styleSheet;
private _styleSheetObject;
}setTheme returns the theme you have set
setTheme is a method that sets themes in the following syntax
Eugenia.setTheme({
".some-class": {
"css-property": "value"
// More
},
".some-class::before": {
"content": "value"
"css-property": "value"
// More
},
"#some-id": {
"css-property": "value"
// More
},
"#some-id:hover": {
"new-css-property": "value"
// More
},
"$some > css-selector": {
"css-property": "value"
// More
},
"some-css-variable": "value",
// More
});getStyle returns the requested style
getStyle is a method that return styles based on the following syntax
Eugenia.getStyle(); // Returns All Styles
Eugenia.getStyle('.some-class'); // Returns The Styles of a Class Named some-class
Eugenia.getStyle('.some-class::before'); // Returns The Styles of the hover state of a Class Named some-class
Eugenia.getStyle('#some-id'); // Returns The Styles of the node with Id some-id
Eugenia.getStyle('#some-id:hover'); // Returns The Styles of the hover state of the node with Id some-id
Eugenia.getStyle('$some > css-selector'); // Returns The Styles of the CSS Selector "some > css-selector"
Eugenia.getStyle('some-css-variable'); // Returns The Value of some-css-variablerefreshStyles doesn't return
refreshStyles is a method that refreshes styles
eraseStyle doesn't return
eraseStyle is a method that erases styles in the following syntax
Eugenia.getStyle(); // Erases All Styles
Eugenia.getStyle('.some-class'); // Erases The Styles of a Class Named some-class
Eugenia.getStyle('.some-class::before'); // Erases The Styles of the hover state of a Class Named some-class
Eugenia.getStyle('#some-id'); // Erases The Styles of the node with Id some-id
Eugenia.getStyle('#some-id:hover'); // Erases The Styles of the hover state of the node with Id some-id
Eugenia.getStyle('$some > css-selector'); // Erases The Styles of the CSS Selector "some > css-selector"
Eugenia.getStyle('some-css-variable'); // Erases The Value of some-css-variable? in front of a todo means uncertainty
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent