CSS3 全站变黑的样式的基本原理是通过在 HTML 页面中添加一个黑色的背景色，然后通过 CSS 设置页面元素的 CSS 属性，将颜色设置为黑色，从而实现整个页面的变黑效果。具体实现方法如下：
1. 在 HTML 页面中添加一个黑色的背景色。可以使用 CSS 的 background-color 属性来设置背景颜色，如：
<style>
body {
background-color: #000000; /* 黑色背景色 */
</style>
2. 设置页面元素的 CSS 属性，将颜色设置为黑色。可以通过 CSS 的 color 属性来设置元素的颜色，如：
color: #000000; /* 设置标题颜色为黑色 */
color: #000000; /* 设置段落颜色为黑色 */
上述示例中，通过设置 h1 和 p 元素的 CSS 属性，将整个页面的颜色设置为黑色。
3. 可以通过 CSS 的 rgba 运算符来设置颜色，其中 rgba 运算符包含两个颜色值，第一个值是红色(#00)、绿色(#00)、蓝色(#00)的值(称为 r 值)，第二个值是红色(#00)、绿色(#00)、蓝色(#00)的值(称为 g 值)，第三个值是红色(#00)、绿色(#00)、蓝色(#00)的值(称为 b 值)，最后一个值是红色(#00)、绿色(#00)、蓝色(#00)的值(称为 a 值)。例如：
color: rgba(0, 0, 0, 0.5); /* 设置标题颜色为灰度颜色 */
上述示例中，通过设置 h1 元素的 CSS 属性，将标题颜色设置为灰度颜色，即黑色和白色之间的灰色。
通过上述介绍，大家已经了解了 CSS3 全站变黑的样式的基本原理和实现方法。在实际开发中，可以根据具体的需求和场景，灵活使用 CSS 进行页面颜色更改，以达到更好的视觉效果。