js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Support for nested themes (#174)

Browse Source 
* fix nested themes

* rewrite section on using multiple themes

* correct CDN links

---------

Co-authored-by: konnorrogers <konnor5456@gmail.com>
This commit is contained in:
Lindsay M
2024-10-29 17:40:23 -04:00
committed by GitHub
parent 644e8a9d47
commit 96f017824e
2 changed files with 46 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
docs/docs/themes.md
View File

@@ -40,20 +40,20 @@ For example, the default theme is set up like this:
You can import the default and classic themes from the Web Awesome CDN. Simply add the following code to the `<head>` of your page to import the **default** theme:
```html
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.2/dist/themes/default.css" />
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/themes/default.css" />
```
Or import the **classic** theme:
```html
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.2/dist/themes/classic.css" />
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/themes/classic.css" />
```
Both the default and classic themes include both light and dark color schemes. When importing either theme, the light color scheme is activated by default. To activate the dark color scheme, apply the appropriate class (`wa-theme-default-dark` or `wa-theme-classic-dark`, depending on theme) to the `<html>` element on your page, like this example for the default theme:
```html
<html class="wa-theme-default-dark">
<head>
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.2/dist/themes/default.css" />
<link rel="stylesheet" href="path/to/web-awesome/dist/themes/default.css" />
<!-- other links, scripts, and metadata -->
</head>
<body>
@@ -62,6 +62,24 @@ Both the default and classic themes include both light and dark color schemes. W
</html>
```
Because themes are scoped to specific classes, you can activate different color schemes or entire themes on different containers throughout the page. This example uses the default theme with a dark sidebar.
```html
<html>
<head>
<link rel="stylesheet" href="path/to/web-awesome/dist/themes/default.css" />
</head>
<body>
<nav class="wa-theme-default-dark">
<!-- dark-themed sidebar -->
</nav>
<!-- light-themed content -->
</body>
</html>
```
## Creating Themes
There are two ways to create themes. The easiest way is to customize the default theme. The advanced way is to create a new theme from scratch. Which method you choose depends on your project's requirements and the amount of effort you're willing to invest.