diff --git a/LICENSE b/LICENSE index 2f8a33d..261eeb9 100644 --- a/LICENSE +++ b/LICENSE @@ -1,21 +1,201 @@ -MIT License - -Copyright (c) 2025 Scrum Guide Expansion Pack - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright [yyyy] [name of copyright owner] + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. diff --git a/README.md b/README.md new file mode 100644 index 0000000..7dfbca7 --- /dev/null +++ b/README.md @@ -0,0 +1,249 @@ +[bep]: https://github.com/bep +[bugs]: https://github.com/gohugoio/hugo/issues?q=is%3Aopen+is%3Aissue+label%3ABug +[contributing]: CONTRIBUTING.md +[create a proposal]: https://github.com/gohugoio/hugo/issues/new?labels=Proposal%2C+NeedsTriage&template=feature_request.md +[documentation repository]: https://github.com/gohugoio/hugoDocs +[documentation]: https://gohugo.io/documentation +[dragonfly bsd, freebsd, netbsd, and openbsd]: https://gohugo.io/installation/bsd +[features]: https://gohugo.io/about/features/ +[forum]: https://discourse.gohugo.io +[friends]: https://github.com/gohugoio/hugo/graphs/contributors +[go]: https://go.dev/ +[hugo modules]: https://gohugo.io/hugo-modules/ +[installation]: https://gohugo.io/installation +[issue queue]: https://github.com/gohugoio/hugo/issues +[linux]: https://gohugo.io/installation/linux +[macos]: https://gohugo.io/installation/macos +[prebuilt binary]: https://github.com/gohugoio/hugo/releases/latest +[requesting help]: https://discourse.gohugo.io/t/requesting-help/9132 +[spf13]: https://github.com/spf13 +[static site generator]: https://en.wikipedia.org/wiki/Static_site_generator +[support]: https://discourse.gohugo.io +[themes]: https://themes.gohugo.io/ +[website]: https://gohugo.io +[windows]: https://gohugo.io/installation/windows + +Hugo + +A fast and flexible static site generator built with love by [bep], [spf13], and [friends] in [Go]. + +--- + +[![GoDoc](https://godoc.org/github.com/gohugoio/hugo?status.svg)](https://godoc.org/github.com/gohugoio/hugo) +[![Tests on Linux, MacOS and Windows](https://github.com/gohugoio/hugo/workflows/Test/badge.svg)](https://github.com/gohugoio/hugo/actions?query=workflow%3ATest) +[![Go Report Card](https://goreportcard.com/badge/github.com/gohugoio/hugo)](https://goreportcard.com/report/github.com/gohugoio/hugo) + +[Website] | [Installation] | [Documentation] | [Support] | [Contributing] | Mastodon +## Overview + +Hugo is a [static site generator] written in [Go], optimized for speed and designed for flexibility. With its advanced templating system and fast asset pipelines, Hugo renders a complete site in seconds, often less. + +Due to its flexible framework, multilingual support, and powerful taxonomy system, Hugo is widely used to create: + +- Corporate, government, nonprofit, education, news, event, and project sites +- Documentation sites +- Image portfolios +- Landing pages +- Business, professional, and personal blogs +- Resumes and CVs + +Use Hugo's embedded web server during development to instantly see changes to content, structure, behavior, and presentation. Then deploy the site to your host, or push changes to your Git provider for automated builds and deployment. + +Hugo's fast asset pipelines include: + +- Image processing – Convert, resize, crop, rotate, adjust colors, apply filters, overlay text and images, and extract EXIF data +- JavaScript bundling – Transpile TypeScript and JSX to JavaScript, bundle, tree shake, minify, create source maps, and perform SRI hashing. +- Sass processing – Transpile Sass to CSS, bundle, tree shake, minify, create source maps, perform SRI hashing, and integrate with PostCSS +- Tailwind CSS processing – Compile Tailwind CSS utility classes into standard CSS, bundle, tree shake, optimize, minify, perform SRI hashing, and integrate with PostCSS + +And with [Hugo Modules], you can share content, assets, data, translations, themes, templates, and configuration with other projects via public or private Git repositories. + +See the [features] section of the documentation for a comprehensive summary of Hugo's capabilities. + +## Sponsors + +

 

+

+ Linode +    + Route Planning & Route Optimization Software +     + The complete IDE crafted for professional Go developers. +

+ +## Installation + +Install Hugo from a [prebuilt binary], package manager, or package repository. Please see the installation instructions for your operating system: + +- [macOS] +- [Linux] +- [Windows] +- [DragonFly BSD, FreeBSD, NetBSD, and OpenBSD] + +## Build from source + +Hugo is available in two editions: standard and extended. With the extended edition you can: + +- Encode to the WebP format when processing images. You can decode WebP images with either edition. +- Transpile Sass to CSS using the embedded LibSass transpiler. The extended edition is not required to use the Dart Sass transpiler. + +Prerequisites to build Hugo from source: + +- Standard edition: Go 1.20 or later +- Extended edition: Go 1.20 or later, and GCC + +Build the standard edition: + +```text +go install github.com/gohugoio/hugo@latest +``` + +Build the extended edition: + +```text +CGO_ENABLED=1 go install -tags extended github.com/gohugoio/hugo@latest +``` +## Star History + +[![Star History Chart](https://api.star-history.com/svg?repos=gohugoio/hugo&type=Timeline)](https://star-history.com/#gohugoio/hugo&Timeline) + +## Documentation + +Hugo's [documentation] includes installation instructions, a quick start guide, conceptual explanations, reference information, and examples. + +Please submit documentation issues and pull requests to the [documentation repository]. + +## Support + +Please **do not use the issue queue** for questions or troubleshooting. Unless you are certain that your issue is a software defect, use the [forum]. + +Hugo’s [forum] is an active community of users and developers who answer questions, share knowledge, and provide examples. A quick search of over 20,000 topics will often answer your question. Please be sure to read about [requesting help] before asking your first question. + +## Contributing + +You can contribute to the Hugo project by: + +- Answering questions on the [forum] +- Improving the [documentation] +- Monitoring the [issue queue] +- Creating or improving [themes] +- Squashing [bugs] + +Please submit documentation issues and pull requests to the [documentation repository]. + +If you have an idea for an enhancement or new feature, create a new topic on the [forum] in the "Feature" category. This will help you to: + +- Determine if the capability already exists +- Measure interest +- Refine the concept + +If there is sufficient interest, [create a proposal]. Do not submit a pull request until the project lead accepts the proposal. + +For a complete guide to contributing to Hugo, see the [Contribution Guide](CONTRIBUTING.md). + +## Dependencies + +Hugo stands on the shoulders of great open source libraries. Run `hugo env --logLevel info` to display a list of dependencies. + +
+See current dependencies + +```text +github.com/BurntSushi/locker="v0.0.0-20171006230638-a6e239ea1c69" +github.com/alecthomas/chroma/v2="v2.14.0" +github.com/armon/go-radix="v1.0.1-0.20221118154546-54df44f2176c" +github.com/bep/clocks="v0.5.0" +github.com/bep/debounce="v1.2.0" +github.com/bep/gitmap="v1.6.0" +github.com/bep/goat="v0.5.0" +github.com/bep/godartsass/v2="v2.3.0" +github.com/bep/golibsass="v1.2.0" +github.com/bep/gowebp="v0.3.0" +github.com/bep/imagemeta="v0.8.3" +github.com/bep/lazycache="v0.7.0" +github.com/bep/logg="v0.4.0" +github.com/bep/mclib="v1.20400.20402" +github.com/bep/overlayfs="v0.9.2" +github.com/bep/simplecobra="v0.4.0" +github.com/bep/tmc="v0.5.1" +github.com/cespare/xxhash/v2="v2.3.0" +github.com/clbanning/mxj/v2="v2.7.0" +github.com/cli/safeexec="v1.0.1" +github.com/cpuguy83/go-md2man/v2="v2.0.4" +github.com/disintegration/gift="v1.2.1" +github.com/dlclark/regexp2="v1.11.0" +github.com/evanw/esbuild="v0.24.0" +github.com/fatih/color="v1.18.0" +github.com/frankban/quicktest="v1.14.6" +github.com/fsnotify/fsnotify="v1.8.0" +github.com/getkin/kin-openapi="v0.123.0" +github.com/ghodss/yaml="v1.0.0" +github.com/go-openapi/jsonpointer="v0.20.2" +github.com/go-openapi/swag="v0.22.8" +github.com/gobuffalo/flect="v1.0.3" +github.com/gobwas/glob="v0.2.3" +github.com/gohugoio/go-i18n/v2="v2.1.3-0.20230805085216-e63c13218d0e" +github.com/gohugoio/hashstructure="v0.1.0" +github.com/gohugoio/httpcache="v0.7.0" +github.com/gohugoio/hugo-goldmark-extensions/extras="v0.2.0" +github.com/gohugoio/hugo-goldmark-extensions/passthrough="v0.3.0" +github.com/gohugoio/locales="v0.14.0" +github.com/gohugoio/localescompressed="v1.0.1" +github.com/google/go-cmp="v0.6.0" +github.com/gorilla/websocket="v1.5.3" +github.com/hairyhenderson/go-codeowners="v0.6.1" +github.com/hashicorp/golang-lru/v2="v2.0.7" +github.com/invopop/yaml="v0.2.0" +github.com/jdkato/prose="v1.2.1" +github.com/josharian/intern="v1.0.0" +github.com/kr/pretty="v0.3.1" +github.com/kr/text="v0.2.0" +github.com/kyokomi/emoji/v2="v2.2.13" +github.com/mailru/easyjson="v0.7.7" +github.com/makeworld-the-better-one/dither/v2="v2.4.0" +github.com/marekm4/color-extractor="v1.2.1" +github.com/mattn/go-colorable="v0.1.13" +github.com/mattn/go-isatty="v0.0.20" +github.com/mattn/go-runewidth="v0.0.9" +github.com/mitchellh/mapstructure="v1.5.1-0.20231216201459-8508981c8b6c" +github.com/mohae/deepcopy="v0.0.0-20170929034955-c48cc78d4826" +github.com/muesli/smartcrop="v0.3.0" +github.com/niklasfasching/go-org="v1.7.0" +github.com/olekukonko/tablewriter="v0.0.5" +github.com/pbnjay/memory="v0.0.0-20210728143218-7b4eea64cf58" +github.com/pelletier/go-toml/v2="v2.2.3" +github.com/perimeterx/marshmallow="v1.1.5" +github.com/pkg/browser="v0.0.0-20240102092130-5ac0b6a4141c" +github.com/pkg/errors="v0.9.1" +github.com/rogpeppe/go-internal="v1.13.1" +github.com/russross/blackfriday/v2="v2.1.0" +github.com/sass/dart-sass/compiler="1.81.0" +github.com/sass/dart-sass/implementation="1.81.0" +github.com/sass/dart-sass/protocol="3.1.0" +github.com/spf13/afero="v1.11.0" +github.com/spf13/cast="v1.7.0" +github.com/spf13/cobra="v1.8.1" +github.com/spf13/fsync="v0.10.1" +github.com/spf13/pflag="v1.0.5" +github.com/tdewolff/minify/v2="v2.21.1" +github.com/tdewolff/parse/v2="v2.7.18" +github.com/tetratelabs/wazero="v1.8.1" +github.com/yuin/goldmark-emoji="v1.0.4" +github.com/yuin/goldmark="v1.7.8" +go.uber.org/automaxprocs="v1.5.3" +golang.org/x/crypto="v0.29.0" +golang.org/x/exp="v0.0.0-20221031165847-c99f073a8326" +golang.org/x/image="v0.22.0" +golang.org/x/mod="v0.22.0" +golang.org/x/net="v0.31.0" +golang.org/x/sync="v0.9.0" +golang.org/x/sys="v0.27.0" +golang.org/x/text="v0.20.0" +golang.org/x/tools="v0.27.0" +google.golang.org/protobuf="v1.35.1" +gopkg.in/yaml.v2="v2.4.0" +gopkg.in/yaml.v3="v3.0.1" +howett.net/plist="v1.0.0" +software.sslmate.com/src/go-pkcs12="v0.2.0" +``` +
diff --git a/docs/theme-system.md b/docs/theme-system.md new file mode 100644 index 0000000..defad49 --- /dev/null +++ b/docs/theme-system.md @@ -0,0 +1,199 @@ +# Dark/Light Mode Theme System + +## Overview + +The Scrum Guide Expansion Pack now includes a comprehensive dark/light mode theme system that automatically detects user preferences, persists choices, and provides smooth transitions between themes. + +## Features + +### Core Functionality +- **Auto-detection** of system theme preference using CSS media queries +- **Persistent storage** of user's explicit theme choice in browser localStorage +- **Priority hierarchy**: User preference → System preference → Default (light) +- **FOUC prevention** by initializing theme before page content renders +- **Cross-tab synchronization** for consistent theme across browser tabs + +### Accessibility Compliance +- **WCAG AA compliant** contrast ratios in both themes +- **Keyboard navigation** support with proper focus management +- **Screen reader compatibility** with ARIA labels and roles +- **Minimum touch target size** (44px) for mobile accessibility +- **Motion reduction** support for users with vestibular disorders +- **High contrast mode** support + +### Performance Optimized +- **Sub-100ms theme switching** for instant visual feedback +- **CSS variables** for efficient theme application +- **Smooth transitions** with respect for user motion preferences +- **Minimal JavaScript** footprint for fast loading + +## Usage + +### Theme Toggle Button + +The theme toggle is automatically included in the main navigation and provides: + +```html + +``` + +### Programmatic API + +Access the theme manager globally: + +```javascript +// Toggle between light and dark +window.ThemeManager.toggleTheme(); + +// Set specific theme +window.ThemeManager.setTheme('dark'); +window.ThemeManager.setTheme('light'); +window.ThemeManager.setTheme('auto'); // Follow system preference + +// Get current theme information +const currentTheme = window.ThemeManager.getEffectiveTheme(); +const savedPreference = window.ThemeManager.getSavedTheme(); +``` + +### Event Listening + +Listen for theme changes: + +```javascript +window.addEventListener('themechange', (event) => { + console.log('Theme changed to:', event.detail.effectiveTheme); + console.log('User preference:', event.detail.theme); +}); +``` + +## Implementation Details + +### CSS Architecture + +The theme system uses CSS custom properties (variables) for consistent theming: + +```css +:root { + /* Light theme (default) */ + --theme-bg-primary: #ffffff; + --theme-text-primary: #212529; + --theme-primary: #0d6efd; + /* ... more variables */ +} + +[data-theme="dark"] { + /* Dark theme overrides */ + --theme-bg-primary: #121212; + --theme-text-primary: #ffffff; + --theme-primary: #4d9fff; + /* ... more variables */ +} +``` + +### Theme Detection Priority + +1. **User's saved preference** in localStorage (`theme-preference`) +2. **System/OS preference** via `prefers-color-scheme` media query +3. **Default theme** (light mode) + +### Browser Compatibility + +- **Modern browsers**: Full feature support including CSS custom properties +- **Older browsers**: Graceful degradation with fallback styling +- **Storage unavailable**: Falls back to system preference detection + +## Customization + +### Adding New Theme Variables + +To add new themeable properties, define them in both light and dark theme sections: + +```css +:root { + --theme-my-custom-color: #custom-light-value; +} + +[data-theme="dark"] { + --theme-my-custom-color: #custom-dark-value; +} +``` + +### Creating Additional Themes + +The system can be extended to support additional themes by: + +1. Adding new theme constants in JavaScript +2. Creating corresponding CSS selectors +3. Updating the toggle logic + +### Modifying Transition Effects + +Adjust the transition timing and easing: + +```css +:root { + --theme-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} +``` + +## Testing + +### Performance Testing + +Theme switching performance can be tested with: + +```javascript +// Measure theme switch duration +const start = performance.now(); +window.ThemeManager.toggleTheme(); +// Duration logged via themechange event +``` + +### Accessibility Testing + +- Test keyboard navigation with Tab key +- Verify screen reader compatibility +- Check contrast ratios in both themes +- Test with motion reduction preferences + +### Browser Testing + +Recommended testing across: +- Chrome/Chromium (latest + previous version) +- Firefox (latest + ESR) +- Safari (latest + previous version) +- Edge (latest version) + +## Troubleshooting + +### Theme Not Persisting +- Check if localStorage is available +- Verify no browser extensions blocking storage +- Check for incognito/private browsing mode + +### FOUC (Flash of Unstyled Content) +- Ensure theme.js loads before CSS +- Verify theme detection runs immediately +- Check for JavaScript errors preventing initialization + +### Performance Issues +- Check for excessive CSS transitions +- Verify theme variables are properly defined +- Monitor for layout thrashing during theme switch + +## Files Modified + +- `/site/static/css/style.css` - Theme variables and styling +- `/site/static/js/theme.js` - Theme management system +- `/site/layouts/_default/baseof.html` - Script inclusion +- `/site/layouts/partials/components/main-menu.html` - Toggle integration +- `/site/layouts/partials/components/theme-toggle.html` - Toggle component \ No newline at end of file diff --git a/for grouping b/for grouping new file mode 100644 index 0000000..d831571 --- /dev/null +++ b/for grouping @@ -0,0 +1,84 @@ +diff --git a/site/layouts/download/list.html b/site/layouts/download/list.html +index 0f9922a..78fcb95 100644 +--- a/site/layouts/download/list.html ++++ b/site/layouts/download/list.html +@@ -217,7 +217,7 @@ + {{- end }} + {{- end }} +  +-  ++  + {{ i18n "download_missing_language" . }} {{ i18n "download_contribute_translation" . }} +  +  +diff --git a/site/static/css/style.css b/site/static/css/style.css +index 5183141..b0de319 100644 +--- a/site/static/css/style.css ++++ b/site/static/css/style.css +@@ -249,14 +249,7 @@ pre { + border-top: 1px solid var(--theme-border-color); + } +  +-/* Header styling with theme variables */ +-.main-header { +- background-color: var(--theme-primary); +- color: white; +- padding: 10px; +- text-align: center; +- transition: var(--theme-transition); +-} ++/* Header styling with theme variables - moved to bottom to use homepage brand colors */ +  + /* Header icon styling */ + .main-header .header-icon { +@@ -596,22 +589,42 @@ a.headerlink:hover { + color: white; + } +  ++/* Ensure dropdown menu is properly themed and visible */ ++.dropdown-menu { ++ background-color: var(--theme-bg-primary) !important; ++ border: 1px solid var(--theme-border-color) !important; ++ box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.175); ++} ++ ++[data-theme="dark"] .dropdown-menu { ++ box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5); ++} ++ + .theme-option { +- color: var(--theme-text-primary); ++ color: var(--theme-text-primary) !important; + transition: var(--theme-transition); ++ display: flex !important; ++ align-items: center; + } +  +-.theme-option:hover { +- background-color: var(--theme-bg-secondary); +- color: var(--theme-text-primary); ++.theme-option:hover, ++.theme-option:focus { ++ background-color: var(--theme-bg-secondary) !important; ++ color: var(--theme-text-primary) !important; + } +  + .theme-option.active { +- background-color: var(--theme-primary); +- color: white; ++ background-color: var(--theme-primary) !important; ++ color: white !important; + } +  + .theme-option.active:hover { +- background-color: var(--theme-primary-hover); +- color: white; ++ background-color: var(--theme-primary-hover) !important; ++ color: white !important; ++} ++ ++/* Ensure icons are visible in dropdown */ ++.theme-option i { ++ color: inherit; ++ opacity: 1; + } diff --git a/hugo b/hugo new file mode 100755 index 0000000..48e2ed1 Binary files /dev/null and b/hugo differ diff --git a/hugo_extended_0.139.2_linux-amd64.tar.gz b/hugo_extended_0.139.2_linux-amd64.tar.gz new file mode 100644 index 0000000..942ec75 Binary files /dev/null and b/hugo_extended_0.139.2_linux-amd64.tar.gz differ diff --git a/site/layouts/_default/baseof.html b/site/layouts/_default/baseof.html index 599c5c6..63db003 100644 --- a/site/layouts/_default/baseof.html +++ b/site/layouts/_default/baseof.html @@ -25,6 +25,8 @@ + + diff --git a/site/layouts/download/list.html b/site/layouts/download/list.html index 0f9922a..78fcb95 100644 --- a/site/layouts/download/list.html +++ b/site/layouts/download/list.html @@ -217,7 +217,7 @@

{{ i18n "download_community_translations" . }}

{{- end }} {{- end }} - + {{ i18n "download_missing_language" . }} {{ i18n "download_contribute_translation" . }} diff --git a/site/layouts/partials/components/main-menu.html b/site/layouts/partials/components/main-menu.html index 287dcdd..80f790b 100644 --- a/site/layouts/partials/components/main-menu.html +++ b/site/layouts/partials/components/main-menu.html @@ -22,4 +22,5 @@ {{/*
  • {{ i18n "nav_faq" }}
    • */}} {{ partial "components/language-switcher.html" . }} + {{ partial "components/theme-toggle.html" . }} diff --git a/site/layouts/partials/components/theme-toggle.html b/site/layouts/partials/components/theme-toggle.html new file mode 100644 index 0000000..1cb9fa0 --- /dev/null +++ b/site/layouts/partials/components/theme-toggle.html @@ -0,0 +1,24 @@ + +
  • + + +
    • \ No newline at end of file diff --git a/site/static/css/style.css b/site/static/css/style.css index 644c617..b0de319 100644 --- a/site/static/css/style.css +++ b/site/static/css/style.css @@ -1,25 +1,255 @@ -/* Dark card styling */ +/* ===== THEME SYSTEM ===== */ +/* CSS Custom Properties for Light/Dark Themes */ +:root { + /* Light theme colors (default) - WCAG AA compliant */ + --theme-bg-primary: #ffffff; + --theme-bg-secondary: #f8f9fa; + --theme-bg-tertiary: #e9ecef; + --theme-text-primary: #212529; /* 4.5:1 contrast ratio */ + --theme-text-secondary: #495057; /* 4.5:1 contrast ratio */ + --theme-text-muted: #6c757d; /* 4.5:1 contrast ratio */ + --theme-border-color: #dee2e6; + --theme-border-secondary: #e9ecef; + + /* Navigation colors */ + --theme-nav-bg: #343a40; + --theme-nav-text: #ffffff; /* High contrast */ + --theme-nav-text-hover: #ffffff; + --theme-nav-border: #495057; + + /* Card colors */ + --theme-card-bg: #ffffff; + --theme-card-border: #dee2e6; + --theme-card-text: #212529; + + /* Links and anchor colors - improved contrast */ + --theme-link-color: #0d6efd; /* Good contrast for light theme */ + --theme-link-hover-color: #0b5ed7; + + /* Brand colors (stay consistent) */ + --theme-primary: #0d6efd; /* Bootstrap primary with better contrast */ + --theme-primary-hover: #0b5ed7; + + /* Homepage brand colors - keep consistent */ + --theme-homepage-bg: #135289; /* Original brand color */ + --theme-homepage-btn: #1669b3; /* Original button color */ + + /* Focus colors for accessibility */ + --theme-focus-color: #0d6efd; + --theme-focus-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); + + /* Theme transition */ + --theme-transition: all 0.2s ease-in-out; +} + +/* Dark theme colors - WCAG AA compliant */ +[data-theme="dark"] { + --theme-bg-primary: #121212; /* True dark background */ + --theme-bg-secondary: #1e1e1e; /* Slightly lighter */ + --theme-bg-tertiary: #2d2d2d; /* Card backgrounds */ + --theme-text-primary: #ffffff; /* Maximum contrast */ + --theme-text-secondary: #e0e0e0; /* 4.5:1 contrast ratio */ + --theme-text-muted: #b3b3b3; /* 4.5:1 contrast ratio */ + --theme-border-color: #404040; /* Visible borders */ + --theme-border-secondary: #333333; + + /* Navigation colors for dark theme */ + --theme-nav-bg: #000000; /* Pure black for maximum contrast */ + --theme-nav-text: #ffffff; + --theme-nav-text-hover: #ffffff; + --theme-nav-border: #333333; + + /* Card colors for dark theme */ + --theme-card-bg: #1e1e1e; + --theme-card-border: #404040; + --theme-card-text: #ffffff; + + /* Links and anchor colors - lighter for better contrast */ + --theme-link-color: #66b3ff; /* Lighter blue for dark theme */ + --theme-link-hover-color: #4da6ff; + + /* Brand colors for dark theme */ + --theme-primary: #66b3ff; /* Lighter for better contrast */ + --theme-primary-hover: #4da6ff; + + /* Homepage brand colors - keep original colors */ + --theme-homepage-bg: #135289; /* Keep original brand color */ + --theme-homepage-btn: #1669b3; /* Keep original button color */ + + /* Focus colors for dark theme */ + --theme-focus-color: #4d9fff; /* Lighter blue for dark theme */ + --theme-focus-shadow: 0 0 0 0.2rem rgba(77, 159, 255, 0.25); +} + +/* Apply theme colors to global elements */ +body { + background-color: var(--theme-bg-primary); + color: var(--theme-text-primary); + transition: var(--theme-transition); +} + +/* Main content areas */ +main { + background-color: var(--theme-bg-primary); + color: var(--theme-text-primary); +} + +/* Bootstrap component theming */ +.table { + color: var(--theme-text-primary); + background-color: var(--theme-bg-primary); +} + +.table-striped > tbody > tr:nth-of-type(odd) > td, +.table-striped > tbody > tr:nth-of-type(odd) > th { + background-color: var(--theme-bg-secondary); +} + +.table-bordered { + border-color: var(--theme-border-color); +} + +.table-bordered > thead > tr > th, +.table-bordered > tbody > tr > th, +.table-bordered > tfoot > tr > th, +.table-bordered > thead > tr > td, +.table-bordered > tbody > tr > td, +.table-bordered > tfoot > tr > td { + border-color: var(--theme-border-color); +} + +/* Dropdown theming */ +.dropdown-menu { + background-color: var(--theme-bg-primary); + border-color: var(--theme-border-color); +} + +.dropdown-item { + color: var(--theme-text-primary); +} + +.dropdown-item:hover, +.dropdown-item:focus { + background-color: var(--theme-bg-secondary); + color: var(--theme-text-primary); +} + +.dropdown-divider { + border-top-color: var(--theme-border-color); +} + +/* Modal theming */ +.modal-content { + background-color: var(--theme-bg-primary); + border-color: var(--theme-border-color); +} + +.modal-header, +.modal-footer { + border-color: var(--theme-border-color); +} + +.modal-title { + color: var(--theme-text-primary); +} + +/* Form theming with enhanced accessibility */ +.form-control, +.form-select { + background-color: var(--theme-bg-primary); + border-color: var(--theme-border-color); + color: var(--theme-text-primary); + transition: var(--theme-transition); +} + +.form-control:focus, +.form-select:focus { + border-color: var(--theme-focus-color); + box-shadow: var(--theme-focus-shadow); + outline: none; +} + +/* Enhanced focus styles for accessibility */ +.theme-toggle:focus, +.btn:focus, +a:focus, +button:focus { + outline: 2px solid var(--theme-focus-color); + outline-offset: 2px; +} + +/* Reduce motion for users who prefer it */ +@media (prefers-reduced-motion: reduce) { + :root { + --theme-transition: none; + } + + .theme-toggle, + .btn, + .card, + .navbar-dark, + .bg-dark, + .form-control, + .form-select, + * { + transition: none !important; + animation: none !important; + } +} + +/* Alert theming - preserve Bootstrap colors but add theme support */ +.alert { + border-color: var(--theme-border-color); +} + +/* Code and pre theming */ +code { + background-color: var(--theme-bg-secondary); + color: var(--theme-text-primary); +} + +pre { + background-color: var(--theme-bg-secondary); + color: var(--theme-text-primary); + border-color: var(--theme-border-color); +} + +/* Card styling with theme variables */ +.card { + background-color: var(--theme-card-bg); + border-color: var(--theme-card-border); + color: var(--theme-card-text); + transition: var(--theme-transition); +} + +.card-body { + background-color: var(--theme-card-bg); + color: var(--theme-card-text); +} + +.card-footer { + background-color: var(--theme-card-bg); + border-top-color: var(--theme-border-color); + color: var(--theme-card-text); +} + +/* Legacy dark card class - now uses theme variables */ .card-dark { - background-color: #353535; - color: white; + background-color: var(--theme-card-bg); + color: var(--theme-card-text); border: none; } .card-dark .card-body { - background-color: #353535; + background-color: var(--theme-card-bg); } .card-dark .card-footer { - background-color: #353535; - border-top: 1px solid #555; + background-color: var(--theme-card-bg); + border-top: 1px solid var(--theme-border-color); } -.main-header { - background-color: #135289; - color: white; - padding: 10px; - text-align: center; -} +/* Header styling with theme variables - moved to bottom to use homepage brand colors */ /* Header icon styling */ .main-header .header-icon { @@ -28,31 +258,65 @@ color: white; } -/* Dark navbar styling */ -.navbar-dark { - background-color: #343a40 !important; - border-bottom: 1px solid #495057; +/* Global body theming */ +body { + background-color: var(--theme-bg-primary); + color: var(--theme-text-primary); + transition: var(--theme-transition); +} + +/* Global text color overrides */ +.text-muted { + color: var(--theme-text-muted) !important; +} + +.text-primary { + color: var(--theme-primary) !important; +} + +.text-secondary { + color: var(--theme-text-secondary) !important; +} + +/* Background classes */ +.bg-light { + background-color: var(--theme-bg-secondary) !important; + color: var(--theme-text-primary); +} + +.bg-white { + background-color: var(--theme-bg-primary) !important; + color: var(--theme-text-primary); +} + +/* Navigation styling with theme variables */ +.navbar-dark, .bg-dark { + background-color: var(--theme-nav-bg) !important; + border-bottom: 1px solid var(--theme-nav-border); + transition: var(--theme-transition); } .navbar-dark .navbar-brand { - color: white !important; + color: var(--theme-nav-text) !important; } .navbar-dark .nav-link { color: rgba(255, 255, 255, 0.75) !important; + transition: var(--theme-transition); } .navbar-dark .nav-link:hover, .navbar-dark .nav-link:focus { - color: white !important; + color: var(--theme-nav-text-hover) !important; } .navbar-dark .nav-link.active { - color: white !important; - background-color: #495057; + color: var(--theme-nav-text) !important; + background-color: var(--theme-nav-border); border-radius: 0.375rem; } +/* Environment background colors - maintain branding */ .bg-local { background-color: #f8f9fa !important; } @@ -69,28 +333,298 @@ background-color: #f8d7da !important; } -/* Custom button styling */ +/* Custom button styling with theme support */ .btn-primary { - background-color: #1d7fd5 !important; - border-color: #1d7fd5 !important; + background-color: var(--theme-primary) !important; + border-color: var(--theme-primary) !important; + transition: var(--theme-transition); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { - background-color: #1669b3 !important; - border-color: #1669b3 !important; + background-color: var(--theme-primary-hover) !important; + border-color: var(--theme-primary-hover) !important; } .btn-outline-primary { - color: #1d7fd5 !important; - border-color: #1d7fd5 !important; + color: var(--theme-primary) !important; + border-color: var(--theme-primary) !important; + transition: var(--theme-transition); } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active { - background-color: #1d7fd5 !important; - border-color: #1d7fd5 !important; + background-color: var(--theme-primary) !important; + border-color: var(--theme-primary) !important; + color: white !important; +} + +/* ===== THEME DROPDOWN COMPONENT ===== */ +/* Removed old theme toggle button styles - now using Bootstrap dropdown */ + +/* High contrast mode support */ +@media (prefers-contrast: high) { + .theme-toggle-dropdown { + border-width: 2px; + } + + .theme-toggle-dropdown:focus { + outline-width: 3px; + } +} + +/* ===== ADDITIONAL COMPONENT THEMING ===== */ + +/* Links with improved contrast */ +a { + color: var(--theme-link-color); + transition: var(--theme-transition); +} + +a:hover, +a:focus { + color: var(--theme-link-hover-color); +} + +/* Tables theming */ +.table { + --bs-table-bg: var(--theme-bg-primary); + --bs-table-color: var(--theme-text-primary); + --bs-table-border-color: var(--theme-border-color); + --bs-table-striped-bg: var(--theme-bg-secondary); + --bs-table-hover-bg: var(--theme-bg-tertiary); +} + +.table-responsive { + background-color: var(--theme-bg-primary); +} + +.table th, +.table td { + border-color: var(--theme-border-color); + color: var(--theme-text-primary); +} + +.table-striped > tbody > tr:nth-of-type(odd) > td, +.table-striped > tbody > tr:nth-of-type(odd) > th { + background-color: var(--theme-bg-secondary); +} + +/* Homepage main header with preserved brand colors */ +.main-header { + background-color: var(--theme-homepage-bg) !important; + color: white; + padding: 10px; + text-align: center; + transition: var(--theme-transition); +} + +.main-header .btn-primary { + background-color: var(--theme-homepage-btn) !important; + border-color: var(--theme-homepage-btn) !important; +} + +.main-header .btn-primary:hover, +.main-header .btn-primary:focus, +.main-header .btn-primary:active { + background-color: var(--theme-homepage-btn) !important; + border-color: var(--theme-homepage-btn) !important; + opacity: 0.9; +} + +/* Homepage icons - ensure visibility in light mode */ +.header-icon { color: white !important; + opacity: 1; +} + +/* Creator page subtitle styling */ +.card-text small, +.text-muted { + color: var(--theme-text-muted) !important; +} + +/* Guide metadata labels */ +.guide-meta, +.guide-authors, +.guide-version { + color: var(--theme-text-primary); +} + +/* Table of contents theming */ +.toc, +.table-of-contents { + background-color: var(--theme-bg-secondary); + border: 1px solid var(--theme-border-color); + color: var(--theme-text-primary); +} + +.toc a, +.table-of-contents a { + color: var(--theme-link-color); +} + +.toc a:hover, +.table-of-contents a:hover { + color: var(--theme-link-hover-color); +} + +/* Anchor link icons - improve visibility in dark mode */ +.anchor-link, +.headerlink, +a.headerlink { + color: var(--theme-text-muted); + opacity: 0.7; + transition: var(--theme-transition); +} + +.anchor-link:hover, +.headerlink:hover, +a.headerlink:hover { + color: var(--theme-link-color); + opacity: 1; +} + +/* Creator page specific theming */ +.creator-info .text-muted { + color: var(--theme-text-muted) !important; +} + +.publish-date { + color: var(--theme-text-muted) !important; +} + +.publish-date time { + color: var(--theme-text-muted) !important; +} + +.creator-image .bg-light { + background-color: var(--theme-bg-secondary) !important; +} + +.creator-image .text-muted { + color: var(--theme-text-muted) !important; +} + +/* Content pages general theming */ +.content-details { + color: var(--theme-text-primary); +} + +.content-details h1, +.content-details h2, +.content-details h3, +.content-details h4, +.content-details h5, +.content-details h6 { + color: var(--theme-text-primary); +} + +.content-footer { + border-top: 1px solid var(--theme-border-color); + color: var(--theme-text-primary); +} + +/* Guide page specific theming */ +.content-list { + background-color: var(--theme-bg-secondary) !important; + border: 1px solid var(--theme-border-color); + color: var(--theme-text-primary); +} + +.content-list .h6.text-muted, +.content-list .text-muted { + color: var(--theme-text-muted) !important; +} + +.content-header .text-muted { + color: var(--theme-text-muted) !important; +} + +.content-authors .text-muted, +.content-version .text-muted { + color: var(--theme-text-muted) !important; +} + +.version-number { + color: var(--theme-text-primary); + font-weight: 500; +} + +.content-title { + color: var(--theme-text-primary); +} + +.publish-date time { + color: var(--theme-text-secondary); +} + +/* Content body styling */ +.content-body { + color: var(--theme-text-primary); +} + +.content-body h1, +.content-body h2, +.content-body h3, +.content-body h4, +.content-body h5, +.content-body h6 { + color: var(--theme-text-primary); +} + +.content-body p { + color: var(--theme-text-primary); +} + +/* Theme dropdown styling */ +.theme-toggle-dropdown { + color: rgba(255, 255, 255, 0.75); + transition: var(--theme-transition); +} + +.theme-toggle-dropdown:hover { + color: white; +} + +/* Ensure dropdown menu is properly themed and visible */ +.dropdown-menu { + background-color: var(--theme-bg-primary) !important; + border: 1px solid var(--theme-border-color) !important; + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.175); +} + +[data-theme="dark"] .dropdown-menu { + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5); +} + +.theme-option { + color: var(--theme-text-primary) !important; + transition: var(--theme-transition); + display: flex !important; + align-items: center; +} + +.theme-option:hover, +.theme-option:focus { + background-color: var(--theme-bg-secondary) !important; + color: var(--theme-text-primary) !important; +} + +.theme-option.active { + background-color: var(--theme-primary) !important; + color: white !important; +} + +.theme-option.active:hover { + background-color: var(--theme-primary-hover) !important; + color: white !important; +} + +/* Ensure icons are visible in dropdown */ +.theme-option i { + color: inherit; + opacity: 1; } diff --git a/site/static/js/theme.js b/site/static/js/theme.js new file mode 100644 index 0000000..3c209a0 --- /dev/null +++ b/site/static/js/theme.js @@ -0,0 +1,273 @@ +/** + * Theme Management System + * Handles dark/light mode detection, persistence, and switching + */ +class ThemeManager { + constructor() { + this.STORAGE_KEY = 'theme-preference'; + this.THEMES = { + LIGHT: 'light', + DARK: 'dark', + AUTO: 'auto' + }; + + // Initialize theme before DOM content loads to prevent FOUC + this.init(); + } + + /** + * Initialize theme system + */ + init() { + const savedTheme = this.getSavedTheme(); + + // If no saved preference, default to AUTO mode + if (!savedTheme) { + this.setTheme(this.THEMES.AUTO); + } else { + this.applyTheme(savedTheme); + } + + this.setupSystemThemeListener(); + this.setupStorageListener(); + } + + /** + * Get current theme preference with priority: + * 1. User's saved preference (including AUTO) + * 2. System/OS preference + * 3. Default (light) + */ + getThemePreference() { + const saved = this.getSavedTheme(); + if (saved) { + return saved; // Return saved preference including AUTO + } + + // Check system preference if no saved preference + if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { + return this.THEMES.DARK; + } + + return this.THEMES.LIGHT; + } + + /** + * Get saved theme from localStorage + */ + getSavedTheme() { + try { + return localStorage.getItem(this.STORAGE_KEY); + } catch (e) { + console.warn('Theme: localStorage not available', e); + return null; + } + } + + /** + * Save theme preference to localStorage + */ + saveTheme(theme) { + try { + localStorage.setItem(this.STORAGE_KEY, theme); + // Dispatch storage event for cross-tab sync + window.dispatchEvent(new StorageEvent('storage', { + key: this.STORAGE_KEY, + newValue: theme, + storageArea: localStorage + })); + } catch (e) { + console.warn('Theme: Could not save to localStorage', e); + } + } + + /** + * Apply theme to document + */ + applyTheme(theme) { + const effectiveTheme = theme === this.THEMES.AUTO ? this.getSystemTheme() : theme; + + // Remove existing theme attributes + document.documentElement.removeAttribute('data-theme'); + + // Apply new theme + if (effectiveTheme === this.THEMES.DARK) { + document.documentElement.setAttribute('data-theme', 'dark'); + } + + // Update any theme dropdown + this.updateDropdownStates(theme); + } + + /** + * Get system theme preference + */ + getSystemTheme() { + if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { + return this.THEMES.DARK; + } + return this.THEMES.LIGHT; + } + + /** + * Toggle between light and dark themes + */ + toggleTheme() { + const current = this.getSavedTheme() || this.getSystemTheme(); + const newTheme = current === this.THEMES.DARK ? this.THEMES.LIGHT : this.THEMES.DARK; + + this.setTheme(newTheme); + } + + /** + * Set specific theme + */ + setTheme(theme) { + if (!Object.values(this.THEMES).includes(theme)) { + console.warn('Theme: Invalid theme', theme); + return; + } + + this.saveTheme(theme); + this.applyTheme(theme); + + // Dispatch custom event for components to listen to + window.dispatchEvent(new CustomEvent('themechange', { + detail: { theme, effectiveTheme: this.getEffectiveTheme() } + })); + } + + /** + * Get current effective theme (resolved from auto) + */ + getEffectiveTheme() { + const saved = this.getSavedTheme(); + if (saved === this.THEMES.AUTO || !saved) { + return this.getSystemTheme(); + } + return saved; + } + + /** + * Setup listener for system theme changes + */ + setupSystemThemeListener() { + if (window.matchMedia) { + const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); + + // Use the new addEventListener method if available + if (mediaQuery.addEventListener) { + mediaQuery.addEventListener('change', (e) => { + // Only apply if user has AUTO preference or no preference + const saved = this.getSavedTheme(); + if (!saved || saved === this.THEMES.AUTO) { + this.applyTheme(this.THEMES.AUTO); + + // Dispatch theme change event + window.dispatchEvent(new CustomEvent('themechange', { + detail: { theme: this.THEMES.AUTO, effectiveTheme: this.getEffectiveTheme() } + })); + } + }); + } else { + // Fallback for older browsers + mediaQuery.addListener((e) => { + const saved = this.getSavedTheme(); + if (!saved || saved === this.THEMES.AUTO) { + this.applyTheme(this.THEMES.AUTO); + + // Dispatch theme change event + window.dispatchEvent(new CustomEvent('themechange', { + detail: { theme: this.THEMES.AUTO, effectiveTheme: this.getEffectiveTheme() } + })); + } + }); + } + } + } + + /** + * Setup listener for cross-tab synchronization + */ + setupStorageListener() { + window.addEventListener('storage', (e) => { + if (e.key === this.STORAGE_KEY && e.newValue !== e.oldValue) { + this.applyTheme(e.newValue); + } + }); + } + + /** + * Update theme dropdown states + */ + updateDropdownStates(theme) { + const dropdowns = document.querySelectorAll('.theme-toggle-dropdown'); + const options = document.querySelectorAll('.theme-option'); + const effectiveTheme = this.getEffectiveTheme(); + const savedTheme = this.getSavedTheme(); + + dropdowns.forEach(dropdown => { + const text = dropdown.querySelector('[data-theme-current]'); + + if (text) { + // Update dropdown text based on saved preference + if (savedTheme === this.THEMES.AUTO) { + text.textContent = 'Sync with System'; + } else if (savedTheme === this.THEMES.DARK || effectiveTheme === this.THEMES.DARK) { + text.textContent = 'Dark Mode'; + } else { + text.textContent = 'Light Mode'; + } + } + }); + + // Update option states + options.forEach(option => { + const optionTheme = option.dataset.theme; + const isActive = (savedTheme === optionTheme) || + (!savedTheme && optionTheme === this.THEMES.AUTO); + + // Add/remove active class + if (isActive) { + option.classList.add('active'); + option.setAttribute('aria-selected', 'true'); + } else { + option.classList.remove('active'); + option.setAttribute('aria-selected', 'false'); + } + }); + } + + /** + * Setup theme dropdown + */ + setupDropdown() { + const options = document.querySelectorAll('.theme-option'); + + options.forEach(option => { + option.addEventListener('click', (e) => { + e.preventDefault(); + const theme = option.dataset.theme; + this.setTheme(theme); + }); + }); + + // Initial update + this.updateDropdownStates(); + } +} + +// Initialize theme manager immediately to prevent FOUC +const themeManager = new ThemeManager(); + +// Setup dropdown when DOM is ready +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', () => { + themeManager.setupDropdown(); + }); +} else { + themeManager.setupDropdown(); +} + +// Export for global access +window.ThemeManager = themeManager; \ No newline at end of file diff --git a/tdout on a dedicated line b/tdout on a dedicated line new file mode 100644 index 0000000..333a0b5 --- /dev/null +++ b/tdout on a dedicated line @@ -0,0 +1,258 @@ + + SSUUMMMMAARRYY OOFF LLEESSSS CCOOMMMMAANNDDSS + + Commands marked with * may be preceded by a number, _N. + Notes in parentheses indicate the behavior if _N is given. + A key preceded by a caret indicates the Ctrl key; thus ^K is ctrl-K. + + h H Display this help. + q :q Q :Q ZZ Exit. + --------------------------------------------------------------------------- + + MMOOVVIINNGG + + e ^E j ^N CR * Forward one line (or _N lines). + y ^Y k ^K ^P * Backward one line (or _N lines). + f ^F ^V SPACE * Forward one window (or _N lines). + b ^B ESC-v * Backward one window (or _N lines). + z * Forward one window (and set window to _N). + w * Backward one window (and set window to _N). + ESC-SPACE * Forward one window, but don't stop at end-of-file. + d ^D * Forward one half-window (and set half-window to _N). + u ^U * Backward one half-window (and set half-window to _N). + ESC-) RightArrow * Right one half screen width (or _N positions). + ESC-( LeftArrow * Left one half screen width (or _N positions). + ESC-} ^RightArrow Right to last column displayed. + ESC-{ ^LeftArrow Left to first column. + F Forward forever; like "tail -f". + ESC-F Like F but stop when search pattern is found. + r ^R ^L Repaint screen. + R Repaint screen, discarding buffered input. + --------------------------------------------------- + Default "window" is the screen height. + Default "half-window" is half of the screen height. + --------------------------------------------------------------------------- + + SSEEAARRCCHHIINNGG + + /_p_a_t_t_e_r_n * Search forward for (_N-th) matching line. + ?_p_a_t_t_e_r_n * Search backward for (_N-th) matching line. + n * Repeat previous search (for _N-th occurrence). + N * Repeat previous search in reverse direction. + ESC-n * Repeat previous search, spanning files. + ESC-N * Repeat previous search, reverse dir. & spanning files. + ESC-u Undo (toggle) search highlighting. + ESC-U Clear search highlighting. + &_p_a_t_t_e_r_n * Display only matching lines. + --------------------------------------------------- + A search pattern may begin with one or more of: + ^N or ! Search for NON-matching lines. + ^E or * Search multiple files (pass thru END OF FILE). + ^F or @ Start search at FIRST file (for /) or last file (for ?). + ^K Highlight matches, but don't move (KEEP position). + ^R Don't use REGULAR EXPRESSIONS. + ^W WRAP search if no match found. + --------------------------------------------------------------------------- + + JJUUMMPPIINNGG + + g < ESC-< * Go to first line in file (or line _N). + G > ESC-> * Go to last line in file (or line _N). + p % * Go to beginning of file (or _N percent into file). + t * Go to the (_N-th) next tag. + T * Go to the (_N-th) previous tag. + { ( [ * Find close bracket } ) ]. + } ) ] * Find open bracket { ( [. + ESC-^F _<_c_1_> _<_c_2_> * Find close bracket _<_c_2_>. + ESC-^B _<_c_1_> _<_c_2_> * Find open bracket _<_c_1_>. + --------------------------------------------------- + Each "find close bracket" command goes forward to the close bracket + matching the (_N-th) open bracket in the top line. + Each "find open bracket" command goes backward to the open bracket + matching the (_N-th) close bracket in the bottom line. + + m_<_l_e_t_t_e_r_> Mark the current top line with . + M_<_l_e_t_t_e_r_> Mark the current bottom line with . + '_<_l_e_t_t_e_r_> Go to a previously marked position. + '' Go to the previous position. + ^X^X Same as '. + ESC-M_<_l_e_t_t_e_r_> Clear a mark. + --------------------------------------------------- + A mark is any upper-case or lower-case letter. + Certain marks are predefined: + ^ means beginning of the file + $ means end of the file + --------------------------------------------------------------------------- + + CCHHAANNGGIINNGG FFIILLEESS + + :e [_f_i_l_e] Examine a new file. + ^X^V Same as :e. + :n * Examine the (_N-th) next file from the command line. + :p * Examine the (_N-th) previous file from the command line. + :x * Examine the first (or _N-th) file from the command line. + :d Delete the current file from the command line list. + = ^G :f Print current file name. + --------------------------------------------------------------------------- + + MMIISSCCEELLLLAANNEEOOUUSS CCOOMMMMAANNDDSS + + -_<_f_l_a_g_> Toggle a command line option [see OPTIONS below]. + --_<_n_a_m_e_> Toggle a command line option, by name. + __<_f_l_a_g_> Display the setting of a command line option. + ___<_n_a_m_e_> Display the setting of an option, by name. + +_c_m_d Execute the less cmd each time a new file is examined. + + !_c_o_m_m_a_n_d Execute the shell command with $SHELL. + |XX_c_o_m_m_a_n_d Pipe file between current pos & mark XX to shell command. + s _f_i_l_e Save input to a file. + v Edit the current file with $VISUAL or $EDITOR. + V Print version number of "less". + --------------------------------------------------------------------------- + + OOPPTTIIOONNSS + + Most options may be changed either on the command line, + or from within less by using the - or -- command. + Options may be given in one of two forms: either a single + character preceded by a -, or a name preceded by --. + + -? ........ --help + Display help (from command line). + -a ........ --search-skip-screen + Search skips current screen. + -A ........ --SEARCH-SKIP-SCREEN + Search starts just after target line. + -b [_N] .... --buffers=[_N] + Number of buffers. + -B ........ --auto-buffers + Don't automatically allocate buffers for pipes. + -c ........ --clear-screen + Repaint by clearing rather than scrolling. + -d ........ --dumb + Dumb terminal. + -D xx_c_o_l_o_r . --color=xx_c_o_l_o_r + Set screen colors. + -e -E .... --quit-at-eof --QUIT-AT-EOF + Quit at end of file. + -f ........ --force + Force open non-regular files. + -F ........ --quit-if-one-screen + Quit if entire file fits on first screen. + -g ........ --hilite-search + Highlight only last match for searches. + -G ........ --HILITE-SEARCH + Don't highlight any matches for searches. + -h [_N] .... --max-back-scroll=[_N] + Backward scroll limit. + -i ........ --ignore-case + Ignore case in searches that do not contain uppercase. + -I ........ --IGNORE-CASE + Ignore case in all searches. + -j [_N] .... --jump-target=[_N] + Screen position of target lines. + -J ........ --status-column + Display a status column at left edge of screen. + -k [_f_i_l_e] . --lesskey-file=[_f_i_l_e] + Use a lesskey file. + -K ........ --quit-on-intr + Exit less in response to ctrl-C. + -L ........ --no-lessopen + Ignore the LESSOPEN environment variable. + -m -M .... --long-prompt --LONG-PROMPT + Set prompt style. + -n -N .... --line-numbers --LINE-NUMBERS + Don't use line numbers. + -o [_f_i_l_e] . --log-file=[_f_i_l_e] + Copy to log file (standard input only). + -O [_f_i_l_e] . --LOG-FILE=[_f_i_l_e] + Copy to log file (unconditionally overwrite). + -p [_p_a_t_t_e_r_n] --pattern=[_p_a_t_t_e_r_n] + Start at pattern (from command line). + -P [_p_r_o_m_p_t] --prompt=[_p_r_o_m_p_t] + Define new prompt. + -q -Q .... --quiet --QUIET --silent --SILENT + Quiet the terminal bell. + -r -R .... --raw-control-chars --RAW-CONTROL-CHARS + Output "raw" control characters. + -s ........ --squeeze-blank-lines + Squeeze multiple blank lines. + -S ........ --chop-long-lines + Chop (truncate) long lines rather than wrapping. + -t [_t_a_g] .. --tag=[_t_a_g] + Find a tag. + -T [_t_a_g_s_f_i_l_e] --tag-file=[_t_a_g_s_f_i_l_e] + Use an alternate tags file. + -u -U .... --underline-special --UNDERLINE-SPECIAL + Change handling of backspaces. + -V ........ --version + Display the version number of "less". + -w ........ --hilite-unread + Highlight first new line after forward-screen. + -W ........ --HILITE-UNREAD + Highlight first new line after any forward movement. + -x [_N[,...]] --tabs=[_N[,...]] + Set tab stops. + -X ........ --no-init + Don't use termcap init/deinit strings. + -y [_N] .... --max-forw-scroll=[_N] + Forward scroll limit. + -z [_N] .... --window=[_N] + Set size of window. + -" [_c[_c]] . --quotes=[_c[_c]] + Set shell quote characters. + -~ ........ --tilde + Don't display tildes after end of file. + -# [_N] .... --shift=[_N] + Set horizontal scroll amount (0 = one half screen width). + --file-size + Automatically determine the size of the input file. + --follow-name + The F command changes files if the input file is renamed. + --incsearch + Search file as each pattern character is typed in. + --line-num-width=N + Set the width of the -N line number field to N characters. + --mouse + Enable mouse input. + --no-keypad + Don't send termcap keypad init/deinit strings. + --no-histdups + Remove duplicates from command history. + --rscroll=C + Set the character used to mark truncated lines. + --save-marks + Retain marks across invocations of less. + --status-col-width=N + Set the width of the -J status column to N characters. + --use-backslash + Subsequent options use backslash as escape char. + --use-color + Enables colored text. + --wheel-lines=N + Each click of the mouse wheel moves N lines. + + + --------------------------------------------------------------------------- + + LLIINNEE EEDDIITTIINNGG + + These keys can be used to edit text being entered + on the "command line" at the bottom of the screen. + + RightArrow ..................... ESC-l ... Move cursor right one character. + LeftArrow ...................... ESC-h ... Move cursor left one character. + ctrl-RightArrow ESC-RightArrow ESC-w ... Move cursor right one word. + ctrl-LeftArrow ESC-LeftArrow ESC-b ... Move cursor left one word. + HOME ........................... ESC-0 ... Move cursor to start of line. + END ............................ ESC-$ ... Move cursor to end of line. + BACKSPACE ................................ Delete char to left of cursor. + DELETE ......................... ESC-x ... Delete char under cursor. + ctrl-BACKSPACE ESC-BACKSPACE ........... Delete word to left of cursor. + ctrl-DELETE .... ESC-DELETE .... ESC-X ... Delete word under cursor. + ctrl-U ......... ESC (MS-DOS only) ....... Delete entire line. + UpArrow ........................ ESC-k ... Retrieve previous command line. + DownArrow ...................... ESC-j ... Retrieve next command line. + TAB ...................................... Complete filename & cycle. + SHIFT-TAB ...................... ESC-TAB Complete filename & reverse cycle. + ctrl-L ................................... Complete filename, list all.