diff --git a/README.md b/README.md index 9654295..537759e 100644 --- a/README.md +++ b/README.md @@ -96,10 +96,31 @@ Similarly, here are two examples creating windows with light and dark win-xp the ``` +Finally, here are two examples creating windows with light and dark win-7 theme: + +```html + + + + + + + +``` + ![mac light theme](./doc/img/macos-light.png) ![mac dark theme](./doc/img/macos-dark.png) ![win-xp light theme](./doc/img/win-xp-light.png) ![win-xp dark theme](./doc/img/win-xp-dark.png) +![win-7 light theme](./doc/img/win-7-light.png) +![win-7 dark theme](./doc/img/win-7-dark.png) ## Requirements @@ -114,7 +135,7 @@ Similarly, here are two examples creating windows with light and dark win-xp the ## Features - switch operating system designs - - currently supported themes: `macos` and `win-xp` + - currently supported themes: `macos`, `win-xp`, and `win-7` - switch between light & dark themes - create non-interactive or interactive window frames - use any HTML as window contents diff --git a/doc/api.md b/doc/api.md index e8f54bf..d26f19d 100644 --- a/doc/api.md +++ b/doc/api.md @@ -203,6 +203,7 @@ An example of all available operating system theme settings is show in the image ![mac operating system theme (default)](./img/theme-mac.png) ![win-xp operating system theme (default)](./img/theme-win-xp.png) +![win-7 operating system theme (default)](./img/theme-win-7.png) ```html @@ -222,6 +223,11 @@ An example of all available operating system theme settings is show in the image + + + ``` You can change the operating system theme through JavaScript: @@ -233,6 +239,8 @@ var win = document.createElement('os-window'); win.osTheme = 'mac'; // To change operating system theme to win-xp win.osTheme = 'win-xp'; +// To change operating system theme to win-7 +win.osTheme = 'win-7'; // To read the operating system theme var osTheme = win.osTheme; @@ -266,6 +274,11 @@ An example of all available combinations of light and dark mode with operating s ![light win-xp operating system theme (default)](./img/win-xp-light.png) ![dark win-xp operating system theme](./img/win-xp-dark.png) + +(**left:** light win-7 window theme (default), **right:** dark win-7 window theme) + +![light win-7 operating system theme (default)](./img/win-7-light.png) +![dark win-7 operating system theme](./img/win-7-dark.png) ```html diff --git a/doc/img/theme-win-7.png b/doc/img/theme-win-7.png new file mode 100644 index 0000000..61cc662 Binary files /dev/null and b/doc/img/theme-win-7.png differ diff --git a/doc/img/win-7-dark.png b/doc/img/win-7-dark.png new file mode 100644 index 0000000..64b11b7 Binary files /dev/null and b/doc/img/win-7-dark.png differ diff --git a/doc/img/win-7-light.png b/doc/img/win-7-light.png new file mode 100644 index 0000000..61cc662 Binary files /dev/null and b/doc/img/win-7-light.png differ