6 | 
7 | 
8 |
9 | ## Features
10 |
11 | * Adds a pop of color to your wiki with just a few clicks. Pick any three colors and receive these variations of your color scheme: light, dark, and tan.
12 | * Incorporates TiddlyWiki's layout switching mechanism. At a minimum, you can switch between the Captivate layout and the default TiddlyWiki layout by pressing Ctrl-Shift-L.
13 | * Supports display-p3 color values and gracefully falls back to sRGB for browsers that do not support this color space.
14 |
15 | ## Demo
16 |
17 | For a demonstration, visit [https://cdruan.github.io/tw5-captivate](https://cdruan.github.io/tw5-captivate)
18 |
--------------------------------------------------------------------------------
/plugins/cdr/colorlab/color-deviate.js:
--------------------------------------------------------------------------------
1 | /*\
2 | title: $:/plugins/cdr/colorlab/color-deviate.js
3 | type: application/javascript
4 | module-type: macro
5 |
6 | Adjust the color a bit. If the color is on the dark side, make it slightly
7 | lighter; and make a light color slightly darker.
8 | \*/
9 |
10 | (function(){
11 |
12 | /* jslint node: true, browser: true */
13 | /* global $tw: false */
14 | "use strict";
15 |
16 | exports.name = "color-deviate";
17 |
18 | exports.params = [
19 | {name: "color"},
20 | ];
21 |
22 | var Color = require("$:/plugins/cdr/colorlab/lib/color.js");
23 | var utils = require("$:/plugins/cdr/colorlab/twutils.js");
24 |
25 | exports.run = function(color,value) {
26 | color = new Color(utils.wikifyText(color,this));
27 |
28 | var lightness = color.lightness;
29 | var adjust;
30 |
31 | var newval;
32 | if(lightness < 40) {
33 | newval = 0.085 * Math.pow(lightness,1.45) + 28;
34 | } else {
35 | newval = lightness - Math.pow(Math.max(100-lightness,11),0.79) * 0.4;
36 | }
37 | color.lightness = newval;
38 | return color.toString();
39 | };
40 |
41 | })();
--------------------------------------------------------------------------------
/plugins/cdr/colorlab/color-eval.js:
--------------------------------------------------------------------------------
1 | /*\
2 | title: $:/plugins/cdr/colorlab/color-eval.js
3 | type: application/javascript
4 | module-type: macro
5 |
6 | Returns a color string that is supported by the browser. Can be used to
7 | "downgrade" a p3 color string on browsers that don't support p3 color space.
8 | \*/
9 |
10 | (function(){
11 |
12 | /* jslint node: true, browser: true */
13 | /* global $tw: false */
14 | "use strict";
15 |
16 | exports.name = "color-eval";
17 |
18 | exports.params = [
19 | {name: "color"},
20 | ];
21 |
22 | var Color = require("$:/plugins/cdr/colorlab/lib/color.js");
23 | var utils = require("$:/plugins/cdr/colorlab/twutils.js");
24 |
25 | exports.run = function(color) {
26 | var cssColor = utils.wikifyText(color,this);
27 | color = Color.parse(cssColor);
28 | if (! color) {
29 | return "";
30 | }
31 |
32 | if (color.space && color.space !== "rgb" && $tw.browser) {
33 | if (window.matchMedia("(color-gamut: p3)").matches) {
34 | return (new Color(color)).toString("p3");
35 | }
36 | return (new Color(color)).toString("rgb");
37 | }
38 | return cssColor;
39 | };
40 |
41 | })();
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 cdruan
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/themes/cdr/captivate/readme.tid:
--------------------------------------------------------------------------------
1 | title: $:/themes/cdr/captivate/readme
2 | created: 20210701212256020
3 | modified: 20220122074304455
4 |
5 | This theme aims to provide another clean and functional layout for <$text text="TiddlyWiki"/>.
6 |
7 | !! Features
8 |
9 | Captivate allows you to:
10 |
11 | * Personalize the colors of your wiki with just a few clicks.
12 | * Switch between Captivate and the default <$text text="TiddlyWiki"/> layout.
13 | * Incorporate [[display-p3|https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/]] color. The theme will gracefully fall back to sRGB when necessary.
14 |
15 | !! Installation
16 |
17 | To add this theme to your own <$text text="TiddlyWiki"/>
18 |
19 | # Drag the following links to your wiki:
20 | #* [[$:/themes/cdr/captivate]]
21 | #* [[$:/plugins/cdr/colorlab]]
22 | # Save and reload
23 | # Select the ''Captivate'' theme in ''[[$:/ControlPanel]] > Appearance > Theme''
24 |
25 | !! Usage
26 |
27 | * To generate personal color palettes, go to ''[[$:/ControlPanel]] > Appearance > Theme Tweaks''
28 | * To switch the page layout, use the keyboard shortcut <Enter a color and click on the ''Reset'' button to see the color's lightness value:
39 | <$edit-text tiddler=<