极客教程React.js蓝图变量深色主题样式
在本文中，我们将了解蓝图.js库提供的深色主题样式变量。BlueprintJS是一个基于React的Web用户界面工具包，使用Typescript编写。这个库非常优化，适合在现代Web浏览器中运行的复杂和数据密集的桌面应用程序构建界面。
深色主题样式变量： 这些变量用于构建自定义UI组件，使其外观与深色主题的BlueprintJS组件类似。
深色主题样式变量：
- $pt-dark-dialog-box-shadow： 它对应于CSS中的以下值
$pt-dark-dialog-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2),
0 2px 4px rgba(17, 20, 24, 0.4), 0 8px 24px rgba(17, 20, 24, 0.4)
- $pt-dark-input-box-shadow: 它对应CSS中的以下值
$pt-dark-input-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2),
inset 0 -1px 1px 0 #8f99a8
- $pt-dark-popover-box-shadow： 它对应CSS中的以下值
$pt-dark-popover-box-shadow: 0 0 0 1px #5e6064,
inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 2px 4px rgba(17, 20, 24, 0.4),
0 8px 24px rgba(17, 20, 24, 0.4)
- $pt-dark-tooltip-box-shadow： 对应于CSS中的以下值
$pt-dark-tooltip-box-shadow: 0 2px 4px rgba(17, 20, 24, 0.4),
0 8px 24px rgba(17, 20, 24, 0.4)
创建React应用程序并安装模块
步骤1： 使用以下命令创建React应用程序：
npx create-react-app foldername
步骤2： 创建项目文件夹，例如文件夹名称，使用以下命令进入该文件夹：
cd foldername
步骤3： 创建ReactJS应用程序后，使用以下命令安装所需模块：
npm install @blueprintjs/core
npm install @blueprint/datetime @blueprintjs/datetime2
npm install sass
项目结构： 会像下面这样。
示例1： 以下示例演示了BlueprintJS使用的不同暗色主题样式变量的使用。
现在在App.js文件中写下以下代码。这里，App是我们的默认组件，我们在这里编写了我们的代码。
文件名：App.js
import './App.scss'
import "@blueprintjs/core/lib/css/blueprint.css";
export default function App() {
return (
<div>
<div
className="head"
style={{
width: "fit-content",
margin: "auto",
}}
>
<h1
style={{
color: "green",
}}
>
GeeksforGeeks
</h1>
<strong>
React blueprint Dark Theme Style Variables:
</strong>
<br />
<br />
</div>
<div className="container">
<div className="box box-1"></div>
<div className="box box-2"></div>
<div className="box box-3"></div>
<div className="box box-4"></div>
</div>
</div>
);
}
创建一个新文件App.scss，并将不同的暗色主题样式变量分配给不同的框。
文件名：App.scss
@import "@blueprintjs/core/lib/scss/variables";
.container {
display: flex;
margin: 0 auto;
justify-content: center;
gap: 5px;
}
.box {
width: 100px;
height: 100px;
background-color: white;
}
.box-1 {
box-shadow: pt-dark-dialog-box-shadow;
}
.box-2 {
box-shadow:pt-dark-input-box-shadow;
}
.box-3 {
box-shadow: pt-dark-popover-box-shadow;
}
.box-4 {
box-shadow:pt-dark-tooltip-box-shadow;
}
运行应用程序的步骤： 从项目的根目录中使用以下命令运行应用程序：
npm start
输出： 现在打开你的浏览器并转到 http://localhost:3000/，你将看到以下输出：
示例2： 下面的示例演示了在不同形状的框中使用不同的深色主题样式变量。
文件名：App.js
import './App.scss'
import "@blueprintjs/core/lib/css/blueprint.css";
export default function App() {
return (
<div>
<div
className="head"
style={{
width: "fit-content",
margin: "auto",
}}
>
<h1
style={{
color: "green",
}}
>
GeeksforGeeks
</h1>
<strong>
React blueprint Dark Theme Style Variables:
</strong>
<br />
<br />
</div>
<div className="container">
<div className="box-1"></div>
<div className="box-2"></div>
<div className="box-3"></div>
<div className="box-4"></div>
</div>
</div>
);
}
创建一个新文件，App.scss，并为不同形状的方框指定不同的暗色主题样式变量。
文件名：App.scss
@import "@blueprintjs/core/lib/scss/variables";
.container {
display: flex;
margin: 0 auto;
justify-content: center;
gap: 10px;
}
.box-1 {
width: 100px;
height: 100px;
background: red;
box-shadow: pt-dark-dialog-box-shadow;
}
.box-2 {
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
box-shadow:pt-dark-input-box-shadow;
}
.box-3 {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
box-shadow: pt-dark-popover-box-shadow;
}
.box-4 {
width: 100px;
height: 100px;
border-radius: 100px / 50%;
background: red;
box-shadow:pt-dark-tooltip-box-shadow;
}
运行应用程序的步骤： 在项目的根目录下，使用以下命令运行应用程序：
npm start
输出：
参考： https://blueprintjs.com/docs/#core/variables.dark-theme-styles