AutoIt help file for dark environment

[argumentum]

I work in a dark environment but the help file is "light". Here's a pic.:

My idea is to have a CSS with dark settings

expandcollapse popup

/* JPM: modified to use inheritage widely
*   em sizing to better zooming
*   coloring similar to MSDN Web
*/

:root {
  color-scheme: dark
}

html {
    font-family:'Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif;
    font-size:.8125em
/* 13px; */
}

body {
    background-color:#111;
    color:#ddd;
    font-weight:400;
    max-width: 1080px;
    margin: 10px;
}

table {
    border-collapse:collapse;
    border-color:silver;
    border-style:solid;
    border-width:1px;
    margin-top:5px;
    width:100%
}

table.noborder {
    border-width:0
}

th {
/* font-size:.875em;  /* 14px; DOCTYPE without .dld */
    background-color:#2f2f2f; /* #ededed; */
    border-color:silver;
    border-style:solid;
    border-width:1px;
    color:#707070;
    padding:4px;
    text-align:left
}

th.new {
    width:224px
}

th.old {
    width:226px
}

th.width25 {
    width:25%
}

th.width75 {
    width:75%
}

tr {
    padding:4px
}

tr.yellow,tr.yellowbold {
    background-color:#808000 /* #ffff9C */
}

tr.Moccasin{
    background-color:#784a0e /* #FFE4B5 */
}

tr.yellowbold {
    font-weight:700
}

table td {
/* font-size:.875em;  /* 14px; DOCTYPE without .dld */
    border-color:silver;
    border-style:solid;
    border-width:1px;
    padding:4px
}

table.noborder td {
    border-width:0
}

td.center {
    text-align:center
}

td.right {
    text-align:right
}

td.sep {
    border-color:#111 silver
}

b {
    font-weight:700
}

u {
    text-decoration:underline
/* for HTML5 compatibility if needed */
}

p {
    margin:0;
    padding-bottom:5px;
    padding-top:5px
}

p.center {
    text-align:center
}

span.underline {
    text-decoration:underline
}

.funcdesc {
    font-size:1.25em
/* 20px; */
}

ul.cell {
    margin:0 0 0 25px
}

div.indent {
    margin-left:32px
}

a,a:link {
    color:#00709f
}

a:visited {
    color:#03697a
}

a:active {
    color:#2a2a2a
}

a:hover {
    color:#3390b1
}

a,a:link,a:visited,a:active {
    text-decoration:none
}

a:hover {
    text-decoration:underline
}

a.ext:link,a.ext:visited,a.ext:active {
    text-decoration:underline
}

a.codeSnippetLink:hover {
    text-decoration:underline
}

h1 {
    color:#707070;
    font-size:2.75em;
/* 36-44px; */
    font-weight:400;
    margin:0;
    padding-bottom:15px;
    padding-top:15px
}

.small {
    font-size:.875em;
/* 12-14px; */
    margin:-12px 0 -4px;
    padding-bottom:0;
    padding-top:9px
}

h2 {
    color:#db7100;
    font-size:1.5em;
/* 24px; */
    font-weight:400;
    line-height:normal;
    margin:0;
    padding-bottom:5px;
    padding-top:25px
}

h3 {
    color:#0073e6; /* navy; */
    font-size:1.0625em;
/* 17px; */
    font-weight:700;
    line-height:normal;
    margin-bottom:0;
    margin-left:5px
}

pre,.code,.codeheader,.codebox {
    font-family:"Courier New",Courier,monospace
}

.code {
    white-space:nowrap
}

.codeheader {
    background-color:#565656; /* #ffa; */
    border-bottom:1px solid #ffa; /* #aaa; */
    border-left:1px solid #ffa;
    border-right:1px solid #ffa;
    border-top:1px solid #ffa;
    padding:16px;
    white-space:normal
}

.codebox {
    border-bottom:1px solid #aaa;
    border-left:1px solid #aaa;
    border-right:1px solid #aaa;
    border-top:1px solid #aaa;
    color:#465584;
    overflow-x:auto;
    padding:8px 8px 16px;
    margin-top:5px;
    white-space:nowrap;
    width:99%
}

.S0 {
    color:#CaCaCa /* #2a2a2a */
}

.S1 {
    color:#609F60;
    font-style:italic
}

.S2 {
    color:#609F60; /* green; */
    font-style:italic
}

.S3 {
    color:#C0FFFF /* blue */
}

.S4 {
    color:#8080FF /* #000090 */
}

.S5 {
    color:#C080C0 /* blue */
}

.S6 {
    color:olive
}

.S7 {
    color:#F0E090 /* red */
}

.S8 {
    color:#FF8000
}

.S9 {
    color:#D0D0D0 /* #2a2a2a */
}

.S10 {
    color:gray
}

.S11 {
    color:#8996A7 /* olive */
}

.S12 {
    color:#dc143c
}

.S13 {
    background-color:#DDE8F0;
    color:red
}

.S14 {
    color:#993399 /* #939 */
}

.S15 {
    color:#0080ff
}

.bottom {
    padding-bottom:0;
    margin-bottom:0
}

.experimental {
    background-color:#ffffe0;
    border:solid;
    border-color:red;
    font-size:1.5em;
/* 24px; */
    font-weight:700;
    margin:12px;
    padding:4px
}

.specialnote {
    background-color:#fffffa;
    border:solid;
    border-color:blue;
    font-size:1.5em;
/* 24px; */
    font-weight:500;
    padding:4px
}

img.logo_v3 {
    /* box-shadow:5px 5px 20px #aaa */
}

.noPageBreak {
    page-break-inside:avoid
}

/* adapted from MSDN Web for example code open/copy actions */
.codeSnippetContainer {
    min-width:260px;
    margin:0;
    padding:0
}

.codeSnippetContainerTabs {
    font-size:.8333em;
/* 13.33px 10pt!important; */
    height:20px;
/* 22px; */
    position:relative;
    vertical-align:middle;
    z-index:1
}

.codeSnippetContainerTab {
/* background:none repeat scroll 0 0 #eff5ff; */
    border-bottom:2px solid #d0d2d2;
    border-top:1px solid #bbb;
    border-left:1px solid #929292;
    float:left;
    height:20px;
/* 19px; */
    padding:0 4px;
/* 0 8px; */
    width:auto;
    overflow:hidden;
    position:relative;
    font-weight:400
}

/* MSDN not used
* .codeSnippetContainerTabActive
* {
*   height:21px;
*   background:none repeat scroll 0 0 #111;
*   border-left:1px solid #bbb;
*   border-bottom:none;
* }
* 
* .codeSnippetContainerTabFirst
* {
*   border-radius:4px 0 0 0;
*   padding:0 8px 0 6px;
* }
* 
* .codeSnippetContainerTabLast
* {
*   border-right:1px solid #bbb;
*   border-radius:0 4px 0 0;
*   padding:0 6px 0 8px;
* }
*/
.codeSnippetContainerTabSingle {
    border:none;
    color:#00709f;
/* #e66a38; */
    vertical-align:baseline;
    top:10px;
/* 8px; */
    left:12px;
/* 7px; */
    position:relative;
    background-color:#111
}

.codeSnippetContainerTabSingle a {
    color:#e66a38
/* !important; */
}

.codeSnippetContainerTab a,.codeSnippetContainerTab a:link,.codeSnippetContainerTab a:visited,.codeSnippetContainerTab a:active {
    color:#1364c4;
    text-decoration:none
}

/* MSDN not used
* .codeSnippetContainerTabActive a,.codeSnippetContainerTabActive a:link,.codeSnippetContainerTabActive a:visited,.codeSnippetContainerTabActive a:active
* {
*   color:#e66a38;
*   text-decoration:none;
*   position:relative;
* }
* 
* .codeSnippetContainerTabPhantom a,.codeSnippetContainerTabPhantom a:link,.codeSnippetContainerTabPhantom a:visited,.codeSnippetContainerTabPhantom a:active
* {
*   color:#c2c2c2;
*   text-decoration:none;
*   position:relative;
* }
* 
* .codeSnippetContainerTabPhantom a:link,.codeSnippetContainerTabPhantom a:visited,.codeSnippetContainerTabPhantom a:active
* {
*   color:#707070;
*   text-decoration:none;
*   position:relative;
* }
*/
.codeSnippetContainerTab a:hover {
    color:#e66a38;
    position:relative
}

/* MSDN not used
* .codeSnippetContainerTabPhantom a:hover
* {
*   color:#c2c2c2;
*   position:relative;
* }
*/
.codeSnippetContainerCodeContainer {
    border-bottom:3px solid #5e5e5e; /* #e5e5e5; */
    border-left:3px solid #5e5e5e;
/* 1px */
    border-right:3px solid #5e5e5e;
/* 1px */
    clear:both;
    margin-bottom:0;
/* 12px; */
    position:relative;
    top:-3px
}

.codeSnippetToolBar {
    border-left:0 solid #5e5e5e;
/* 1px */
    border-right:0 solid #5e5e5e;
/* 3px */
    border-top:3px solid #5e5e5e;
    height:auto;
    width:auto
}

div.codeSnippetToolBarText {
    float:right;
    top:-12px;
/* -8px; */
    position:relative;
    background-color:#111;
    width:auto;
    padding-left:4px;
    padding-right:4px;
    height:0;
    vertical-align:top
}

div.codeSnippetToolBarText>a:link,div.codeSnippetToolBarText>a:visited,div.codeSnippetToolBarText>a:active {
/* display:none; */
    margin-left:5px;
    margin-right:5px;
/* font-size:100%; /* 83.33%; /* 10pt */
/* font-style:400!important; */
/* color:#1364c4; */
    text-decoration:none;
    background-color:#111;
    padding-left:4px;
    padding-right:4px
}

div.codeSnippetToolBarText>a:hover {
    text-decoration:underline
}

.codeSnippetContainerCode {
    margin-top:14px;
/* 0; */
    padding:5px 10px;
/* 9px 21px; */
    width:auto
}

.codeSnippetContainerCode div {
    padding:0;
    margin:0
}

.codeSnippetContainerCode pre {
    padding-left:5px;
/* 5px; */
    margin:0;
/*word-break:break-all;*/
    font-style:normal;
    font-weight:400;
    overflow:auto;
    word-wrap:normal
}

#hhctrl {
    vertical-align:middle
}

#hhctrl-bottom {
    vertical-align:bottom
}

.codeSnippetContainerTab object {
    cursor:pointer;
    text-decoration:underline
}

.valign-top {
    vertical-align:text-top
}

as to see something more like: ( and this is just my browser over the help file to present the idea )

the issues are that -I'm not color blind but- coloring is something am not good at.

If I ask to get this done, it has to be definitive, as in "use this CSS for an alt. coloring", but if tomorrow I'm like, let's change this a little bit, today I woke up with the idea of pastels, I'm gonna get kicked in ... the code. 

If you need to get the files from the CHM to have a go at it run hh.exe -decompile C:\SomePath\Folder AutoIt.chm to get to edit and test the colors ( in html\css\default.css ).

Am asking for collaboration to have acceptable colors, given that my coloring skill leave much to be desired and in consensus we all can come to a globally acceptable coloring scheme. Post your CSS if you made one.

Thanks.

Edited March 9 by argumentum

[Werty]

A simple inversion is quite readable...

[argumentum]

..has to be readable and aesthetically pleasing. I feel those colors are too "neon lights" like.

[argumentum]

Looking around for options/solutions, these people at Total Commander made a CHM with optional ( external ) CSS for dark mode.
( https://ghisler.ch/board/viewtopic.php?t=58110 )

[ioa747]

in the past I had made an effort and had come this far

which I could not overcome and gave up

based on  autoit-docs-v3.3.16.1-src

default.css

AutoIt3.chm

UDFs3.chm

Edited March 9 by ioa747
add more info

[argumentum]

I use dark themed desktops for some time now. Via High contrast in the beginning and after just unsigned themes.
If your CHM, had the UDF part, this post would have no reason to exist. Thanks for sharing.

[argumentum]

Other than the collaboration for a nice looking CSS, an optional external "AutoIt3.css" would be the perfect solution for the help file team to have the users, "...do whatever you want" 

[ioa747]

I also added the UDFs3.chm  but when I remember it is embedded in the  AutoIt3.chm

[argumentum]

The chrome based browser comes with "inspect element" ( right click, last entry ), from there,
( say https://www.autoitscript.com/autoit3/files/beta/autoit/docs/libfunctions/_ClipBoard_GetFormatName.htm for example )

Spoiler

you can edit and see the css changes on the fly. Then save it to local drive, with "Save as...", et voilà! All done  
Do get a full dark background for your whole desktop, otherwise color choosing looks different than expected

Edited March 10 by argumentum

[ioa747]

6 hours ago, ioa747 said:

based on  autoit-docs-v3.3.16.1-src

 

[ioa747]

which reminded me of another topic as in the link below
https://www.autoitscript.com/autoit3/docs/tutorials/simplecalc-josbe/simplecalc.htm

which is placed within the  \autoit-docs-v3.3.16.1-src\docs\autoit\english\html\tutorials\simplecalc-josbe\simplecalc.htm
compared to  \autoit-docs-v3.3.16.1-src\docs\autoit\english\WEB_html\tutorials\simplecalc-josbe\simplecalc.htm

https://www.google.com/search?q=%40%40SyntaxHighlighting%40%40 site:www.autoitscript.com

Edited March 10 by ioa747

[argumentum]

You'd have unenumerable amount of scripts to give formatting (link,color,font,etc) to, to be part of the HTML. Is a good way to go about it, if a global change is decided.

[argumentum]

If this is added to the html files

<link href="../css/default.css" rel="stylesheet">
<script language="javascript" src="external.js" type="text/javascript"></script>
</HEAD>

with this below as the external.js, the above html calls for

// external.js
var path = unescape(location.pathname), n = 0

if (path.indexOf('::') != -1)
  {
    if (path.charAt(0) == '@') n = path.indexOf(':') + 1;
    document.writeln('<link rel="stylesheet" href="file://' + path.substring(n, path.lastIndexOf('\\') + 1) + 'AutoIt.css" type="text/css">');
  }

I believe ( as I have not compiled the chm to test, due to not having the setup ), would load an external css called AutoIt.css ( or keep the internal one if the external is not found ).

This way it makes it simple to have an external css to do whatever. I saw @jpm in the files so I guess you're the one to ask for this.

Edited March 10 by argumentum

[Gianni]

here is a small and funny script to quickly test your CSS file "on the fly" (no need to compile the help), save your CSS file along this script.
just run this script while autoit help is open. The script sets the CSS parameters for the pages as you browse them.

expandcollapse popup

#include <IE.au3>

Global $oIE
Global $sMyCSS = FileRead(".\AutoItHelp.css") ; Your custom CSS file

_Example()

Func _Example()

    Local $sHelpVersion = "AutoIt Help (v3.3.16.1)" ; get this from the Help window's title bar
    Local $hWND = WinGetHandle($sHelpVersion) ; handle of the AutoIt Help window
    If Not WinExists($hWND) Then Return MsgBox(0, 'Help not found', "no AutoIt Help running", 3)

    $oIE = _IEAttach($hWND, "embedded") ; get reference to the BrowserControl embedded in the Help
    If @error Then Return MsgBox(0, 'Browser Control error', "problems on attaching Browser Control", 3)

    ; Set your custom CSS settings
    _WebBrowser_CSS_Inject($oIE, $sMyCSS)

    ; get a reference to the browser's window (for event management purpose)
    Local $oWindow = $oIE.document.parentwindow

    ; setup an event management
    Local $Event = ObjEvent($oWindow, "IEEvent_", 'HTMLWindowEvents')

    While WinExists($hWND) ; stay alive only while the help is running
        GUIGetMsg() ; just to delay the CPU load
    WEnd
    Return MsgBox(0, '', "AutoIt Help closed", 3)
EndFunc   ;==>_Example

; following function is fired each time the Help page changes
Volatile Func IEEvent_onload($oEvent)
    ; ConsoleWrite("Debug: onload event" & @crlf)
    _WebBrowser_CSS_Inject($oIE, $sMyCSS)     ; ; apply your custom CSS setting to the loaded page
EndFunc   ;==>IEEvent_onload

; #FUNCTION# ====================================================================================================================
; Name ..........: _WebBrowser_CSS_Inject
; Description ...: this function creates into the html document a CSS node element with embedded the passed CSS or a link to a CSS
; Syntax ........: _WebBrowser_CSS_Inject(Byref $oIE_Server, $sStylesheet[, $bIsUrl = False])
; Parameters ....: $oIE_Server          - a Webbrowser object reference.
;                  $sStylesheet         - CSS source to be injected into the page (either, a CSS or an URL (a link to a CSS)
;                  $bIsUrl              - [optional] True if above parameter is an URL (a link to a CSS source). Default is False.
; Return values .: A Node Object reference, representing the appended node
; Author ........: Gianni
; Modified ......:
; Remarks .......:
; Related .......:
; Link ..........:
; Example .......:
; ===============================================================================================================================
Func _WebBrowser_CSS_Inject(ByRef $oIE_Server, $sStylesheet, $bIsUrl = False)
    ; Inject css
    Local $oStyleNode
    Local $objDocument = $oIE_Server.document
    ;
    If $bIsUrl Then     ; use the link to load a stylesheet
        $oStyleNode = $objDocument.createElement('link')     ; // Creates <link    />
        $oStyleNode.type = "text/css"
        $oStyleNode.rel = 'stylesheet'
        $oStyleNode.href = $sStylesheet
    Else     ; inject the stylesheet directly
        $oStyleNode = $objDocument.createElement('style')     ; // Creates <style></style>
        $oStyleNode.type = 'text/css'
        $oStyleNode.styleSheet.cssText = $sStylesheet     ; // Syntax for IE
    EndIf
    ;
    Local $oNode = $objDocument.getElementsByTagName('head').item(0).appendChild($oStyleNode)

    If $bIsUrl Then     ; wait till css has been downloaded
        Do
            Sleep(250)
            ; ConsoleWrite('css: ' & $oNode.ReadyState & @CRLF) ; debug purpose
        Until $oNode.ReadyState = "loaded" Or $oNode.ReadyState = "complete"
    EndIf

    Return $oNode
EndFunc   ;==>_WebBrowser_CSS_Inject

 

Edited March 10 by Gianni

[argumentum]

@Gianni, beautiful.

If anyone know how to CSS the heck out of the scrollbar  
Found it ( down below )

Edited March 10 by argumentum

[Andreik]

What kind of engine it's used to render .chm files? For browsers it's pretty easy to customize scrollbars.

[argumentum]

Thanks @Andreik. Found it

body {
    background-color:#202020;
    color:#ddd;
    font-weight:400;
    max-width: 1080px;
    margin: 10px;
  scrollbar-base-color: #252525;
  scrollbar-face-color: #353535;
  scrollbar-3dlight-color: #252525;
  scrollbar-highlight-color: #252525;
  scrollbar-track-color: #252525;
  scrollbar-arrow-color: #353535;
  scrollbar-shadow-color: #252525;
  scrollbar-dark-shadow-color: #202020;
}

IE 11 if in the PC. Older if not. ..just guessing here

all that is left, if possible at all, is the GUI one.

Edited March 19 by argumentum
more

[donnyh13]

On 3/10/2024 at 4:11 PM, argumentum said:

all that is left, if possible at all, is the GUI one.

Not sure if you figured it out by now or not, but I believe this does it:

html {
    
  scrollbar-base-color: #252525;
  scrollbar-face-color: #353535;
  scrollbar-3dlight-color: #252525;
  scrollbar-highlight-color: #252525;
  scrollbar-track-color: #252525;
  scrollbar-arrow-color: #353535;
  scrollbar-shadow-color: #252525;
  scrollbar-dark-shadow-color: #202020;
}

 

[argumentum]

3 minutes ago, donnyh13 said:

Not sure if you figured it out by now or not

Didn't. Thanks so very much.   

[argumentum]

And with this, the search for the perfect dark theme CHM, has concluded.

Thanks everyone for the participation.

I'll post the better CSSs at https://www.autoitscript.com/forum/topic/211676-autoithelp-v33161-with-external-css-loading/ once I add this html { } part.