Dark Mode Adaptation

In the Vue project

In the beginning, without the latest solution below, we had to write ADAPTS according to media queries on every page that needed to be adapted to the dark mode. Now, after consulting with the designer, we can use the corresponding variables.

Previous plan:
.inputNumber {
    padding: 0.28 rem 0.2 rem 0;
    .input {
        margin-top: 0.4 rem;
        .tip {
            height: 0.2 rem;
            line-height: 0.2 rem;
            font-size: 0.14 rem;
            font-weight: 300;
            color: # 333333; }}}@media (prefers-color-scheme: dark) and (max-device-width: 1024px) {
    .inputNumber {
        .input {
            .tip {
                color: @dark_e5e; }}}}Copy the code
Latest scheme:

Index.vue

<script> /* eslint-disable no-new */ export default { data() { return { darkTheme: false, }; }, watch: { darkTheme(newV) { const obj = document.querySelector('html'); if (newV) { obj.setAttribute('theme', 'dark'); } else { obj.removeAttribute('theme'); } }, }, created() { this.darkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches; }}; </script>Copy the code

index.less

:root{- _333:# 333333;
  --_aaa: #AAAAAA;
  --_c7c: #C7C7C7;
  --_fff: #ffffff;
}
:root[theme="dark"]{- _333:#e5e5e5;
  --_aaa: # 999999;
  --_c7c: # 595959;
  --_fff: # 222225;
}
Copy the code

Use.vue in the page component

.pre {
    position: relative;
    color: var(--_333);
    &::after {
        position: absolute;
        right: -0.1 rem;
        top: 50%;
        transform: translateY(-50%);
        content: "";
        border-top-color: var(--_aaa); }}Copy the code

But there are some problems with this one

For example, the designer may need to tweak the corresponding dark color, so it is not possible to use this variable directly

Or maybe this page didn’t need to be adapted to diablo, so we just wrote the color value, and then suddenly we have to find the corresponding variable.

So, another idea is that some vsCode plug-ins, when we copy the color value from the blue Lake to VScode, the corresponding variable will be provided to us, indicating whether to replace, so that our development work will be much, much less.

Vscode plug-in development

The installation

By default, you already have Node.js and Git installed

npm install -g yo generator-code
Copy the code

If the node version is not supported, you can download a newer version of the node

create

yo code
Copy the code

Then follow the prompts to create the project

# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? HelloWorld
### Press <Enter> to choose default for all options below ###

# ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? LEAVE BLANK
# ? Initialize a git repository? Yes
# ? Bundle the source code with webpack? No
# ? Which package manager to use? npm
Copy the code

Then go to the project you created

Press F5 in the editor and a new vscode will open if prompted

Tips:

Extension is not compatible with Code 1.56.0. Extension requires: ^1.58.0.
Copy the code

You need to update your version of vscode, go to ⚙️ in the lower left corner, then go to Check For Updates, and then automatically update.

** Tips: ** If the tip cannot be upgraded

Cannot update while running on a read-only volume. The application is on a read-only volume. Please move the application  and try again. If you're on macOS Sierra or later, you'll need to move the application out of the Downloads directory. This might mean the application was put on quarantine by macOS. See this link for more information.Copy the code

Need to move your app from download to app (Github solution: github.com/microsoft/v…

After the upgrade, find this place again and click Restart for Update to automatically Restart vscode!

Re-enter your project and press F5 to run the Hello Workld command in the new VSCode window (⇧⌘P)

Then there is a hint out of the line

Ideas:

The first thing to do is to see what scenes are available:

  • Direct input
  • paste
  • The selected value

We need to have a Settings file. What color value can we directly replace with var(–color)

The color format that needs to be adapted

  • # 333333
  • # 333
  • Rgba (255255255, 0)
  • RGB (255255255).