我做了一个新的 Final Cut Pro 插件：Huahua HDR LrC，当前版本1.12-46。它的目标很简单：让各家的Log素材在 Final Cut Pro 里更轻松地进入 HLG HDR 或 PQ HDR 工作流，不需要手动套一堆 LUT，也不需要反复搓色轮来调整曝光。

这个插件适合在 Wide Gamut HDR 时间线中使用，主要用于把相机 Log 素材转换到 HDR，同时提供一些类似 Lightroom / Camera Raw 的基础调色控制，例如曝光、对比度、高光、阴影、白场、黑场、自然饱和度和饱和度。它不是一个风格化 LUT 包，而是一个更偏实用的 HDR 转换和微调工具。

目前支持的输入格式包括：

• Nikon N-Log / Rec.2020
• Sony S-Log3 / S-Gamut3.Cine
• Sony S-Log3 / S-Gamut3
• Canon C-Log2 / Cinema Gamut
• HLG / Rec.2020
• PQ / Rec.2020

输出格式支持：

• Rec.2020 HLG
• PQ 1000 / 2000 / 4000 nits

如果你的素材是 Nikon N-Log、Sony S-Log3、Canon C-Log2，或者已经是 HLG / PQ HDR，这个插件可以直接在 FCP 里作为一个 Effect 使用。安装后会出现在：

Huahua HDR Tools / Huahua HDR LrC

它适合想快速完成 HDR 交付、YouTube HDR 上传、或者同时制作 HLG / PQ 版本的用户。

I made a new Final Cut Pro plug-in: Huahua HDR LrC, current version 1.12-46.

Its goal is simple: to make it easier to bring Log footage from different camera systems into an HLG HDR or PQ HDR workflow directly inside Final Cut Pro. No need to stack multiple LUTs manually, and no need to keep fighting the color wheels just to fix exposure.

The plug-in is designed for Wide Gamut HDR timelines. It mainly converts camera Log footage to HDR, while also providing Lightroom / Camera Raw style basic adjustment controls, including Exposure, Contrast, Highlights, Shadows, Whites, Blacks, Vibrance, and Saturation.

It is not a stylized LUT pack. It is more of a practical HDR technical conversion and trimming tool.

Currently supported input formats:

• Nikon N-Log / Rec.2020
• Sony S-Log3 / S-Gamut3.Cine
• Sony S-Log3 / S-Gamut3
• Canon C-Log2 / Cinema Gamut
• HLG / Rec.2020
• PQ / Rec.2020

Supported output formats:

• Rec.2020 HLG
• PQ 1000 / 2000 / 4000 nits

If your footage is Nikon N-Log, Sony S-Log3, Canon C-Log2, or already HLG / PQ HDR, you can use this plug-in directly as a Final Cut Pro Effect.

After installation, it appears under:

Huahua HDR Tools / Huahua HDR LrC

It is designed for users who want a faster HDR delivery workflow, whether for YouTube HDR uploads, HLG mastering, PQ mastering, or creating both HLG and PQ versions from the same edit.

Put the following code in header.php

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
<script>
  const options = {
    bottom: '48px', // default: '32px'
    right: '12px', // default: '32px'
    left: 'unset', // default: 'unset'
    time: '0.3s', // default: '0.3s'
    mixColor: '#ddd', // default: '#fff' reduce contrast and lower the brightness.
    backgroundColor: '#fff',  // default: '#fff'
    buttonColorDark: '#100f2c',  // default: '#100f2c'
    buttonColorLight: '#fff', // default: '#fff'
    saveInCookies: true, // default: true,
    label: '', // default: ''
    autoMatchOsTheme: true // default: true
  }

  function addDarkmodeWidget() {
    new Darkmode(options).showWidget();
  }
	
  addDarkmodeWidget(); // No delays.
</script>

Basically, it adds an overlay layer that applies a revert color filter (white -> black, blue -> yellow, etc) to ALL the content including images and iframes as well as syntax-highlighted code which I decided to ignore later on.

To ignore a few types of content, add the following code to header.php

<style>
.darkmode-layer, .darkmode-toggle {
    z-index: 500;
}

.darkmode--activated img {
    filter: invert(1);
}

.darkmode--activated iframe {
    filter: invert(1);
}	

.darkmode--activated .crayon-syntax {
    filter: invert(1);
}
</style>

The next thing is to apply a different color theme for code under darkmode. I plan to use classic for day-mode and sublime-text for darkmode. Although the author says the persistent darkmode setting is in cookies, but turns out it’s in localstorage. There are two scenarios we need to handle. 1) page loads with darkmode on, 2) user click button to toggle darkmode. We need to change the class for code blocks accordingly.

Put the following code in the footer.php, since we need to let the syntax-highlighter do the work first.

<script>
var darkMode = localStorage.getItem("darkmode") == "true";    

if (darkMode) {
    updateCrayonTheme(darkMode);
}

var button = document.getElementsByClassName("darkmode-toggle")[0];

button.addEventListener("click", () => {
    darkMode = localStorage.getItem("darkmode") == "true";
    updateCrayonTheme(darkMode);
});

function updateCrayonTheme(darkMode) {
    var x = document.getElementsByClassName("crayon-syntax");
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("crayon-theme-classic");
      x[i].classList.remove("crayon-theme-sublime-text");
      x[i].classList.add(darkMode ? "crayon-theme-sublime-text" : "crayon-theme-classic");
    }  
}
</script>

Or don’t forget to preload the darkmode theme since only the default theme will be loaded to reduce requests and bandwidth.

Put the following code in the header.php <head> section, replace with your domain and plugin version.

<link rel="stylesheet" id="crayon-theme-sublime-text-css" href="https://example.com/wp-content/plugins/crayon-syntax-highlighter-2.8.6/themes/sublime-text/sublime-text.css?ver=_2.7.2_beta" type="text/css" media="all">

Finally it looks like below, not perfect but pretty good and easy to config. I hope wordpress could officially add dark mode in the future release such that all the themes and plugins could implement that (more work though).